본문 바로가기

HTML/기본 이론

[HTML] Chapter 04. 목록 형성

1. html에 주석 기입하기: <!-- -->

주석 기능은 html에서 별도의 설명이 필요하거나 협업이 필요한 경우, 이미 제작한 코드를 숨겨야할 때 사용한다.

해당 주석 기능을 이용하면 인수 인계에 용이하다. 

 

2. 순서있는 목록 기능: <ol></ol> 

ol 태그는 Ordered List의 줄임말로 순서가 있는 리스트를 구현할 때 사용한다.

해당 태그는 <ol></ol> 태그 내부에 <li></li> 태그가 있어야 기능한다.

순서대로 1부터 시작하여 기입되며, 태그 자체의 기능이기 때문에 실제 데이터를 가지지 않는다. (웹 페이지에서 해당 목차 번호가 복사되지 않는다.)

 

만약 다른 문자나 정보를 중심으로 목차를 구성하고 싶다면 type을 지정할 수 있다.

<ol type=”P“></ol>, P 항목에 숫자, 영어, 로마자를 대입하여 타입에 따른 목록을 구성할 수 있다.

해당 기능은 ‘순서가 있는’ 목록으로 정해진 순서에 따라 출력된다는 단점이 있다.

 

또한 같은 페이지 내에서 ol에 의한 목록이 나눠진다면 이어서 구현하기 어려울 것이다.

이를 해결할 수 있는 기능이 <ol type=”” start=”Q”>이다.

Q에 이어서 시작하고자 하는 숫자를 기입하면 해당 숫자부터 표현된다. 

 

(start가 없는 경우 ol 마다 각각 번호가 처음부터 시작된다.)

 

3. 순서없는 목록 기능: <ul></ul> 

ul 태그는 Unordered List의 줄임말로 순서가 없는 리스트를 구현할 때 사용한다.

ol 태그와 다르게 앞에 별도의 숫자나 순서가 기입되지 않는다.

ol과 마찬가지로 태그 내부에 <li></li> 태그가 있어야 기능한다.

도형이 앞에 배치하며 이를 Bullet이라고 한다.

ol은 수정이 필요한 경우 각 항목에 맞는 start 코드를 계산하고 재차 기입하여야 한다.

이러한 불편함이 있어 상대적으로 ul 태그가 수정이 용이한 장점을 가지고 있다. 

 

 

4. 표시 표제가 있는 목록 기능: <dl></dl>

dl 태그는 Definition List의 약자이며 표제를 가진 목록을 구현할 때 사용한다.

표제를 가지기 때문에 <dl></dl> 태그 안에서 <dt></dt> 태그와 <dd></dd> 태그가 있어야 구동된다.

<dd></dd>는 <dt></dt>에 포함되어 다수 작성이 가능하며, 해당 <dl></dl>안에서 <dt></dt> 태그를 여러 항목 기입할 수 있다.