1. 목록 표현 태그
웹 문서를 작성할 때, 목록을 작성해야 할 때가 많습니다. 순서 정렬이나 메뉴 등 리스트를 표시해야 할 때가 있는데 이때 목록 표현 태그를 사용합니다. CSS를 적용하면 홈페이지의 메뉴를 비롯한 다양한 형식으로 활용할 수 있습니다.
HTML <li> 태그는 목록의 항목을 나타냅니다. 반드시 순서가 있는 정렬 목록 <ol>이나 순서가 없는 비정렬 목록 <ul>, 혹은 메뉴 <menu> 안에 위치해야 합니다. 메뉴와 비정렬 목록은 불릿으로 항목을, 정렬 목록에서는 숫자나 문자로 오름차순으로 항목을 나타냅니다.
2. 비정렬 목록 <ul>
<ul> 요소는 unordered list의 약자로 순서가 없는 목록 태그입니다. 순서가 없는 만큼 순서가 중요하지 않은 내용을 입력할 때 사용합니다. 만약 <ul> 요소 안에 항목들의 순서를 바꾸었을 때 의미가 바뀐다면 정렬 목록인 <ol>을 사용하는 게 좋습니다. <ul>과 <ol>의 직계 자식 요소로는 <li> 요소만 올 수 있습니다. 또한, 목록 안 항목으로 <li> 요소를 자식으로 최소 1개 이상을 가져야 합니다.
순서가 없어 불릿이 표시가 되며 CSS의 list-style-type 속성을 이용해 변경할 수도 있습니다.
3. 정렬 목록 <ol>
<ol> 요소는 ordered list의 약자로 순서가 중요한 목록을 나타내는 태그입니다. 초기값은 순서가 숫자로 표시됩니다. 숫자로 나오는 값을 변경하려면 <ol type="속성값">을 이용하여 지정할 수 있습니다. 다음 표로 속성값을 입력해도 되지만, CSS로도 역시 변경 가능합니다.
| 속성 | 설명 |
| 1 | 숫자(초기값) |
| a | 영문 소문자 |
| A | 영문 대문자 |
| i | 로마숫자 소문자 |
| I | 로마숫자 대문자 |
<ol> 태그 안에 start 속성을 지정하면 숫자의 중간부터 시작할 수도 있습니다.
4. 정의 목록 태그 <dl>, <dt>, <dd>, <dfn>
<dl> 태그는 description list의 약자로, 사전 구성과 같이 특정 용어와 그 정의를 표현할 때 사용합니다. 단어를 먼저 정의하고 그 정의에 대한 설명을 합니다. <dl>의 직계 자식 요소로 <dt>, <dd>, <div>만 올 수 있습니다.
<dt>
description term의 약자로, 보통 정의가 필요한 단어 혹은 용어가 옵니다.
<dd>
description details/data의 약자로, 앞에 나온 <dt> 요소에 대한 정의나 설명을 작성합니다.
하나의 dt 안에 여러 dd를 작성할 수 있습니다. 하지만 dt보다 dd가 먼저 작성되면 오류가 날 수 있으므로 dt를 먼저 작성하는 것을 권장합니다.
<dfn>
현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다.
<dfn>은 <dl>의 직계 자식 요소가 될 수 없기 때문에 <dt> 태그 안에 작성했습니다. 또한 브라우저에서 자동으로 기울임꼴로 표시되는 것이 기본값입니다.
5. 목록 스타일 속성
목록 스타일은 목록 태그에 스타일을 지정하는 방법으로 <ul>, <ol> 태그에 적용하여 사용할 수 있습니다.
1) list-style-type: 리스트 불릿과 번호 스타일 바꾸기
순서가 없는 항목은 불릿이 표현됩니다. 이 스타일을 바꾸는 법은 다음과 같습니다.
선택자{list-style-type: none;} /* 불릿을 표시하지 않음 */
선택자{list-style-type: disc;} /* 채운 원(●)으로 표시, none과 disc 말고도 다른 속성값 적용 가능 */
| 속성 | 설명 |
| disc | 채운 원 (●) |
| circle | 빈 원 (○) |
| square | 채운 사각형 (■) |
| none | 없애기 |
만약 none을 사용한다면, 불릿이 있던 자리가 그대로 공간이 남게 됩니다. 즉, 불릿이 있던 자리에 패딩이 존재하게 됩니다. 이 패딩 값을 없애고 싶다면 padding:0;을 입력하여 패딩 값을 제거해야 합니다.
순서가 있는 항목은 숫자가 기본으로 표시됩니다. 이 스타일을 바꾸는 법은 다음과 같습니다.
선택자{list-style-type: decimal;} /* 1로 시작하는 십진수 */
선택자{list-style-type: lower-roman;} /* 소문자 로마 숫자 */
선택자{list-style-type: lower-alpha;} /* 소문자 알파벳 */
/* 아래 표의 속성을 이용해 다른 속성 값도 적용 가능합니다. */
| 속성 | 설명 | 예시 |
| decimal | 1로 시작하는 십진수 | 1, 2, 3... |
| decimal-leading-zero | 앞에 0이 붙는 십진수 | 01, 02, 03... |
| lower-roman | 로마 숫자 소문자 | i, ii, iii, iv... |
| upper-roman | 로마 숫자 대문자 | I, II, III, IV... |
| lower-alpha 또는 lower-latin | 알파벳 소문자 | a, b, c, d... |
| upper-alpha 또는 upper-latin | 알파벳 대문자 | A, B, C, D... |
2) list-style-position: 리스트 불릿과 번호 들여쓰기 하기
보통 웹 페이지 작업을 위해 모든 선택자(*)를 지정하여 마진과 패딩을 0으로 초기화 시키는 작업을 하는데, 초기화 스타일 값으로 불릿이나 숫자가 보이지 않을 수도 있습니다. 이런 경우 들여쓰기 스타일을 활용하면 유용합니다.
| 속성 | 설명 |
| inside | 불릿이나 숫자를 안쪽으로 들여쓰기 합니다. |
| outside | 기본값으로, 불릿이나 숫자를 밖으로 내어쓰기 합니다. |
이 두 가지 속성을 list-style 속성으로 한번에 표시할 수 있습니다.
'HTML, CSS' 카테고리의 다른 글
| [CSS] 다양한 선택자의 종류 (0) | 2024.02.08 |
|---|---|
| [CSS] @charset "utf-8"; (1) | 2024.02.07 |
| [CSS] overflow: 부모 박스의 범위를 벗어날 때 (0) | 2024.02.05 |
| [CSS] background: 배경 이미지와 주요 속성, 배경 대체텍스트 IR 기법 (1) | 2024.02.04 |
| [CSS] display: block / inline / inline-block / none (1) | 2024.02.03 |
