[02-2] HTML 필수태그 정리 2: 목록 태그

 

 

목록으로 분류하고 정리하는 일은 컴퓨터 안뿐만 아니라 펜으로 종이 위에 적어두기도 하죠. 그만큼 중요하고 많이 쓰이는 작성법이라고 할 수 있습니다. 이번 시간은 목록태그를 어떻게 구현할 수 있는지 간단명료하게 정리해두었습니다. 태그의 종류와 응용법만 잘 외워두면 쉽게 배울 수 있다고 생각합니다.

 

 

---

 

 

목록태그

---

01. 목록태그 종류

먼저 목록태그에는 어떤 것들이 있고 어떤 기능을 하는지 알아보도록 합시다.

종류	기능
ul	기본적인 목록 태그 (부모태그)
ol	숫자 목록 태그 (부모태그)
li	ul과  ol의 자식태그
dl	정의형 태그 (부모태그)
dt	정의하고 싶은 제목
dd	제목에 대한 설명 태그

 

사실 이렇게만 봐서는 대체 무슨 태그인지 감이 안잡힙니다. 직접 VScode를 켜고 어떻게 활용되는지 확인해보시는걸 추천합니다.

 

 

 

 

 

02. 기본 목록 태그

 

보는 것과 같이 <ul>태그는 <li>태그들의 부모태그라 할 수 있습니다. 목록에 적고 싶은 내용은 <li>태그 안에 적으면 반영됩니다.

 

 

 

 

 

03. 순서가 있는 목록 태그

 

<ol>태그는 숫자로 목록을 만들어주는 태그로 순서대로 숫자를 매길 수 있습니다. 순위나 번호를 매길 때 사용하면 유용하겠죠.

 

 

 

 

 

04. 정의 태그

 

정의 태그는 이렇게 어떠한 제목을 만들고 그 밑에 설명을 붙일때 사용합니다. 제목은 <dt>태그로, 설명은 <dd>태그로 출력하고 이 두개의 자식태그를 묶어주는 부모태그는 <dl>입니다.

 

 

 

 

05. 응용

 

자식태그인 <li>태그 밑에 또다른 부모태그 <ul>과 자식태그 <li>를 넣을 수 있습니다. '국내 간식 종류', '국내 음식 종류', '해외 간식 종류', '해외 음식 종류' 로 4가지 목록을 만들고 '국내 간식 종류' 밑에 또 '달고나', '눈깔사탕', '밤빵' 이라는 3가지 목록을 넣을 수 있는 것이죠.

 

 

 

---

 

이번 포스팅에서는 간단하게 목록태그는 어떤 것이 있고 출력되었을 때 어떻게 화면에 뜨는지 알아보았습니다. 다음 시간에는 폼태그에 대해 알아보도록 하겠습니다.