..

Search

<ul>

HTML <ul> 태그


정의 및 특징

<ul> 태그는 순서가 없는 HTML 리스트(list)를 정의할 때 사용합니다.

 

<ul> 요소에 속하는 각 아이템은 <li> 요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 사각형 모양으로 표현됩니다.

 

HTML5에서는 <ul> 요소의 type 속성을 더 이상 지원하지 않으므로, 대신 CSS의 list-style-type 속성을 사용하여 마커의 종류를 변경해야 합니다.


예제
<ul>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
    <li>차
        <ul>
            <li>녹차</li>
            <li>홍차</li>
            <li>자스민차</li>
        </ul>
    </li>
</ul>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<ul> 지원함 지원함 지원함 지원함 지원함 지원함

HTML5에서 변경된 사항

HTML5에서는 <ul> 요소의 compact 속성과 type 속성을 더 이상 지원하지 않습니다.


사용할 수 있는 속성

속성명   속성값 설명

compact

 

compact

리스트를 평소보다 더 작게 렌더링하도록 명시함.

HTML5에서는 더 이상 지원하지 않음.

type

 

disc

square

circle

순서가 없는 리스트에서 리스트 아이템에 사용되는 마커(marker)의 종류를 명시함.

HTML5에서는 더 이상 지원하지 않음.


CSS 기본값

ul {

  display: block;

  list-style-type: disc;

  margin-top: 1em;

  margin-bottom: 1 em;

  margin-left: 0;

  margin-right: 0;

  padding-left: 40px;

}


DOM 인터페이스

interface HTMLUListElement : HTMLElement {};


연관 페이지

HTML 리스트 수업 ⇒

CSS 리스트 수업 ⇒


연습문제