프론트엔드/HTML

목록태그

alswlfl 2022. 11. 18. 10:42

목록 태그

  • <ol> Ordered List
    • 순서가 있는 목록을 표현할 때 사용
  • <ul> Unordered List
    • 순서가 없는 목록을 표현할 때 사용
  • <li> Listed Item
    • 목록 하위 항목으로 사용, <ul> 또는 <ol> 하위에 위치
  • <dl> Definition List
    • 사전처럼 용어를 설명하는 목록 ex) A는 B이다.
  • <dt> Definition Term
    • 정의되는 용어의 제목을 넣을 때 사용
  • <dd> Definition Description
    • 용어를 설명하는데 사용
❗ <dl>은 하나 이상의 <dt>-<dd> 쌍의 태그를 가져야 한다.
- <dt>-<dd>가 반드시 하나의 짝으로 지어져야하는 것은 아니다.
- <dt>가 2개이고 <dd>가 하나일 수 있음<li>, <dt>-<dd>는 밖에서 독립적으로 사용할 수 없다.
- <ul> 하위요소로는 <li>가 위치해야 한다.

✨ 멀티 셀렉트 단축키

  • 윈도우: ctrl+alt
  • 맥: command+option
<!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" />
    <title>List Tag</title>
  </head>
  <body>
    <h1>김치볶음밥</h1>
    <ol>
      <li>프라이팬을 살짝 달군뒤 식용유(혹은 버터)를 두른다.[3]</li>
      <li>프라이팬의 온도가 적당히 올라가면 계란을 깨서 넣는다.</li>
      <li>타지 않도록 최대한 주의한다.</li>
      <li>취향에 맞추어 뒤집으면서[4] 굽는다.</li>
      <li>취향에 따라 소금 등의 조미료[5]나 향신료[6]를 넣는다.</li>
      <li>익었으면 꺼내서 접시에 담는다.</li>
    </ol>
    <hr />
    <h1>헬스 3대 운동</h1>
    <ul>
      <li>벤치프레스</li>
      <li>데드리프트</li>
      <li>스쿼트</li>
    </ul>
    <hr />
    <h1>웹 개발 입문 과목</h1>
    <dl>
      <dt>HTML</dt>
      <dt>Markup 언어</dt>
      <dd>
        Hyper Text markup Language의 <br />약자로 웹 문서를 만들기 위한
        <strong>마크업 언어</strong>이다.
      </dd>
      <dt>CSS</dt>
      <dt>스타일 시트 언어</dt>
      <dd>
        Cascading Style Sheets의<br />약자로 HTML을 꾸미는 스타일 시트이다.
      </dd>
      <dt>JavaScript</dt>
      <dt>프로그래밍 언어</dt>
      <dd>
        웹 페이지를 생동감 있게 동작시키기 위한<br /><b>프로그래밍 언어</b>이다.
      </dd>
    </dl>
  </body>
</html>