📝 목록을 만드는 HTML 태그들!

• HTML로 만드는 목록에는 순서가 있는(ordered) 목록과 순서가 없는 (unordered) 목록이 있다.
• 순서가 있는 목록은 <ol>, 순서가 없는 목록은 <ul>, 목록의 각 항목들은 <il> 태그를 이용한다.
• <ol> <ul>로 크게 감싸고, 안에다가 <li>로 항목들을 넣는 식이다.

 

<ul>, <li> - 순서 없는 목록 만들기

<ul>
    <li>내용1</li>
    <li>내용2</li>
</ul>

• ul = unordered list의 약자
• 순서가 없는 목록을 만들 때 사용
• 🐍 앞에 작은 원 같은건 불릿(bullet) : 모양은 css의 list-style-type 이용해 바꾼다.
• 🐍 사이트의 메뉴 등을 만들 때도 사용된다.

 

<ol>, <li> - 순서 없는 목록 만들기

<ol type="a" start="3" reversed>
    <li>내용1</li>
    <li>내용2</li>
    <li>내용3</li>
</ol>

• ol = ordered list의 약자
• ul안의 li에 ol를 넣는 등 ol과 ul은 섞어서 쓸 수 있다.

속성 설명

• type : 숫자 세는 방식 바꾼다. 1, a, A, i, I 가능, 기본값은 1
• start : 시작 숫자를 바꿈
• reversed : 역순으로 표시

 

🐍 <dl>, <dt>, <dd> : 설명 목록 만들기

<dl>
    <dt>제목1</dt>
    <dd>설명1</dd>
    <dt>제목2</dt>
    <dd>설명2-1</dd>
    <dd>설명2-2</dd>
</dl>

• 제목과 설명, 한 쌍으로 이루어진 목록
• 🐍 제목과 설명은 1:1로 한 쌍인게 좋다고 한다. 아니면 웹 표준에 어긋나고 SEO에 문제