IT 성장일기

[HTML] HTML 문서에 체계적인 자료 구성하기 - 리스트 본문

Mark up/HTML

[HTML] HTML 문서에 체계적인 자료 구성하기 - 리스트

고 양 2023. 11. 2. 12:52
반응형
HTML 문서에 체계적인 자료 구성하기 - 리스트와 테이블

 

리스트 (List)

 

HTML에서는 예를 들거나 순서를 설명할 때 사용되는 리스트 요소를 제공합니다.
리스트 요소는 크게 세가지로 구분됩니다.

 

  • 순서가 있는 리스트(Ordered list)
  • 순서가 없는 리스트(Unordered list)
  • 내용을 정의하는 리스트(Definition list)

 

순서가 있는 리스트

 

  1. 리스트 세트 <ol> 태그와
  2. 리스트 요소 <li> 태그로 이루어집니다.

 

순서가 없는 리스트

 

  • 리스트 세트 <ul> 태그와
  • 리스트 요소 <li> 태그로 이루어집니다.


내용을 정의하는 리스트

  • 리스트 세트 <dl> 태그,
  • 용어를 정의하는 <dt> 태그,
  • 용어를 설명하는 <dd> 태그로 이루어집니다.

순서가 있는 리스트!

  1. Ordered list 샘플입니다.
  2. Ordered list 샘플입니다.
  3. Ordered list 샘플입니다.

순서가 없는 리스트!

  • Unordered list 샘플입니다.
  • Unordered list 샘플입니다.
  • Unordered list 샘플입니다.

내용을 정의하는 리스트!

Definition list
샘플입니다.
Definition list
샘플입니다.
<h3 style="text-align:center;">순서가 있는 리스트!</h3>
    <div>
        <ol>
            <li>Ordered list 샘플입니다.</li>
            <li>Ordered list 샘플입니다.</li>
            <li>Ordered list 샘플입니다.</li>
        </ol>
    </div>
<hr>
<h3 style="text-align:center;">순서가 없는 리스트!</h3>
    <div>
        <ul>
            <li>Unordered list 샘플입니다.</li>
            <li>Unordered list 샘플입니다.</li>
            <li>Unordered list 샘플입니다.</li>
        </ul>
    </div>
<hr>
<h3 style="text-align:center;">내용을 정의하는 리스트!</h3>
    <div>
        <dl>
            <dt>Definition list</dt>
            <dd> 샘플입니다.</dd>
            <dt>Definition list</dt>
            <dd> 샘플입니다.</dd>
        </dl>
    </div>

코드가 조금 길지만 그렇게 어렵지는 않아서 천천히 읽어주셨으면 좋겠습니다.😊
<ul> 태그는 때로 css를 덧씌워서 네비게이션 메뉴나 드롭다운 메뉴에서 사용되기도 합니다.

 

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂

 

 

* 참고 : http://www.tcpschool.com/

반응형
저작자표시 비영리 변경금지 (새창열림)

'Mark up > HTML' 카테고리의 다른 글

[HTML] HTML 요소에 공간 할당하기(Block, Inline, Inline-blcock)  (2) 2023.11.02
[HTML] HTML 문서에 표 만들기 - 테이블  (0) 2023.11.02
[HTML] HTML 문서에 링크와 이미지 삽입하기  (1) 2023.11.02
[HTML] HTML 요소에 스타일을 적용해보자  (0) 2023.10.27
[HTML] HTML 텍스트 요소를 정리해 보자 - Character Set 과 Entity 문자  (0) 2023.10.20
'Mark up/HTML' Related Articles more