[HTML] HTML 나열 태그 #3

시작하며...

이번엔 HTML 태그 중에서 나열과 관련된 태그에 대해 알아볼 것이다.

 

HTML 목록 태그

li 목록 태그

<li> 태그는 목록들의 요소를 표현한다.

list 의 약자로 <ul> 또는 <ol> 태그 안에 위치해야 한다.

<li> - HTML: Hypertext Markup Language | MDN

 

ul 비정렬 목록 태그

<ul> 태그는 unordered list 의 약자로 순서가 필요 없는 요소들을 나열할 때 사용된다.

    <h2>ul, li 태그</h2>
    <ul>
      <li>사과</li>
      <li>오렌지</li>
      <li>
        포도
        <ul>
          <li>샤인머스캣</li>
          <li>거봉</li>
          <li>청포도</li>
        </ul>
      </li>
    </ul>

요소 안에 하위 목록을 만들고 싶으면 <ul> 또는 <ol> 태그를 추가하고, <li> 태그를 사용하면 된다.

그리고 해당 태그를 사용하면 자동으로 목록이 생기고, 스타일은 나중에 CSS를 사용하여 바꿀 수 있다.

 

결과

<ul> - HTML: Hypertext Markup Language | MDN

 

ol 정렬 목록 태그

<ol> 태그는 ordered list 의 약자로 순서가 필요한 요소들을 나열할 때 사용된다.

    <h2>ol, li 태그</h2>
    <ol>
      <li>초등학교</li>
      <li>중학교</li>
      <li>
        고등학교
        <ol>
          <li>1학년</li>
          <li>2학년</li>
          <li>3학년</li>
        </ol>
      </li>
      <li>
        대학교
        <ul>
          <li>2/3년제</li>
          <li>4년제</li>
          <li>기타</li>
        </ul>
      </li>
    </ol>

<ol> 태그를 사용하면 자동으로 순서가 매겨진다. 이 또한 추후에 CSS로 수정할 수 있다.

결과

ol 태그 속성

<ol> 태그에는 속성 값으로 start 와 type 값을 사용할 수 있다.

start
목록이 시작하는 번호 설정

type
목록 카운터 타입

start 값에 숫자 4를 넣으면 목록이 1이 아닌 4부터 시작하게 되며,

type 값에 아래 값들을 넣으면 해당 값에 따른 목록 타입을 보여준다.

ol 태그 속성

    <h2>ol 태그 속성</h2>
    <ol type="A" start="4">
      <li>목록</li>
      <li>시작</li>
      <li>번호</li>
    </ol>

대문자 알파벳으로 4번째부터 보여주게 되므로 아래 결과처럼 보이게 된다.

결과

이에 대한 자세한 설명은 아래 링크에서 확인할 수 있다.

<ol> - HTML: Hypertext Markup Language | MDN

 

HTML 용어/정의 나열 태그

dl, dt, dd 태그

<dl> 태그는 용어와 정의를 목록을 표현하는 태그이다.

 

해당 태그에는 <dt> 태그와 <dd> 태그가 들어가는데

<dt> 태그는 용어를 작성할 때 사용하며,

<dd> 태그는 용어에 대한 정의를 작성할 때 사용되는 태그이다.

    <dl>
      <dt>프로그래밍</dt>
      <dd>컴퓨터 프로그램을 작성하는 일</dd>

      <dt>넓이</dt>
      <dt>면적</dt>
      <dd>일정한 평면에 걸쳐 있는 공간이나 범위의 크기</dd>

      <dt>사과</dt>
      <dd>사과나무의 열매</dd>
      <dd>자기의 잘못을 인정하고 용서를 빎</dd>
    </dl>

결과

이에 대한 자세한 내용은 아래 링크에서 확인할 수 있다.

<dl> - HTML: Hypertext Markup Language | MDN

<dt> - HTML: Hypertext Markup Language | MDN

<dd> - HTML: Hypertext Markup Language | MDN

 

---

 

마무리 하며...

해당 게시물에서 나열과 관련된 태그에 대해 알아보았다.

실제로 ul, ol, li 태그가 많이 사용되는데 나는 이를 딱히 사용하지 않았고

사용하더라도 어떤 게 정렬이고, 비정렬인지 헷갈려서 구글링을 했던 경험이 있었다.

해당 태그에 대한 약자를 알게 되고 직접 사용하게 되어 어떤 게 어떤 건지 잘 알게 되었다.

 

(해당 게시물은 아래 영상을 참고하여 작성한 글입니다.)