Programming/HTML CSS
1. ol 사용
<ol>
 <li>목록1
 <li>목록2
</ol>
▶ ol 은 순서가 있는 목록을 만듭니다.
<ul>
 <li>목록1
 <li>목록2
</ul>
▶ ul 은 순서없는 목록을 만듭니다.

HTML5에서도 같은 용도로 사용되는 표준태그입니다. 목록은 ol 이나 ul 안에 또다른 ol 혹은 ul을 작성함으로써 중복으로 목록을 생성할 수도 있습니다.

2. ol 속성

(1) start

ol 에만 설정이 가능하며 정수로 값을 지정합니다. 이 속성은 li 목록의 시작번호를 지정합니다.

(2) value

ol 에서 사용된 li 에만 정수로 값을 지정하는 속성으로 현재 li 목록의 번호를 임의로 지정합니다.

(3) type

ul 에서 사용시 disk, square, circle 값을 지정하면 목록 모양(●, ■, ○)을 지정할 수 있습니다.

3. ol, ul CSS
.ol-css {
 list-style-type:lower-roman;
 list-style-position:outside;
}
▶CSS 정의

4. ol, ul CSS 속성

(1) list-style-type

목록의 형태를 지정합니다. 이 속성에 지정할 수 있는 값으로는 다음과 같습니다.

 decimal  목록을 1부터 시작하도록 합니다.
 decimal-leading-zero  목록을 0부터 시작하도록 합니다.
 lower-roman  목록을 소문자 로마자로 표시합니다.
 upper-roman  목록을 대문자 로마자로 표시합니다.
 lower-alpha  목록을 소문자 영문자로 표시합니다.
 upper-alpha  목록을 대문자 영문자로 표시합니다.
 lower-greek  목록을 소문자 그리스문자로 표시합니다.
▶ 순서 있는 목록의 경우 값

 none  목록에 대한 모양을 만들지 않습니다.
 disc  목록을 점으로 표시합니다.
 circle  목록을 원으로 표시합니다.
 square  목록을 사각형으로 표시합니다.
▶ 순서 없는 목록의 경우 값

(2) list-style-image

목록 리스트에 표시할 모양을 이미지로 지정할 수 있습니다. none와 url값을 줄 수 있으며 url의 경우 url('../image/abc.png') 와 같은 형태로 이미지에 대한 해당 경로를 지정합니다.

(3) list-style-position

이 속성에 inside값을 지정하면 들여쓰기를 적용하며 outside를 지정하면 리스트가 목록 제목의 첫글자 위치에서 보이도록 합니다.
, , , ,
0 0