WEB-HTML-HTML 목록 만들기

카테고리 : WEB >> Html


HTML에 목록 생성하기

목록 만들기

순서 있는 목록 <ol>, <li> 태그

각 항목을 순서대로 나열한 것 목록을 표시할 내용 앞뒤에 <ol>, </ol> 태그를 삽입하고, 그 사이에 <li>, </li> 태그를 삽입한다.

  • 기본형
<ol>
  <li>항목</li>
  <li>항목</li>
</ol>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="YooJin Lee">
  <title>제목 태그</title>
</head>
<body>
  <ol>
    <li>1번</li>
    <li>2번</li>
    <li>3번</li>
  </ol>
</body>
</html>
  • 출력 결과

<ol> 태그의 기본 시작은 “1” 부터 시작하지만, start 속성을 이용하여 여러 타입으로 바꿀 수 있다.

  • <ol> 태그의 속성값
종류설명
type = “1”숫자(기본)
type = “a”영문 소문자
type = “A”영문 대문자
type = “i”로마 숫자 소문자
type = “I”로마 숫자 대문자
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="YooJin Lee">
  <title>제목 태그</title>
</head>
<body>
  <ol type="a" start="3">   //속성 값 부여 영문 소문자 3 번째 c 부터 시작
    <li>1번</li>
    <li>2번</li>
    <li>3번</li>
  </ol>
</body>
</html>
  • 출력 결과

순서 없는 목록 <ul>, <li> 태그

항목의 순서가 중요하지 않을때 사용 <ul>, </ul> 태그를 목록 앞뒤에 붙이고 그 사이에 <li>, </li> 태그를 삽입한다.

  • 기본형
<ul>
  <li>항목</li>
  <li>항목</li>
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="YooJin Lee">
  <title>제목 태그</title>
</head>
<body>
  <ul>    //<ul> 태그로 바꿔주었다.
    <li>1번</li>
    <li>2번</li>
    <li>3번</li>
  </ul>
</body>
</html>
  • 출력 결과

설명 목록 <dl>, <dt>, <dd> 태그

이름과 값 형태로 된 목록

  • <dt> 태그 : 이름 지정하는 태그

  • <dd> 태그 : 태그와 값(설명) 지정하는 태그 <dl> 태그 사이에 한 쌍의 <dt>태그와 <dd> 태그를 넣는다.

  • 기본형
<dl>
  <dt>이름</dt>
  <dd>값</dd>
</dl>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="YooJin Lee">
  <title>제목 태그</title>
</head>
<body>
  <dl>
    <dt>3만원</dt>    // 이름
    <dd>소 + 중</dd>  // 값
    <dd>대</dd>      // 값
  </dl>
  <dl>
    <dt>5만원</dt>
    <dd>중 + 중</dd>
    <dd>소 + 대</dd>
  </dl>
</body>
</html>
  • 출력 결과

출처

  • (고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.

© 2021. All rights reserved.

Powered by __YJ__