목록
목록(List)은 어떤 항목을 나열할 때만 사용하는게 아니라
특히 CSS와 함께 내비게이션을 만들거나 콘텐츠를 배치하는 등
다양한 용도로 사용한다.
종류
<ul>태그: 순서 없는 목록<ol>태그: 순서 있는 목록<li>태그: 목록의 각 항목에 사용되는 태그
순서있는 목록(ordered list) : <ul>, <li>태그
-
순서 목록은 ```어떤 과정을 순서대로 설명할 때 사용한다.
-
기본문법
<ol>
<li>항목01</li>
<li>항목02</li>
<li>항목03</li>
</ol> - 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>순서있는 목록</title>
</head>
<body>
<h3 style="color: red;">치즈라면 레시피</h1>
<ol>
<li>냄비에 물 550ml를 넣고 끓인다.</li>
<li>물이 끓으면 원하는 라면의 후레이크, 분말스프를 넣는다.</li>
<li>치즈를 한장 넣어준다.</li>
</ol>
</body>
</html>
<ol>태그의 type, start속성
type속성을 사용하면 영문자, 로마 숫자등으로 순서를 나타낼 수 있다.
strat속성을 사용하면 시작 번호를 원하는 번호로 변경할 수 있다.- type = "a" start = "3" : 알파벳 소문자 c부터 시작
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>type,start속성 사용</title>
</head>
<body>
<h2>레드향 샐러드 레시피</h3>
<p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드용 채소</p>
<p><b>드래싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<p><b>재료 준비</b></p>
<ol type="a">
<li>샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비한다.</li>
<li>레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어 준다.</li>
</ol>
<p><b>드레싱 준비</b></p>
<ol type="a" start="3">
<li>드래싱 재료를 믹서에 한꺼번에 넣고 갈아 준다.</li>
</ol>
<p><b>샐러드 완성</b></p>
<ol type ="a" start="4">
<li>볼에 샐러으 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
</body>
</html>
순서없는 목록(unordered list) : <ul>, <li>태그
-
순서 없는 목록은 순서가 중요하지 않을 경우에 사용한다.
-
기본문법
<ul>
<li>항목01</li>
<li>항목02</li>
<li>항목03</li>
</ul> - 사용예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>순서있는 목록</title>
</head>
<body>
<h3 style="color: red;">치즈라면 레시피</h1>
<ul>
<li>냄비에 물 550ml를 넣고 끓인다.</li>
<li>물이 끓으면 원하는 라면의 후레이크, 분말스프를 넣는다.</li>
<li>치즈를 한장 넣어준다.</li>
</ul>
</body>
</html>
설명 목록(description list) : <dl>, <dt>, <dd>태그
-
이름(name)과값(value)형태로 된 목록을 뜻한다.- 사전에서 단어와 설명이 있는 모습...
-
<dt>태그 : 이름(단어명) -
<dd>태그 : 값(설명) -
<dl> ~ </dl>태그 사이에 한 쌍의<dt>와 <dd>태그를 넣는다. -
기본문법
<dl>
<dt>이름</dt>
<dd>값</dd>
</dl> - 사용예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>설명 목록</title>
</head>
<body>
<h2>상품 구성</h2>
<dl>
<dt>선물용 3kg</dt>
<dd>소과 : 10~15과</dd>
</dl>
<dl>
<dt>선물용 5kg</dt>
<dd>중과 : 16~21과</dd>
</dl>
</body>
</html>
참고
- Do it! HTML+CSS+자바스크립트 웹 표준의 정석
- HTML/CSS 입문
