ul element - by. UXKM

요약 설명

<ul> 요소는 순서가 없는 목록(unordered list)을 나타내는 시맨틱 태그로, 항목 간에 우선순위나 순서가 중요하지 않은 경우에 사용됩니다.
내부에는 <li> 요소들을 포함하며, 브라우저는 기본적으로 항목 앞에 점(bullet)을 표시합니다. 메뉴, 특성 나열, 체크리스트 등 같은 수준의 정보들을 나열할 때 적합하며, 시각적 스타일은 CSS로 자유롭게 조정할 수 있습니다.

주요 역할 및 특징

  1. 순서가 중요하지 않은 항목 나열
    • <ul> 요소는 항목 간의 순서가 중요하지 않을 때 사용됩니다.
    • 예: 기능 목록, 항목 리스트, 옵션 목록 등.
  2. 기본 불릿 스타일 제공

    항목은 기본적으로 원형 불릿으로 표시되며, CSS를 사용해 스타일을 변경할 수 있습니다.

  3. 구조적 의미 부여
    • 의미론적으로 항목을 그룹화하여 콘텐츠 구조를 명확히 표현합니다.
    • 검색 엔진과 스크린 리더가 목록의 구조를 더 잘 이해하도록 돕습니다.
  4. 다른 요소와의 관계
    • <ul> 요소의 직계 자식으로는 반드시 <li> 요소만 포함해야 합니다.
    • 중첩된 <ul> 또는 <ol>을 사용하여 서브 목록을 만들 수 있습니다.

CSS 기본 값

<ul> 요소는 기본적으로 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<ul> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

기본 순서 없는 목록

중첩된 목록

사용자 정의 불릿 1

사용자 정의 불릿 2

접근성을 고려한 목록

주의사항

  • <ul> 요소의 직계 자식으로는 반드시 <li> 요소만 포함해야 하며, <li> 요소와 같은 계층에는 <li> 외의 다른 요소를 포함할 수 없습니다.
  • 순서가 중요한 경우에는 <ol>을 사용하세요.