[생활코딩] 13강. 목록 만들기 <ul>, <ol>, <li>

연관된 항목을 나열할 때 쓰는 것.

마치,

 

• 안녕.
• Hello.
• 你好。

 

이런 것이나

 

1. 안녕.
2. Hello.
3. 你好。

이런 것처럼ㅎ..

(모르는 건 아니지만^^)

 

여기서 순서가 없는 항목을 나열할 땐 <ul> tag를,

순서가 있는 항목을 나열할 땐 <ol> tag를 쓴다.

(ul = unordered list, ol = ordered list)

 

<ul>

    <li>항목</li>

</ul>

 

 

 

<ol>

    <li>항목</li>

</ol>

 

 

 

 

 

CSS와 함께 사용해서 메뉴로도 사용될 수 있다.

마치, 

빨간 네모 부분과 같은 메뉴를 만들 수도 있다는 것이다.

 

 

 

예제 코드 따라 쳐보기!

예제1. <ul>과 <li>

 

 

 

예제2. <ol>과 <li>

여기서 tip!

숫자의 형태를 바꿀 수가 있다!

CSS칸에다 list-style-type이라는 속성을 쓰고 Tab을 누르면 속성값을 적을 수 있게 나오는데, 여기서 속성값을 decimal-leading-zero라고 써주면 숫자 형태가 01, 02, 03 형태로 나온다.

 

 

이번엔 속성값을 arabic-indic으로 썼다.

 

 

속성값 disc

 

 

속성값 circle

 

 

속성값 square

 

 

속성값 decimal. 아하! 이게 default로구나!

 

 

속성값 lower-roman. 반대로 upper-roman을 쓰면 로마숫자의 대문자 형태로 list가 나열된다.

 

 

속성값 lower-alpha. 같은 결과가 나오는 속성값으로 lower-latin이 있다. upper-alpha나 upper-latin을 쓰면 영어 대문자로 list가 나열된다.

 

 

속성값 lower-greek

 

 

속성값 lower-armenian

 

속성값 none으로 번호를 매기지 않을 수도 있다.

 

번호 스타일을 표로 정리해보자면

list-style-type	표현 형태
decimal	1., 2., 3., 4., 5., ...
decimal-leading-zero	01., 02., 03., 04., 05., ...
disc	●, ●, ●, ●, ●, ...
circle	○, ○, ○, ○, ○, ...
square	■, ■, ■, ■, ■, ...
lower-roman	i., ii., iii., iv., v., ...
upper-roman	I., II., III., IV., V., ...
lower-armenian	ա., բ., գ., դ., ե., ...
upper-armenian	Ա., Բ., Գ., Դ., Ե., ...
arabic-indic	١.,٢.,٣.,٤.,٥
lower-greek	α., β., γ., δ., ε., ...
lower-alpha / lower-latin	a., b., c., d., e., ...
upper-alpha / upper-latin	A., B., C., D., E., ...
none	없음.

 

 

예제3. 목록과 목록의 중첩

헐.. 하위 단위에 목록 만들 땐 이렇게 하는구나....'ㅅ'