HTML <ul> 태그

❮ 이전 완전한 HTML 참조 다음 ❯

예시

정렬되지 않은 HTML 목록:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

<ul>태그는 순서가 지정되지 않은(글머리 기호) 목록을 정의합니다 .

<li><ul> 태그 와 함께 태그를 사용 하여 정렬되지 않은 목록을 만듭니다.

팁: CSS를 사용하여 목록의 스타일 을 지정하십시오 .

팁: 정렬된 목록의 경우 <ol> 태그를 사용하십시오.

브라우저 지원

Element
<ul>	Yes	Yes	Yes	Yes	Yes

전역 속성

<ul>태그는 HTML의 전역 속성도 지원 합니다 .

이벤트 속성

<ul>태그는 HTML의 이벤트 속성 도 지원합니다 .

더 많은 예

예시

다양한 목록 스타일 유형 설정(CSS 사용):

<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

예시

목록의 줄 높이 확장 및 축소(CSS 사용):

<ul style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ul style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

예시

목록 안에 목록 만들기(중첩 목록):

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ul>

예시

더 복잡한 중첩 목록을 만듭니다.

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
</li>
<li>Milk</li>
</ul>

기본 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;
}