목록 만들기

1. 순서 있는 목록을 만드는 ol과 li 태그

어떤 과정을 순서대로 설명할 때 <ol>과 <li> 태그를 사용해서 만든다.

<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>

ol과 li 태그

+ ol 태그의 type 속성

type 속성을 사용해서 영문자나 로마 숫자로 순서를 나타낼 수 있다.

(type = "a", type = "A", type = "i", type = "I")

<h2>레드향 샐러드 레시피</h2>
    <p><b>재료 : </b> 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
    <p><b>드레싱 : </b> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
    <ol type="a">
        <li>샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비합니다.</li>
        <li>레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어둡니다.</li>
        <li>드레싱 재료를 믹서에 한꺼번에 넣고 갈아줍니다.</li>
        <li>볼에 샐러드 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
    </ol>

ol 태그의 type 속성

 

 

2. 순서 없는 목록을 만드는 ul과 li 태그

항목의 순서가 중요하지 않을 때 ul 태그로 사용한다.

항목 앞에 작은 원이 붙는다.

<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>

ul과 li 태그

 

 

3. 설명 목록을 만드는 dl, dt, dd 태그

dt 태그는 이름 부분을 지정하고

dd 태그는 값 부분을 지정한다.

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>

dl, dt, dd 태그

 

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.