웹 문서에 다양한 내용 입력하기 2 - 목록 만들기

이번에는 목록을 만드는 태그에 대해 학습해보려고 한다. 표 태그는 분량이 많아 다음 포스트에서 다루어야 할 것 같다. 목록을 만드는 것까지는 별로 어렵지 않게 진행할 수 있었다. 표를 만드는 건 많이 어려웠다.

그럼 바로 시작해 보자!

---

 

 

목록 만들기

웹 문서에서 목록은 단순히 어떤 항목을 나열할 때만 사용하지 않는다. CSS와 함께 사용해서 내비게이션을 만들거나 콘텐츠를 배치하는 등 다양한 용도로 쓰이게 된다.

 

순서 있는 목록을 만드는 ol, li 태그

목록을 표시할 내용 앞뒤에 각각 ol을 두고 그 사이에 li를 삽입하는 형태이다.

 

 

---

 

 

ol 태그의 type, start 속성

목록은 기본적으로 숫자 1, 2, 3, ...으로 번호를 붙인다. 이때 type 속성을 사용하면 영문자나 로마 숫자 등으로 순서를 나타낼 수 있다.
순서 목록은 기본적으로 1부터 시작하지만, start 속성을 사용해 원하는 번호부터 시작할 수 있다.

 

---

 

 

 

순서 없는 목록을 만드는 ul, li 태그

 

ol 태그처럼 ul 태그를 앞뒤에 붙이고 그 사이에 li 태그를 삽입한다. 순서 없는 목록은 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데, 이런 작은 그림을 불릿(bullet)이라고 한다.

 

 

---

 

 

 

 

설명 목록을 만드는 dl, dt, dd 태그

설명 목록이란 이름과 값 형태로 된 목록을 말한다. 마치 사전에서 단어명과 설명이 있는 모습을 떠올리면 쉽게 이해할 수 있다. 앞뒤로 dl을 넣고, 그 사이에 이름인 dt와 값인 dd를 넣는다. 이때 dt 태그 사이에 dd 태그를 여러 개 사용할 수도 있다.

 

---

 

 

 

 

실습 - 순서 있는 목록과 순서 없는 목록 만들기

 

1단계 : 순서 있는 목록 작성하기

 

 

---

 

 

 

2단계 : 순서 없는 목록으로 바꾸기

 

 

---

 

 

 

학습을 마치고

목록을 작성하는 텍스트 태그에 대해서 학습해 보았다. 솔직히 수업을 들을 때는 암기가 되지 않고 강의 내용을 듣기 바빴는데, 이렇게 책을 통해 자세히 읽고 공부해 볼 수 있어서 좋았다.
이제 혼자서도 ol과 ul 태그를 활용해 목록을 만들 수 있게 되었다. 그리고 숫자가 아닌 영문 소문자나 대문자 혹은 로마 숫자로 목록을 만드는 법도 배울 수 있었다. 이제 공부할 시간이 1시간 20분밖에 없어 정말 아쉽다. 서둘러서 표 만들기 학습을 해볼 것이다.