[HTML] 4-2. 목록 만들기
4-2. 목록 만들기
순서 있는 목록을 만드는 < ol >, < li > 태그
< ol >은 ordered list , < li >는 _list_의 줄임말입니다.
순서있는 목록을 만들 때는 표시할 내용 앞 뒤에 각각 < ol >과 </ ol > 을 두고, 그 사이에 < li >와 </ li > 를 삽입합니다.
<ol>
<li>항목 1</li>
<li>항목 2</li>
</ol>
👍 예시
<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>
레드향 샐러드 레시피
재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g
드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간
- 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
- 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
- 드레싱 재료를 믹서에 갈아줍니다.
- 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!
-
< ol > 태그의 type, start 속성
< ol > 태그에서는 type과 start 속성을 이용하여 순서의 종류, 시작 순서를 지정할 수 있습니다.
-
< ol > 태그의 속성
종류 설명 type = “1” 숫자(기본값) type = “a” 영문 소문자 type = “A” 영문 대문자 type = “i” 로마 숫자 소문자 type = “I” 로마 숫자 대문자
-
순서 없는 목록을 만드는 < ul >, < li > 태그
순서 없는 목록을 만들때는 < ul >과 < li > 태그를 함께 사용하면 됩니다.
👍 예시
<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>
레드향 샐러드 레시피
재료 : 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g
드레싱 : 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간
- 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
- 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
- 드레싱 재료를 믹서에 갈아줍니다.
- 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!
설명 목록을 만드는 < dl >, < dt >, < dd > 태그
설명 목록이란 이름과 값 형태로 된 목록을 말합니다. 마치 사전에서 단어명과 설명이 있는 모습과 유사합니다.
- < dl >: description list. 설명 목록을 만드는 부분의 처음과 끝에 각각 < dl >과 < /dl >을 추가한다.
- < dt >: 이름을 나타내는 태그.
- < dd >: 값 (또는 설명)을 나타내는 태그.
👍 예시
<h2>상품 구성</h2>
<dl>
<dt>선물용 3kg</dt>
<dd>소과 13~16과</dd>
<dd>중과 10~12과</dd>
</dl>
<dl>
<dt>선물용 5kg</dt>
<dd>중과 15~19과</dd>
</dl>
상품 구성
- 선물용 3kg
- 소과 13~16과
- 중과 10~12과
- 선물용 5kg
- 중과 15~19과
정리
- < ol >은 순서있는 목록, < ul >은 순서 없는 목록, < dl >은 사전형 목록을 만듭니다.
- < ol > 태그에서 type과 start 속성을 지정하여 종류와 시작 인덱스를 지정할 수 있습니다.
- < ol >과 < ul >에서는 < li >로 목록 내용을 추가합니다.
- < dl >에서는 < dt > 태그로 이름을 나타내고 < dd > 태그로 값 (또는 설명)을 나타냅니다.
Leave a comment