HTML <ul> 태그

  • 이전 페이지 <u>
  • 다음 페이지 <var>

과목 추천:

<ul> 정의와 사용 방법

태그를 사용하여 불순서(목록 기호가 있는) 목록을 정의하십시오. <ul> 태그와 <li> 태그를 사용하여 불순서 목록을 생성하십시오.

푸터빌드:CSS를 사용하여목록 스타일 설정.

푸터빌드:정렬된 목록에 사용하십시오: <ol> 태그.

다른 사항을 참조하십시오:

HTML 교본:HTML 목록

HTML DOM 참조 가이드:Ul 객체

CSS 교본:목록 스타일 설정

예제

예제 1

비순서 HTML 목록:

<ul>
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ul>

직접 시험해보세요

예제 2

다른 목록 스타일 타입을 설정하십시오 (CSS를 사용하여):

<ul style="list-style-type:circle">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ul>
<ul style="list-style-type:disc">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ul>
<ul style="list-style-type:square">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ul>

직접 시험해보세요

예제 3

목록에서 줄 높이를 확장하고 축소하십시오 (CSS를 사용하여):

<ul style="line-height:180%">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ul>
<ul style="line-height:80%">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ul>

직접 시험해보세요

예제 4

목록에서 또 다른 목록을 생성하십시오 (중첩 목록):

<ul>
  <li>커피</li>
  <li>차
    <ul>
      <li>보르차
      <li>녹차</li>
    </ul>
  </li>
  <li>우유</li>
</ul>

직접 시험해보세요

예제 5

더 복잡한 중첩 목록을 만들기:

<ul>
  <li>커피</li>
  <li>차
    <ul>
      <li>보르차
      <li>녹차
        <ul>
          <li>비록춘</li>
          <li>롱정</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>우유</li>
</ul>

직접 시험해보세요

전역 속성

<ul> 태그는 또한 HTML에서의 전역 속성.

이벤트 속성을 지원합니다

<ul> 태그는 또한 HTML에서의 이벤트 속성.

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다 <ul> 요소:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

직접 시험해보세요

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원
  • 이전 페이지 <u>
  • 다음 페이지 <var>