목록을 만드는 태그

목록을 만드는 태그

1. 목록을 만드는 태그 

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

  • 각 항목 앞에 불릿이 붙여짐
  • CSS의 list-style-type 속성으로 불릿 수정
    <body>
        <h1>관광 안내 전화</h1>
        <ul>
            <li>일반 전화:(국번없이)1330</li>
            <li>휴대 전화:010-1111-2222</li>
        </ul>
    </body>​

 

💡 여러 항목이 나열될 때 </li> 태그를 생략해도 다음에 오는 <li> 태그를 만나면 자동으로 그 전에 </li>태그가 있는 것처럼 인식함

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

  • 각 항목 앞에 숫자가 붙여짐
  • <ol> 태그의 속성
    • type 속성 : 불릿 앞의 숫자 조정
    • start 속성 : 중간 번호부터 수정
    • reserved 속성 : 역순으로 표시
<body>
    <h1>1박 2일 가족 여행 코스</h1>
    <ul>
        <li>1일차</li>
        <!-- <ol></ol>들여쓰기 -->
        <!-- <ol></ol>+li:순서 있는 목록: 기본은 숫자 1,2 -->
        <!-- type 속성으로 순서 타입을 정함 -->
        <ol type="a">
            <li>해녀박물관</li>
            <li>낚시체험</li>
        </ol>    
        <li>2일차</li>
        <!-- start 속성으로 시작 순서를 정함 -->
        <!-- <ol type="a" start = "3"> -->
        <!-- type="I" 로마숫자 대문자 -->
        <!-- <ol type="I"> -->
        <!-- type="i" 로마숫자 소문자 -->
        <ol type="i">
            <li>용눈이오름</li>
            <li>만장굴</li>
            <li>카약체험</li>
        </ol>
    </ul>
</body>

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

  • ‘제목’과 그에 대한 ‘설명’으로 이루어진 목록
  • <dl>과 <dt>, <dd> 태그 사용
  • 하나의 <dt>에 여러 개의 <dd> 값을 가질 수 있다
<body>
    <!-- dl 목록으로 dt가 제목 역할, dd는 항목은 들여쓰기 -->
    <dl>
    <dt>올레 1코스</dt>
    <dd>코스: 시흥 초등학교 옆 - 광치기 해변</dd>
    <dd>거리: 14.6km(4~5시간)</dd>
    
    <dt>올레 2코스</dt>
    <dd>코스: 시흥 초등학교 옆 - 광치기 해변</dd>
    <dd>거리: 14.6km(4~5시간)</dd>
    </dl>
</body>

목차로 돌아가기

 

'HTML CSS > HTML' 카테고리의 다른 글

이미지와 하이퍼링크  (1) 2024.04.08
표를 만드는 태그  (0) 2024.04.08
텍스트를 표시하는 태그  (0) 2024.04.08
HTML 기본 문서 구조  (0) 2024.04.08
웹 브라우저와 웹 편집  (0) 2024.04.08