CSS · HTML
HTML 목록
혜원21
2019. 10. 15. 04:23
*
목록을 정의하는 태그 <ul><ol><li>
이거 블로그 카테고리 편집할 때 많이 봤다. 익숙하네요. 태그 이름만...=-=;
<ul> : 순서가 필요 없는 목록으로 목록 앞에 마크가 있다.
<ol> : 순서가 있는 목록으로 목록 앞에 숫자, 영어 등이 있다.
<li> : ul, ol에 들어가는 목록들이다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="border: 1px solid gray; padding: 10px;">
<h2>순서가 없는 목록</h2>
<ul style="list-style-type: disc;">
<li>김치</li>
<li>밥</li>
<li>물</li>
</ul>
<ul style="list-style-type: circle;">
<li>김치</li>
<li>밥</li>
<li>물</li>
</ul>
<ul style="list-style-type: square;">
<li>김치</li>
<li>밥</li>
<li>물</li>
</ul>
<ul style="list-style-type: none;">
<li>김치</li>
<li>밥</li>
<li>물</li>
</ul>
<h2>순서가 있는 목록</h2>
<ol type="1">
<li>챕터 : 로그인</li>
<li>챕터 : 케릭터 생성</li>
<li>챕터 : 조작 방법</li>
</ol>
<ol type="A">
<li>챕터 : 로그인</li>
<li>챕터 : 케릭터 생성</li>
<li>챕터 : 조작 방법</li>
</ol>
<ol type="a">
<li>챕터 : 로그인</li>
<li>챕터 : 케릭터 생성</li>
<li>챕터 : 조작 방법</li>
</ol>
<ol type="I">
<li>챕터 : 로그인</li>
<li>챕터 : 케릭터 생성</li>
<li>챕터 : 조작 방법</li>
</ol>
<ol type="i">
<li>챕터 : 로그인</li>
<li>챕터 : 케릭터 생성</li>
<li>챕터 : 조작 방법</li>
</ol>
</div>
</body>
</html>순서가 없는 목록
- 김치
- 밥
- 물
- 김치
- 밥
- 물
- 김치
- 밥
- 물
- 김치
- 밥
- 물
순서가 있는 목록
- 챕터 : 로그인
- 챕터 : 케릭터 생성
- 챕터 : 조작 방법
- 챕터 : 로그인
- 챕터 : 케릭터 생성
- 챕터 : 조작 방법
- 챕터 : 로그인
- 챕터 : 케릭터 생성
- 챕터 : 조작 방법
- 챕터 : 로그인
- 챕터 : 케릭터 생성
- 챕터 : 조작 방법
- 챕터 : 로그인
- 챕터 : 케릭터 생성
- 챕터 : 조작 방법
목록 앞에 마크는 스타일 태그로 지정한다.
style="list-style-type: disc;" - 동그라미
style="list-style-type: circle;" - 빈 동그라미
style="list-style-type: square;" - 네모
style="list-style-type: none;" - 없음
목록 앞에 영어, 숫자 등은 type 태그로 지정한다.
type="1"
type="A"
type="a"
type="I"
type="i"
* 목록 태그는 중첩 사용이 가능하다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="border: 1px solid gray; padding: 10px;">
<h2>목록 중첩 사용 가능</h2>
<p>우리집 맛 집 메뉴</p>
<ul>
<li>밥</li>
<li>김치
<ul>
<li>익은 김치</li>
<li>덜 익은 김치</li>
<li>맛 없는 김치</li>
</ul>
</li>
<li>국물
<ul>
<li>아주 짠 국</li>
<li>아주 싱거운 찌개</li>
<li>정수기</li>
</ul>
</li>
</ul>
</div>
</body>
</html>목록 중첩 사용 가능
우리집 맛 집 메뉴
- 밥
- 김치
- 익은 김치
- 덜 익은 김치
- 맛 없는 김치
- 국물
- 아주 짠 국
- 아주 싱거운 찌개
- 정수기
좋아. 이해 완료!!!