[HTML+CSS] [텍스트 관련 태그] 03 - 목록을 만드는 태그

[HTML+CSS] [텍스트 관련 태그] 02 - 인라인 레벨 태그

[HTML+CSS] [텍스트 관련 태그] 01 - 블록 레벨 태그 [HTML+CSS] [HTML 기본 다지기] 05 - 엔티티 기호 사용하기 [HTML+CSS] [HTML 기본 다지기] 04 - HTML 문서의 기본구조 [HTML+CSS] [HTML 기본 다지기] 03 - T..

onelight-stay.tistory.com

텍스트에서 사용되는 기본적인 태그들에 대해서 배웠다면

이번에는 목록 리스트를 만들어보는 시간을 가져보도록 하자.

<ul>, <li> - 순서 없는 목록

순서를 필요로 하지 않는 목록(unordered list)을 만들 때에는 <ul> 태그를 사용해 주며

태그 안에 <li>인 리스트 아이템들을 넣어서 각 항목을 표시해 주면 된다.

<ol>, <li> - 순서 있는 목록

순서가 필요한 목록(ordered list)을 만들 때에는 <ol> 태그를 사용해 주며

태그 안에 <li>인 리스트 아이템들을 넣어서 각 항목을 표시해 주면 된다.

이때, <ol>은 <ul>과는 달리 몇 가지 속성을 설정해 줄 수 있다.

- type 속성 -

<ol> 태그는 순서가 필요한 목록이기 때문에 항목 앞에 번호가 붙게 되는데

이때 숫자의 종류를 다양하게 조절할 수 있다.

- start 속성 -

순서 목록이 기본적으로 1부터 시작되는데

해당 속성을 이용하면 시작하고 싶은 번호부터 시작할 수 있다.

- reversed 속성 -

항목을 역순으로 표시한다.

<dl>, <dt>, <dd> - 설명 목록

‘제목＇과 ‘설명＇이 한 쌍으로 구성되어 있는 설명 목록을 만드는 데 사용되며,

<dl>은 목록을 만들고

<dt>는 제목을

<dd>는 설명을 만들어 준다.

이때, 하나의 <dt>태그에 여러 개의 <dd>를 가질 수 있으며,

여러 개의 <dt>를 가질 수 도 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>목록을 만드는 태그</title>
</head>
<body>
    <h1>관광 안내 전화</h1>
    <p>한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행<br>
    편의를 위해 관광안내전화 1330 서비스를 연중무휴 실시하고 있습<br>
    니다.</p>
    <p>1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할<br>
    수 있을 정도의 다양한 정보가 있습니다. 원하는 관광지는 물론이<br>
    며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를 비롯한 영어,<br>
    중국어, 일어의 3개 국어로도 이용 가능합니다.</p>
    <ul>
        <li>일반 전화 : (국번없이) 1330</li>
        <li>휴대 전화 : 064-1330</li>
    </ul>
    <br>
    <hr>
    <h1>1박 2일 가족 여행 코스</h1>
    <ul>
        <li>1일차
            <ol type="a">
                <li>해녀박물관</li>
                <li>낚시체험</li>
            </ol>
        </li>
        <li>2일차
            <ol type="a" start="3">
                <li>용눈이오름</li>
                <li>만장굴</li>
                <li>카약체험</li>
            </ol>
        </li>
    </ul>
    <br>
    <hr>
    <h1>제주 올레</h1>
    <dl>
        <dt>올레 1코스</dt>
        <dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd>
        <dd>거리 : 14.6km(4-5시간)</dd>
        <dd>난이도 : 중</dd>
        <dt>올레 2코스</dt>
        <dd>코스 : 광치기 해변 - 온평 포구</dd>
        <dd>거리 : 14.5km(4-5시간)</dd>
        <dd>난이도 : 중</dd>
    </dl>
    <br>
</body>
</html>

리스트 개개인의 특성은 이해하기 쉽지만

리스트들을 섞어서 사용할 때

머리가 살짝 복잡하지만 결과물이 좋아서 아주 만족한다.

연습 좀 더하자.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] [텍스트 관련 태그] 05 - 연습문제 (0)	2020.06.11
[HTML+CSS] [텍스트 관련 태그] 04 - 표를 만드는 태그 (0)	2020.06.10
[HTML+CSS] [텍스트 관련 태그] 02 - 인라인 레벨 태그 (0)	2020.06.08
[HTML+CSS] [텍스트 관련 태그] 01 - 블록 레벨 태그 (0)	2020.06.07
[HTML+CSS] [HTML 기본 다지기] 05 - 엔티티 기호 사용하기 (0)	2020.06.06

IT Information Notebook

[HTML+CSS] [텍스트 관련 태그] 03 - 목록을 만드는 태그

<ul>, <li> - 순서 없는 목록

<ol>, <li> - 순서 있는 목록

<dl>, <dt>, <dd> - 설명 목록

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML+CSS] [텍스트 관련 태그] 03 - 목록을 만드는 태그

<ul>, <li> - 순서 없는 목록

<ol>, <li> - 순서 있는 목록

<dl>, <dt>, <dd> - 설명 목록

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바