HTML <body>: <ol>,<ul>,<dl>

김휘진·2023년 9월 20일
0

HTML/CSS

목록 보기
4/5

목록

  • 목록태그에는 ol, ul, dl태그가 있다.
  • 각 태그별로 용도가 다르다.
  • ol, ul태그 하위에 li태그를 사용한다.
    • li태그는 list의 약자

ol

  • ol : orderedlist
  • 말그대로 순서가 있는 리스트다.
  • 순서가 있는 목차에 적합하다.
  1. 순번1
  2. 두번째
  3. 삼번
  4. 넷째
  • 또한 숫자 뿐 아니라 영문이나 로마숫자로도 변경이 가능하다.

  • 코드

<ol type = "a">
  <li>ol타입을</li>
  <li>영문 소문자로</li>
  <li>했을 경우</li>
</ol>
  • 결과

    1. ol타입을
    2. 영문 소문자로
    3. 했을 경우
  • 코드

<ol type = "A">
  <li>ol타입을</li>
  <li>영문 대문자로</li>
  <li>했을 경우</li>
</ol>
  • 결과

    1. ol타입을
    2. 영문 대문자로
    3. 했을 경우
  • 코드

<ol type = "i">
  <li>ol타입을</li>
  <li>로마 숫자 소문자로</li>
  <li>했을 경우</li>
</ol>
  • 결과

    1. ol타입을
    2. 로마 숫자 소문자로
    3. 했을 경우
  • 코드

<ol type = "I">
  <li>ol타입을</li>
  <li>로마 숫자 대문자로</li>
  <li>했을 경우</li>
</ol>
  • 결과
    1. ol타입을
    2. 로마 숫자 대문자로
    3. 했을 경우
ol태그의 속성값
종류 설명
type:"1" 숫자(기본값)
type:"a" 영문 소문자
type:"A" 영문 대소문자
type:"i" 로마 숫자 소문자
type:"I" 로마 숫자 대문자

ul

  • ul : unorderedlist
  • ol과 마찬가지로 말 그대로 순서가 없는 리스트다.
  • 순서가 없는 메뉴에 적합하다.

  • 코드

<ul>
	<li>순서가 없는</li>
    <li>메뉴판 같은</li>
    <li>리스트에</li>
    <li>사용하기 적합</li>
</ul>
  • 결과
    • 순서가 없는
    • 메뉴판 같은
    • 리스트에
    • 사용하기 적합

dl

  • dl : descriptionlist
  • 설명 목록이란 뜻으로 사전과 같은 목록의 용어와 설명을 나타내는데 적합한 리스트
  • dt와 dd태그를 사용한다.
  • dt는 용어, dd는 용어의 설명이다.
  • dt태그 하나에 dd태그는 여러 개 사용할 수 있다.

  • 코드

<dl>
  <dt>html</dt>
  <dd>hyper Text Markup Language의 약자다</dd>
  <dd>프로그래밍 언어는 아니고,
  우리가 보는 웹페이지가 어떻게 구조화되어 있는지
  브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.</dd>
</dl>
  • 결과
    html hyper Text Markup Language의 약자다 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
profile
Don't give up, I can do (IT)

0개의 댓글