[웹접근성] 목록 나열 태그 (ul, ol, dl)

2025. 5. 12. 20:37·Frontend/웹접근성
목록나열 태그에 대해서 알아보자

 

ul (Unordered List)

순서가 지정되지 않은 목록 나열할 때 사용

<ul aria-label="프론트엔드 기술 목록">
  <li>
  	React
    <ul>
    	<li>CRA</li>
        <li>VITE</li>
    </ul>
  </li>
  <li>Next.js</li>
  <li>TypeScript</li>
</ul>

✅ 예시

  • React
    • CRA
    • VITE
  • Next.js
  • TypeScript

 

✅ 설명

  • ul 바로 하위 자식 요소는 li 태그만 사용가능
  • 기본 글머리 기호는 disc (list-style-type: disc)

ol (Ordered List)

순서가 지정된 목록 나열할 때 사용

<ol aria-label="프론트엔드 기술 목록">
  <li>
  	React
    <ul>
    	<li>CRA</li>
        <li>VITE</li>
    </ul>
  </li>
  <li>Next.js</li>
  <li>TypeScript</li>
</ol>

✅ 예시

  1. React
    1. CRA
    2. VITE
  2. Next.js
  3. TypeScript

✅ 설명

  • ol 바로 하위 자식 요소는 li 태그만 사용가능
  • 기본 글머리 기호는 decimal 숫자 (list-style-type: decimal)
/* 숫자 (기본값) */
<ol type="1">

/* 소문자 */
<ol type="a">

/* 대문자 */
<ol type="A">

/* 로마숫자(소문자) */
<ol type="i">

/* 로마숫자(대문자) */
<ol type="I">

/* 3부터 시작 */
<ol start="3">

/* 역순 */
<ol reversed>

/* start부터 역순 */
<ol reversed start="5">

dl (Description List)

용어를 정의하거나 key-value 형태의 항목 나열할 때 사용

<dl>
    <dt>감자<dt>
    <dd>10,000원<dd>
    <dt>당근<dt>
    <dd>4,000원<dd>
</dl>

<dl>
    <div>
        <dt>감자<dt>
        <dd>10,000원<dd>
    </div>
    <div>
        <dt>당근<dt>
        <dd>4,000원<dd>
    </div>
</dl>

✅ 설명

  • dl 자식요소로는 dt, dd 태그만 가능 (key : dt / value : dd)
  • dt 태그 없이 dd만 사용 ❌, dt 태그를 설명하기 위한 여러 dd 사용가능
  • 연관된 dt, dd 그룹을 묶는 용도의 <div>태그는 허용
반응형
저작자표시 (새창열림)

'Frontend > 웹접근성' 카테고리의 다른 글

[웹접근성] 명료성에 대해서 (명도차, 무늬 활용)  (0) 2025.05.12
'Frontend/웹접근성' 카테고리의 다른 글
  • [웹접근성] 명료성에 대해서 (명도차, 무늬 활용)
전예방
전예방
  • 전예방
    예방이의 개발일기
    전예방
  • 전체
    오늘
    어제
    • All (125)
      • Info & Tip (2)
      • 유용한 사이트들 (5)
      • Mark Up & StyleSheet (23)
        • HTML (6)
        • CSS & SCSS (10)
        • 반응형 (6)
      • Frontend (66)
        • 전체 (10)
        • JavaScript & Jquery (18)
        • TypeScript (0)
        • React (26)
        • Next.js (3)
        • 성능최적화 (2)
        • 웹접근성 (2)
      • Backend (13)
        • Python (1)
        • JAVA (2)
        • node.js (0)
        • PHP (7)
        • 패키지매니저 (3)
      • Markdown (0)
      • SCM (1)
        • Git&Github (1)
        • SVN (0)
      • IDE (4)
        • VSCode (2)
        • IntelliJ (1)
        • Ecplise (1)
      • 취미생활 (3)
      • 정보처리기사 (2)
      • 코딩자율학습단 (5)
        • 12기 (파이썬) (5)
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

    • velog
    • github
  • 공지사항

  • 인기 글

  • 태그

    Admin
    나도코딩
    회원가입
    yarn berry
    코딩자율학습
    코딩자율학습단
    CSS
    React Swiper
    반응형
    파이썬
    관리자 페이지
    frontend
    TypeScript
    Python
    Chart.js
    swiper.js
    리액트
    react
    php
    NPM
  • 최근 댓글

  • 최근 글

  • 반응형
  • hELLO· Designed By정상우.v4.10.3
전예방
[웹접근성] 목록 나열 태그 (ul, ol, dl)
상단으로

티스토리툴바