목록 구조 (List)

목록 구조화 (Lists)

여러 항목을 나열할 때 텍스트로만 콤마(,)를 찍어 나열하는 것보다, 목록 태그를 사용하면 가독성이 월등히 좋아집니다. 또한 웹 브라우저도 "아, 이것들은 서로 연관된 항목이구나"라고 구조적으로 이해할 수 있습니다.

1. 목록의 세 가지 종류

목록은 순서의 중요도와 정의 방식에 따라 크게 세 가지로 나뉩니다.

<ul>

순서가 필요 없는 목록
(장바구니, 메뉴 등)

사과
바나나
포도

<ol>

순서가 반드시 지켜져야 하는 목록
(레시피, 랭킹 등)

물 끓이기
면 넣기
스프 넣기

<dl>

용어와 뜻을 정의하는 목록
(사전, Q&A 등)

HTML: 웹의 뼈대를 만드는 언어
CSS: 웹을 꾸미는 언어

2. 목록 태그 정리

태그	설명
`<ul>` & `<li>`	Unordered List. 기호(Bullet)로 표시되는 순서 없는 목록. 항목은 `<li>`로 감쌉니다.
`<ol>` & `<li>`	Ordered List. 숫자나 알파벳으로 순서가 매겨지는 목록. `type="A"` 속성으로 기호를 바꿀 수 있습니다.
`<dl>`, `<dt>`, `<dd>`	Description List. `dt`(Term)로 용어를 지정하고, `dd`(Description)로 설명을 작성하는 사전형 목록입니다.

3. 목록 태그 실습

각 목록 태그가 브라우저에서 어떻게 렌더링되는지 확인하세요.

<div class="list-showcase"> <h3>프론트엔드 학습 로드맵</h3>  <ol class="custom-ol" type="1" start="1"> <li>HTML5 구조 잡기</li> <li>CSS3 레이아웃과 디자인</li> <li>JavaScript 동적 제어</li> </ol> <h3>학습에 필요한 도구들</h3>  <ul class="custom-ul"> <li>코드 에디터 (VSCode)</li> <li>최신 브라우저 (Chrome)</li> <li>꺾이지 않는 마음</li> </ul> <h3>자주 묻는 질문 (Q&A)</h3> <dl class="custom-dl"> <dt>Q. 하루에 몇 시간 공부해야 하나요?</dt> <dd>A. 개인차가 있지만, 꾸준히 2시간 이상 하는 것을 추천합니다.</dd> </dl> </div>

태그

설명

<ul> & <li>

Unordered List. 기호(Bullet)로 표시되는 순서 없는 목록. 항목은 <li>로 감쌉니다.

<ol> & <li>

Ordered List. 숫자나 알파벳으로 순서가 매겨지는 목록. type="A" 속성으로 기호를 바꿀 수 있습니다.

<dl>, <dt>, <dd>

Description List. dt(Term)로 용어를 지정하고, dd(Description)로 설명을 작성하는 사전형 목록입니다.