Keep going
목록 만들기 본문
웹 문서에서 목록은 단순히 어떤 항목을 나열할 뿐 아니라 특히 CSS와 함께 사용해서 내비게이션을 만들거나 콘텐츠를 배치하는 등 다양한 용도로 사용한다.
순서 있는 목록을 만드는 <ol>,<li> 태그
- 순서 있는 목록이란 말 그대로 각 항목을 순서대로 나열한 것입니다.
- 순서 목록은 어떤 과정을 순서대로 설명할 때 <ol>과 <li> 태그를 사용해 만든다.
- ol은 ordered list의 줄임말이고, li는 list의 줄임말이다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h2>레드향 샐러드 레시피</h2>
<p><b>재료:</b> 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱:</b> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ol>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
</body>
</html>
|
cs |
<ol> 태그의 type, start 속성
- 위의 순서 있는 목록은 기본적으로 숫자 1,2,3 을 붙인다.
- 이때 type 속성을 사용하면 영문자나 로마 숫자 등으로 순서를 나타낼 수 있다.
- 또한 순서 목록은 기본적으로 '1'부터 시작하지만 start 속성을 사용해서 시작 번호를 바꿀 수도 있다.
여러 개의 순서 있는 목록을 연결하여 번호를 붙여야 할 경우 start 속성을 사용하여 원하는 번호부터 시작하면 된다.
| 종류 | 설명 |
| type = "1" | 숫자(기본값) |
| type = "a" | 영문 소문자 |
| type = "A" | 영문 대문자 |
| type = "i" | 로마 숫자 소문자 |
| type = "I" | 로마 숫자 대문자 |
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h2>레드향 샐러드 레시피</h2>
<p><b>재료: </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱: </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<h4>재료 준비</h4>
<ol type="a">
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
</ol>
<h4>드레싱 준비</h4>
<ol type="a" start="3">
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
</ol>
<h4>샐러드 완성</h4>
<ol type="a" start="4">
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
</body>
</html>
|
cs |
순서 없는 목록을 만드는 <ul>, <li> 태그
- 순서 없는 목록은 항목의 순서가 중요하지 않을 때 사용한다.
- unordered list의 줄임말인 <ul></ul> 태그를 목록 앞뒤에 붙인 후 <li>와 </li> xormfmf 삽입한다.
- 순서 없는 목록은 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데 이런 작은 그림을 불릿이라고 한다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h2>레드향 샐러드 레시피</h2>
<p><b>재료: </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱: </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ul>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ul>
</body>
</html>
|
cs |
설명 목록을 만드는 <dl>, <dt>, <dd> 태그
- 설명 목록이란 이름과 값 형태로 목록을 말한다.
- 설명 목록은 이름 부분을 지정하는 <dt> 태그와 값 부분을 지정하는 <dd> 태그로 구성된다.
- <dl>과 <dl> 태그 사이에는 한 쌍의 <dt> 태그와 <dd> 태그를 넣는다. 이때, <dt> 태그 하나에 <dd> 태그를 여러 개 사용할 수도 있다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h2>상품 구성</h2>
<dl>
<dt>선물용 3kg</dt>
<dd>소과 13~16과</dd>
<dd>중과 10~12과</dd>
</dl>
<dl>
<dt>선물용 5kg</dt>
<dd>중과 15~19과</dd>
</dl>
</body>
</html>
|
cs |
출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]
'Web Project > HTML' 카테고리의 다른 글
| 오디오와 비디오 삽입하기 (0) | 2021.02.08 |
|---|---|
| 이미지 삽입하기 (0) | 2021.02.07 |
| 표 만들기 (0) | 2021.02.05 |
| 텍스트 입력하기 (0) | 2021.02.05 |
| 웹 문서 구조를 만드는 시맨틱 태그 (0) | 2021.01.15 |
