[css] list style type position 리스트 스타일 위치 타입 지정 및 커스텀 리스트 생성 시 ARIA role 설정

CSS에서 리스트의 스타일을 조정하는 데 사용되는

list-style-type과 list-style-position 속성에 대해 깊이 있게 알아보겠습니다.

이 두 속성은 HTML 리스트의 기본 모양과 배치를 변경하여 웹 페이지의 디자인과 가독성을 향상시키는 데 중요한 역할을 합니다.

list-style-type 속성

list-style-type 속성은

순서 없는 목록(<ul>)과 순서 있는 목록(<ol>)의 항목 앞에 표시되는 마커(marker)의 모양을 결정합니다.

 

기본적으로 <ul> 요소는 채워진 원형 불릿(disc)을,

<ol> 요소는 숫자(decimal)를 마커로 사용합니다.

 

그러나 list-style-type 속성을 활용하면 다양한 마커 스타일로 변경할 수 있습니다.

주요 값과 설명

• disc: 채워진 원형 불릿입니다. (<ul>의 기본값)
• circle: 비어 있는 원형 불릿입니다.
• square: 채워진 사각형 불릿입니다.
• decimal: 1, 2, 3, ... 순서의 숫자입니다. (<ol>의 기본값)
• decimal-leading-zero: 01, 02, 03, ... 처럼 앞에 0이 붙는 숫자입니다.
• lower-roman: 소문자 로마 숫자(i, ii, iii, ...)입니다.
• upper-roman: 대문자 로마 숫자(I, II, III, ...)입니다.
• lower-alpha: 소문자 알파벳(a, b, c, ...)입니다.
• upper-alpha: 대문자 알파벳(A, B, C, ...)입니다.
• none: 마커를 표시하지 않습니다.

예시 코드

/* 순서 없는 목록의 마커를 사각형으로 설정 */

ul {

  list-style-type: square;

}

/* 순서 있는 목록의 마커를 대문자 알파벳으로 설정 */

ol {

  list-style-type: upper-alpha;

}

위와 같이 설정하면, <ul> 요소의 항목 앞에는 채워진 사각형 마커가 표시되고,

<ol> 요소의 항목 앞에는 대문자 알파벳이 마커로 표시됩니다.

list-style-position 속성

list-style-position 속성은 리스트 항목의 마커가 텍스트와 어떤 위치 관계를 가질지 결정합니다.

이 속성은 마커의 위치를 리스트 항목 내부나 외부로 설정할 수 있습니다.

주요 값과 설명

• outside
  • 마커가 리스트 항목의 왼쪽 바깥쪽에 위치합니다.
  • 이는 기본값으로, 마커가 텍스트의 들여쓰기 영역 밖에 위치하게 됩니다.
• inside
  • 마커가 리스트 항목의 안쪽에 위치하여 텍스트와 같은 들여쓰기 수준을 가집니다.
  • 이 경우, 마커는 텍스트의 일부처럼 보이게 됩니다.

예시 코드

/* 마커를 리스트 항목 내부에 위치 */

ul.inside {

  list-style-position: inside;

}

/* 마커를 리스트 항목 외부에 위치 */

ul.outside {

  list-style-position: outside;

}

위와 같이 설정하면, .inside 클래스를 가진 <ul> 요소는 마커가 텍스트 내부에 위치하고,

.outside 클래스를 가진 <ul> 요소는 마커가 텍스트 외부에 위치하게 됩니다.

list-style 단축 속성

list-style 속성은 list-style-type, list-style-position, list-style-image 속성을 한 번에 설정할 수 있는 단축 속성입니다. 이를 활용하면 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

예시 코드

ul.custom-list {

  list-style: square inside;

}

위 코드는 list-style-type을 square로, list-style-position을 inside로 설정한 것과 동일한 효과를 가집니다.

실전 적용 예시

실제 프로젝트에서 이러한 속성을 어떻게 활용할 수 있는지 예시를 통해 살펴보겠습니다.

커스텀 마커 이미지 사용

ul.image-marker {

  list-style-image: url("marker.png");

  list-style-position: inside;

}

위 코드는 marker.png 이미지를 마커로 사용하며, 마커를 텍스트 내부에 위치시킵니다.

이를 통해 리스트의 디자인을 독특하게 만들 수 있습니다.

네비게이션 메뉴 스타일링

nav ul {

  list-style: none;

  padding: 0;

  margin: 0;

}

nav ul li {

  display: inline;

  margin-right: 15px;

}

네비게이션 메뉴에서 리스트 마커를 제거하고, 리스트 항목을 가로로 배치하여 깔끔한 메뉴를 구현할 수 있습니다.

접근성 고려

리스트 마커를 제거하거나 커스텀 마커를 사용할 때는 접근성을 고려해야 합니다.

스크린 리더와 같은 보조 기술이 리스트 구조를 올바르게 인식할 수 있도록 적절한 ARIA 속성을 추가하는 것이 좋습니다.

ARIA 속성을 통한 접근성 향상

ARIA(Accessible Rich Internet Applications)는

웹 콘텐츠와 애플리케이션의 접근성을 향상시키기 위해 W3C에서 제정한 표준입니다.

 

이는 주로 스크린 리더와 같은 보조 기술을 사용하는 사용자에게

추가적인 정보를 제공하여 웹 콘텐츠를 보다 쉽게 이해하고 탐색할 수 있도록 돕습니다.

 

role 속성을 활용한 리스트의 명확한 정의

HTML의 기본 리스트 요소인 <ul>, <ol>, <li>는 스크린 리더가 자동으로 인식하여 사용자에게 전달합니다.

그러나 커스텀 스타일링이나 비표준 마크업을 사용할 경우, 스크린 리더가 이를 올바르게 해석하지 못할 수 있습니다.

이러한 상황에서 ARIA의 role 속성을 활용하여 요소의 역할을 명확히 정의할 수 있습니다.

<div role="list">

  <div role="listitem">첫 번째 항목</div>

  <div role="listitem">두 번째 항목</div>

  <div role="listitem">세 번째 항목</div>

</div>

 

위 예시에서 <div> 요소에 role="list"를, 각 항목에는 role="listitem"을 지정하여

스크린 리더가 이들을 리스트와 리스트 항목으로 인식하도록 합니다.

aria-labelledby와 aria-label을 통한 리스트 설명

리스트에 제목이나 설명을 제공하여 사용자가 리스트의 목적이나 내용을 쉽게 이해할 수 있도록 도울 수 있습니다.

이를 위해 aria-labelledby나 aria-label 속성을 활용할 수 있습니다.

<h2 id="list-title">과일 목록</h2>

<ul aria-labelledby="list-title">

  <li>사과</li>

  <li>바나나</li>

  <li>체리</li>

</ul>

 

위 예시에서 <ul> 요소는 aria-labelledby 속성을 통해 id가 list-title인 <h2> 요소를 참조합니다.

이를 통해 스크린 리더는 리스트를 읽을 때 "과일 목록"이라는 제목을 함께 전달합니다.

 

만약 시각적으로 제목을 표시하지 않고 스크린 리더에게만 제목을 제공하고자 한다면,

aria-label 속성을 사용할 수 있습니다.

<ul aria-label="과일 목록">

  <li>사과</li>

  <li>바나나</li>

  <li>체리</li>

</ul>

이 경우, 스크린 리더는 "과일 목록"이라는 레이블을 먼저 읽은 후 리스트 항목들을 안내합니다.

aria-describedby를 통한 추가 정보 제공

리스트나 리스트 항목에 대한 추가 설명이 필요한 경우 aria-describedby 속성을 활용할 수 있습니다.

<p id="list-desc">이 목록은 계절별 과일을 나타냅니다.</p>

<ul aria-describedby="list-desc">

  <li>사과</li>

  <li>바나나</li>

  <li>체리</li>

</ul>

 

위 예시에서 <ul> 요소는 aria-describedby 속성을 통해 id가 list-desc인 <p> 요소를 참조합니다.

스크린 리더는 리스트를 읽기 전에 해당 설명을 먼저 전달하여 사용자가 리스트의 맥락을 이해하도록 돕습니다.

aria-current를 통한 현재 항목 표시

탭 메뉴나 페이지네이션과 같이 현재 선택된 항목을 표시해야 하는 리스트에서는 aria-current 속성을 활용할 수 있습니다.

<ul>

  <li><a href="page1.html">1페이지</a></li>

  <li><a href="page2.html" aria-current="page">2페이지</a></li>

  <li><a href="page3.html">3페이지</a></li>

</ul>

 

위 예시에서 aria-current="page"가 지정된 링크는 현재 페이지를 나타내며, 스크린 리더는 이를 사용자에게 알려줍니다.

 

결론

list-style-type과 list-style-position 속성은 CSS에서 리스트의 외관과 배치를 조정하는 데 핵심적인 역할을 합니다.

이러한 속성을 적절하게 활용하면 웹 페이지의 디자인을 향상시키고, 사용자 경험을 개선할 수 있습니다.

다양한 마커 스타일과 위치를 활용하여 독특하고 접근성 높은 리스트를 구현해 보시기 바랍니다.