CSS 팟캐스트 - 030: 목록
를 통해 개인정보처리방침을 정의할 수 있습니다.
다음 장보기 여행 중에 구매할 상품이 많이 있다고 상상해 보세요. 이를 시각적으로 표현하는 일반적인 방법 중 하나는 목록을 사용하는 것입니다. 그런데 식료품 목록에 스타일을 추가하려면 어떻게 해야 할까요?
<ul>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ul>
목록 만들기
이전 목록은 식료품 목록 항목 (<li>
요소)이 하위 요소로 포함된 시맨틱 요소, 즉 <ul>
로 시작되었습니다. 각 <li>
요소를 검사하면 모든 요소에 display: list-item
가 있음을 확인할 수 있습니다. 따라서 브라우저가 기본적으로 ::marker
를 렌더링합니다.
li {
display: list-item;
}
다른 두 가지 목록 유형이 있습니다.
순서가 지정된 목록은 <ol>
로 만들 수 있으며, 이 경우 목록 항목은 숫자를 ::marker
로 표시합니다.
<ol>
<li>oat milk</li>
<li>rhubarb</li>
<li>cereal</li>
<li>pie crust</li>
</ol>
설명 목록은 <dl>
로 생성되지만 이 목록 유형은 <li>
목록 항목 요소를 사용하지 않습니다.
<dl>
<dt>oat milk</dt>
<dd>- non dairy trendy drink</dd>
<dt>cereal</dt>
<dd>- breakfast food</dd>
</dl>
목록 스타일
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
이제 목록을 만드는 방법을 알았으므로 목록의 스타일을 지정할 수 있습니다. 첫 번째로 탐색할 CSS 속성은 전체 목록에 적용되는 속성입니다.
예의 스타일을 지정하는 데 사용할 수 있는 세 가지 목록 스타일 속성은 list-style-position
, list-style-image
, list-style-type
입니다.
list-style-position
list-style-position
를 사용하면 글머리기호를 목록 항목의 콘텐츠로 inside
또는 outside
로 이동할 수 있습니다. 기본 outside
는 글머리기호가 목록 항목 콘텐츠에 포함되지 않음을 의미하지만 inside
는 목록 항목의 콘텐츠 중 첫 번째 요소를 이동합니다.
list-style-image
list-style-image
를 사용하면 목록의 글머리기호를 이미지로 바꿀 수 있습니다. 이렇게 하면 url
또는 none
와 같은 이미지를 설정하여 글머리기호를 이미지, SVG 또는 GIF로 만들 수 있습니다. 모든 미디어 유형 또는 데이터 URI를 사용할 수도 있습니다.
각 식료품의 이미지를 list-style-image
로 추가하는 방법을 살펴보겠습니다.
list-style-type
마지막 옵션은 list-style-type
의 스타일을 지정하는 것으로, 글머리기호를 알려진 스타일 키워드, 맞춤 문자열, 그림 이모티콘 등으로 변경합니다. 가능한 모든 목록 스타일 유형은 여기에서 확인할 수 있습니다.
list-style
약식
이제 이러한 개별 속성이 모두 있으므로 list-style
약식 기호를 사용하여 모든 목록 스타일을 한 줄로 설정할 수 있습니다.
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
list-style
를 사용하면 list-style
속성 중 1개, 2개 또는 3개의 조합을 원하는 순서로 선언할 수 있습니다. list-style-type
와 list-style-image
가 모두 설정된 경우 이미지를 사용할 수 없는 경우 list-style-type
가 대체 수단으로 사용됩니다.
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;
이 섹션에서 다루는 목록 스타일 중 가장 일반적으로 사용되는 속성입니다. 한 가지 일반적인 애플리케이션은 기본 스타일을 숨기는 list-style: none
입니다. 기본 스타일은 브라우저에서 제공되며, 재설정 스타일 시트가 패딩 및 여백과 같은 목록 스타일을 삭제하는 것을 자주 볼 수 있습니다. 이 약칭을 사용하여 list-style: square inside;
와 같은 스타일을 설정할 수도 있습니다.
지금까지 예에서는 전체 목록과 목록 항목의 스타일을 지정하는 데 중점을 두었습니다. 그렇다면 더 세분화된 접근 방식은 어떨까요?
유사 요소 ::marker
개
list-item
마커 요소는 목록의 각 항목을 나타내는 데 도움이 되는 글머리기호, 하이픈, 로마 숫자입니다.
DevTools에서 목록을 검사하면 HTML에서 선언하지 않더라도 각 목록 항목의 ::marker
요소를 볼 수 있습니다. ::marker
를 더 자세히 검사하면 브라우저 기본 스타일이 표시됩니다.
::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
목록을 선언할 때 HTML에 글머리기호나 로마 숫자가 없는 경우에도 각 항목에 마커가 지정됩니다. 브라우저에서 자동으로 생성하며 이를 타겟팅하는 제한된 스타일 지정 API를 제공하므로 의사 요소입니다. CSS 글머리기호 분석 자세히 알아보기 ::marker
은(는) Safari에서 제한적으로 지원됩니다.
마커 상자
CSS 레이아웃 모델에서 목록 항목 마커는 각 목록 항목과 연결된 마커 상자로 표시됩니다. 마커 상자는 일반적으로 글머리기호나 숫자를 포함하는 컨테이너입니다.
마커 상자의 스타일을 지정하려면 ::marker
선택기를 사용하면 됩니다. 이렇게 하면 전체 목록을 기반으로 스타일을 지정하는 대신 마커만 선택할 수 있습니다.
마커 스타일
마커를 선택했으므로 이 선택기에 사용할 수 있는 스타일 지정 속성을 살펴보겠습니다. web.dev에서 CSS ::marker를 사용한 맞춤 글머리기호에 관해 자세히 알아보세요.
허용되는 CSS ::marker
속성은 다음과 같습니다.
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
디스플레이 유형
모든 list-style
및 ::marker
속성은 list-item의 기본 표시 값이 있으므로 <li>
요소의 스타일을 지정합니다. <li>
가 아닌 항목을 목록 항목으로 만들 수도 있습니다.
display: list-item
속성을 추가하면 됩니다. display: list-item
를 사용하는 한 가지 예는 제목에 글머리 기호를 걸어 ::marker
를 사용하여 다른 것으로 변경할 수 있도록 하는 것입니다. 다음 예에서는 스타일 지정을 위해 display: list-item
를 사용하는 제목과 올바른 목록 마크업을 사용하는 목록을 보여줍니다.
display
를 사용하여 무엇이든 목록 항목 뷰로 변환할 수 있지만, 스타일을 지정할 콘텐츠가 실제로 목록인 경우에는 올바른 목록 마크업을 사용하는 대신 이를 사용하면 안 됩니다. 항목의 시각적 모양을 목록 항목으로 변경해도 접근성 서비스에서 항목을 읽고 인식하는 방식은 변경되지 않습니다. 따라서 스크린 리더에서 항목을 목록 항목으로 읽거나 기기를 전환하지 않습니다. 가능하면 항상 시맨틱 마크업을 사용하고 <li>
로 목록을 만들어야 합니다.
이해도 확인
목록에 관한 지식 테스트
목록 항목 앞에 오는 요소를
::counter
::bullet
::pencil
::marker
HTML 목록의 세 가지 유형은
<lo>
<dl>
<ol>
<li>
<ul>
<list>
이 목록에서 ::marker
에 스타일을 적용하는 두 가지 스타일은 무엇인가요?
color
display
transition
background-color