✍️  λͺ©λ‘μ„ λ§Œλ“œλŠ” <ol>...</ol> <ul>...</ul>  

πŸ‘¨‍πŸ’»

1. μˆœμ„œ λͺ©λ‘μ„ λ§Œλ“œλŠ” <ol>, <li> νƒœκ·Έ

ol은 ordered list의 μ€„μž„λ§λ‘œ ν•­λͺ©μ„ μˆœμ„œλŒ€λ‘œ λ‚˜μ—΄ν•˜λŠ” νƒœκ·Έμ΄λ‹€.

<ol> νƒœκ·ΈλŠ” list의 μ€„μž„λ§μΈ <li> νƒœκ·Έμ™€ 같이 μ‚¬μš©λ˜λ©°, μ•„λž˜ μ½”λ“œμ™€ 같이 <ol><li>...</li></ol> μˆœμ„œλ‘œ μž‘μ„±ν•˜λ©΄ λœλ‹€.

<ol> νƒœκ·Έμ˜ κΈ°λ³Έ type은 숫자λ₯Ό ν‘œμ‹œν•˜κ²Œ 되고 μ•ŒνŒŒλ²³ μ†Œλ¬Έμž(a,b,c...) λŒ€λ¬Έμž(A,B,C...) 둜마숫자 (I) 둜마숫자(i) 둜

ν‘œν˜„μ΄ κ°€λŠ₯ν•˜λ‹€.

 

(1-1). <ol><li>...</li></ol> νƒœκ·Έ μ‚¬μš© μ˜ˆμ‹œ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>λͺ©λ‘ νƒœκ·Έμ— λŒ€ν•΄ μ•Œμ•„λ³΄μž</title>
</head>
<body>
    <!-- <ol><li>...</li></ol> νƒœκ·Έ κΈ°λ³Έν˜• -->
    <ol>
        <li>ν•­λͺ©1</li>
        <li>ν•­λͺ©2</li>
        <li>ν•­λͺ©3</li>
    </ol>
</body>
</html>

 

(1-2). <ol><li>...</li></ol> νƒœκ·Έ μ‚¬μš© κ²°κ³Ό

 

(1-3). <ol><li>...</li></ol> νƒœκ·Έ  type 적용

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>λͺ©λ‘ νƒœκ·Έμ— λŒ€ν•΄ μ•Œμ•„λ³΄μž</title>
</head>

<body>
    <!-- <ol><li>...</li></ol> νƒœκ·Έ type 적용 -->
    <ol type="a">
        <li>ν•­λͺ©1</li>
        <li>ν•­λͺ©2</li>
        <li>ν•­λͺ©3</li>
    </ol>
    <ol type="A">
        <li>ν•­λͺ©1</li>
        <li>ν•­λͺ©2</li>
        <li>ν•­λͺ©3</li>
    </ol>
    <ol type="i">
        <li>ν•­λͺ©1</li>
        <li>ν•­λͺ©2</li>
        <li>ν•­λͺ©3</li>
    </ol>
    <ol type="I">
        <li>ν•­λͺ©1</li>
        <li>ν•­λͺ©2</li>
        <li>ν•­λͺ©3</li>
    </ol>
</body>

</html>

 

(1-4). <ol><li>...</li></ol> νƒœκ·Έ  type κ²°κ³Ό

 

2. μˆœμ„œ μ—†λŠ” λͺ©λ‘μ„ λ§Œλ“œλŠ” <ul>, <li> νƒœκ·Έ

ul은 unordered list의 μ€„μž„λ§λ‘œ ν•­λͺ©μ˜ μˆœμ„œκ°€ μ€‘μš”ν•˜μ§€ μ•Šμ„ λ•Œ μ‚¬μš©ν•œλ‹€.

<ul>νƒœκ·ΈλŠ” <ol> νƒœκ·Έμ™€ λ§ˆμ°¬κ°€μ§€λ‘œ <li> νƒœκ·Έμ™€ 같이 μ‚¬μš©λ˜λ©°, μ•„λž˜ μ½”λ“œμ™€ 같이 <ul><li>...</li></ul> μˆœμ„œλ‘œ μž‘μ„± λœλ‹€

μˆœμ„œ μ—†λŠ” λͺ©λ‘μ€ ν•­λͺ© μ•žμ— μž‘μ€ μ›μ΄λ‚˜ μ‚¬κ°ν˜•μ„ λΆ™μ—¬μ„œ κ΅¬λΆ„ν•˜λŠ”λ°, 이런 μž‘μ€ 그림을 뢈릿 이라고 ν•˜κ³ ,  λΆˆλ¦Ώμ€ css μž‘μ—…μœΌλ‘œ λͺ¨μ–‘을 λ°”κΎΈκ±°λ‚˜

μ œκ±°ν•  수 μžˆλ‹€.

 

(2-1). <ul><li>...</li></ul> νƒœκ·Έ μ‚¬μš© μ˜ˆμ‹œ

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>λͺ©λ‘ νƒœκ·Έμ— λŒ€ν•΄ μ•Œμ•„λ³΄μž</title>
</head>

<body>
    <ul>
        <li>ν•­λͺ©1</li>
        <li>ν•­λͺ©2</li>
        <li>ν•­λͺ©3</li>
    </ul>
</body>

</html>

 

(2-2). <ul><li>...</li></ul> νƒœκ·Έ μ‚¬μš© μ˜ˆμ‹œ

πŸ’‘ <ol> νƒœκ·Έμ™€ <ul> νƒœκ·Έμ˜ 차이점

 

<ol> νƒœκ·ΈλŠ” 각 ν•­λͺ©μ„ μˆœμ„œλŒ€λ‘œ λ‚˜μ—΄ν•  λ•Œ μ‚¬μš©ν•˜κ³ 

<ul> νƒœκ·ΈλŠ” ν•­λͺ©μ˜ μˆœμ„œκ°€ μ€‘μš”ν•˜μ§€ μ•Šμ„ λ•Œ μ‚¬μš©ν•œλ‹€.

 

'HTML+CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[CSS] ν”Œλ ‰μŠ€ λ°•μŠ€ μ£ΌμΆ• ν•­λͺ© μ •λ ¬ 속성 ✍️  (1) 2024.11.26
[CSS] λ°˜μ‘ν˜• μ›Ή λ―Έλ””μ–΄ 컀리(@media) ✍️  (0) 2024.11.26
[CSS] display / inline-block κ°€μš΄λ° 정렬에 λŒ€ν•΄ μ•Œμ•„λ³΄μž ✍️  (1) 2024.11.19
[CSS] class μ„ νƒμžμ™€ id μ„ νƒμžμ— λŒ€ν•΄ μ•Œμ•„λ³΄μž ✍️  (1) 2024.11.19
[HTML] input νƒœκ·Έμ˜ value와 placeholder 속성에 λŒ€ν•΄ μ•Œμ•„λ³΄μž ✍️  (1) 2024.11.13

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”