광고 소재 목록 스타일 지정

목록의 스타일을 지정하는 유용하고 창의적인 방법을 살펴보세요.

Michelle Barker

목록을 생각하면 무엇이 떠오르나요? 가장 명백한 예는 쇼핑 목록, 즉 가장 단순한 목록이며 특정 순서가 없는 항목 컬렉션입니다. 하지만 Google은 웹상에서 다양한 방법으로 목록을 사용합니다. 특정 공연장의 예정된 콘서트 컬렉션 목록일 가능성이 매우 높습니다. 여러 단계의 예약 프로세스가 있나요? 아마 목록일 겁니다. 이미지 갤러리? 캡션이 있는 이미지 목록으로 볼 수도 있습니다.

이 도움말에서는 사용자에게 익숙하지 않은 몇 가지 속성을 포함하여 웹에서 사용할 수 있는 다양한 HTML 목록 유형과 이러한 유형을 사용해야 하는 경우에 대해 자세히 알아보겠습니다. CSS로 광고 스타일을 지정하는 유용하고 창의적인 방법도 살펴보겠습니다.

목록을 사용하는 경우

항목을 의미적으로 그룹화해야 하는 경우 HTML 목록 요소를 사용해야 합니다. 보조 기술 (예: 스크린 리더)은 목록과 항목 수를 사용자에게 알립니다. 예를 들어 쇼핑 사이트의 제품 그리드를 생각해 보면 이 정보를 알면 매우 도움이 됩니다. 따라서 목록 요소를 사용하는 것이 좋습니다.

유형 나열

마크업에는 세 가지 목록 요소 중에서 선택할 수 있습니다.

• 순서가 지정되지 않은 목록
• 순서가 지정된 목록
• 설명 목록

어느 것을 선택할지는 사용 사례에 따라 다릅니다.

순서가 지정되지 않은 목록 (ul)

순서가 지정되지 않은 목록 요소 (<ul>)는 목록의 항목이 특정 순서와 일치하지 않을 때 가장 유용합니다. 기본적으로 글머리기호 목록으로 표시됩니다. 예를 들어 순서가 중요하지 않은 쇼핑 목록이 있습니다.

웹의 더 일반적인 예로는 탐색 메뉴가 있습니다. 메뉴를 빌드할 때 보조 기술을 지원하기 위해 nav 요소에 ul를 래핑하고 라벨로 메뉴를 식별하는 것이 좋습니다. 또한 aria-current 속성을 사용하여 메뉴에서 현재 페이지를 식별해야 합니다.

<nav aria-label="Main">  
  <ul>  
    <li>  
      <a href="/page-1" aria-current="page">Menu item 1</a>  
    </li>  
    <li>  
      <a href="/page-2">Menu item 2</a>  
    </li>  
    <li>  
      <a href="/page-2">Menu item 2</a>  
    </li>  
      …  
    </ul>  
</nav>  

메뉴 구조에 관한 이 도움말에서는 누구나 탐색 메뉴를 이용할 수 있도록 하기 위한 몇 가지 권장사항을 설명합니다.

순서가 지정된 목록 (ol)

순서가 지정된 목록 요소 (<ol>)는 다단계 프로세스와 같이 항목의 순서가 중요한 경우에 적합합니다. 기본적으로 목록 항목에는 번호가 매겨집니다. 단계를 순서대로 완료해야 하는 일련의 지침을 예로 들 수 있습니다.

<ol> 및 <ul> 요소는 모두 <li> 요소만 직계 하위 요소로 포함할 수 있습니다.

설명 목록 (dl)

설명 목록에는 용어 (<dt> 요소)와 설명 (<dd>)이 포함됩니다. 각 용어에는 2개 이상의 설명이 함께 포함될 수 있습니다. 가능한 사용 사례로는 용어집, 식당 메뉴 등이 있습니다. 브라우저에서 <dd> 요소를 들여쓰기하는 경향이 있지만 설명 목록은 기본적으로 마커와 함께 표시되지 않습니다.

HTML에서는 <div>를 사용하여 용어를 함께 제공되는 설명과 함께 그룹화할 수 있습니다. 나중에 살펴보겠지만 스타일 지정 용도로 유용하게 사용할 수 있습니다.

<!-- This is valid --> 
<dl>  
    <dt>Term 1</dt>  
    <dd>This is the first description of the first term in the list</dd>  
    <dd>This is the second description of the first term in the list</dd>  
    <dt>Term 2</dt>  
    <dd>This is the description of the second term in the list</dd>  
</dl>

<!-- This is also valid --> 
<dl>  
    <div>  
        <dt>Term 1</dt>  
        <dd>This is the first description of the first term in the list</dd>  
        <dd>This is the second description of the first term in the list</dd>  
    </div>  
    <div>  
        <dt>Term 2</dt>  
        <dd>This is the description of the second term in the list</dd>  
    </div>  
</dl>  

간단한 목록 스타일 지정

목록의 가장 간단한 용도 중 하나는 본문 텍스트 블록 내에 있는 것입니다. 이러한 간단한 목록에는 정교한 스타일 지정이 필요하지 않은 경우가 많지만 순서가 있거나 정렬되지 않은 목록의 마커를 브랜드 색상 사용이나 글머리기호의 맞춤 이미지 사용과 같이 어느 정도 맞춤설정할 수도 있습니다. list-style 및 ::marker 의사 요소로 많은 작업을 할 수 있습니다.

참고: 목록 스타일 지정의 기본사항을 복습하려면 CSS 알아보기 튜토리얼을 확인하고 맞춤 글머리기호 가이드에서 ::marker 사용에 관해 자세히 알아보세요. 잘 모르는 내용이 있을 수도 있으니 이 글을 계속 읽어보세요.

::마커

목록 마커에 기본 스타일을 지정하는 것 외에도 순환 글머리기호를 만들 수 있습니다. 여기서는 ::marker 유사 요소의 content 값에 세 가지 다른 이미지 URL을 사용합니다. 이는 모두에게 단일 이미지를 사용하는 것이 아니라 쇼핑 목록 예의 필기 입력 느낌에 추가됩니다.

::marker {  
    content: url("/marker-1.svg") ' ';  
}

li:nth-child(3n)::marker {  
    content: url("/marker-2.svg") ' ';  
}

li:nth-child(3n - 1)::marker {  
    content: url("/marker-3.svg") ' ';  
}  

커스텀 카운터

순서가 지정된 일부 목록의 경우 카운터 값을 사용하고 여기에 다른 값을 추가할 수 있습니다. list-item 카운터를 마커의 content 속성 값으로 사용하고 다른 콘텐츠를 추가할 수 있습니다.

::marker {  
    content: counter(list-item) '🐈 ';  
}  

카운터는 자동으로 1씩 증분되지만 원하는 경우 목록 항목에 counter-increment 속성을 설정하여 다른 값만큼 카운터가 증가하도록 허용할 수 있습니다. 예를 들어, 이렇게 하면 매번 카운터가 3씩 증가합니다.

li {  
    counter-increment: list-item 3;  
}  

카운터로 자세히 알아볼 수 있는 것들이 많습니다. CSS 목록, 마커 및 카운터 문서에서는 몇 가지 가능성을 자세히 설명합니다.

::마커 스타일 지정의 제한사항

마커의 위치와 스타일을 더 세밀하게 제어해야 하는 경우가 있습니다. 예를 들어 Flexbox 또는 그리드를 사용하여 마커를 배치할 수는 없습니다. 이는 다른 정렬이 필요한 경우 간혹 단점이 될 수 있습니다. ::marker는 스타일 지정을 위해 제한된 수의 CSS 속성을 노출합니다. 기본 스타일 지정 이외의 것이 필요한 디자인이라면 다른 의사 요소를 사용하는 것이 더 나을 수 있습니다.

목록과 비슷해 보이지 않는 목록의 스타일 지정

가끔 기본 스타일과 완전히 다른 방식으로 목록의 스타일을 지정하고 싶을 수 있습니다. 일반적으로 모든 마커를 삭제하고 flexbox를 사용하여 목록을 가로로 표시할 수 있는 탐색 메뉴가 이 경우에 자주 사용됩니다. 일반적인 방법은 list-style 속성을 none로 설정하는 것입니다. 따라서 DOM에서 마커 유사 요소에 더 이상 액세스할 수 없습니다.

주의: 주의: list-style: none를 사용하면 Safari에서 접근성 트리에서 순서가 지정되지 않은 목록을 더 이상 인식하지 못합니다. 즉, 스크린 리더가 항목 수와 같은 유용한 정보를 더 이상 알려주지 않습니다. 목록을 읽도록 해야 한다고 가정하는 간단한 해결 방법은 접근성 전문가 스콧 오하라의 권장사항에 따라 HTML의 <ul> 또는 <ol> 요소에서 role="list"를 사용하는 것입니다.

::before를 사용한 맞춤 마커

::before 유사 요소의 스타일을 지정하는 것은 ::marker가 도입되기 전에 맞춤 목록 마커를 만드는 일반적인 방법이었습니다. 그러나 지금은 필요할 때 시각적으로 복잡한 목록 스타일을 지정하는 데 더 많은 유연성을 제공할 수 있습니다.

::marker와 마찬가지로 content 속성을 사용하여 맞춤 글머리기호 스타일을 추가할 수 있습니다. ::marker를 사용하는 것과 달리 list-style-position에서 제공하는 자동 혜택을 얻지 못하므로 몇 가지를 수동으로 배치해야 합니다. 하지만 Flexbox를 사용하면 상대적으로 쉽게 포지셔닝할 수 있으며 더 많은 정렬 가능성을 열어 줍니다. 예를 들어, 마커의 위치를 바꿀 수 있습니다.

::before 요소를 사용하여 순서가 지정된 목록의 스타일을 지정하는 경우 카운터를 사용하여 숫자 마커를 추가할 수도 있습니다.

li::before {  
  counter-increment: list-item;  
  content: counter(list-item);  
}  

::marker 대신 ::before를 사용하면 맞춤 스타일 지정을 위해 CSS 속성에 대한 전체 액세스 권한을 얻고 애니메이션과 전환을 허용할 수 있습니다. ::marker의 경우 지원이 제한됩니다.

목록 속성

순서가 지정된 목록 요소는 몇 가지 선택적 속성을 허용하므로 다양한 사용 사례에 도움이 될 수 있습니다.

반전된 목록

작년의 상위 10개 앨범이 있다면 10개에서 1개로 세는 것이 좋습니다. 이를 위해 맞춤 카운터를 사용하고 음수로 늘릴 수 있습니다. 또는 HTML에 reversed 속성을 사용할 수도 있습니다. 카운터가 순수하게 보여주기 위한 것이 아니라면 CSS에서 카운터를 부정적으로 늘리는 것보다 reversed 속성을 사용하는 것이 일반적으로 의미론적으로 타당하다고 주장합니다. CSS가 로드되지 않는 경우에도 HTML에서 숫자가 올바르게 카운트다운되는 것을 볼 수 있습니다. 또한 스크린 리더가 목록을 해석하는 방법도 고려해야 합니다.

2021년 상위 10개 앨범의 데모를 확인하세요. 카운터가 CSS만으로 증가된 경우 스크린 리더를 사용하여 페이지에 액세스하면 숫자가 위쪽으로 계산되어 실제로는 숫자 10이 1이 될 수 있습니다.

데모에서 reversed 속성을 사용하면 추가 작업 없이도 마커에 이미 올바른 값이 있음을 확인할 수 있습니다. 그러나 ::before 의사 요소를 사용하여 맞춤 목록 마커를 만드는 경우에는 카운터를 조정해야 합니다. 목록 항목 카운터가 음수로 증가하도록 지시하기만 하면 됩니다.

li::before {  
  counter-increment: list-item -1;  
  content: counter(list-item);  
}  

Firefox에서는 이것으로 충분하지만 Chrome과 Safari에서는 마커가 0에서 -10까지 카운트다운됩니다. 목록에 start 속성을 추가하면 이 문제를 해결할 수 있습니다.

목록 분할

start 속성을 사용하면 목록이 시작되어야 하는 숫자 값을 지정할 수 있습니다. 이 방법은 목록을 그룹으로 분할하려는 경우에 유용합니다.

상위 10개 앨범의 예를 만들어 보겠습니다. 상위 20개 앨범을 10개씩 그룹으로 세어 볼 수도 있습니다. 두 그룹 사이에는 다른 페이지 콘텐츠가 있습니다.

HTML에서 두 개의 개별 목록을 만들어야 하는데 카운터가 정확하도록 하려면 어떻게 해야 할까요? 현재 마크업에서는 두 목록 모두 10에서 1까지 카운트다운되며 이는 원하는 것과 다릅니다. 그러나 HTML에서 start 속성 값을 지정할 수 있습니다. 첫 번째 목록에 start 값 20을 추가하면 마커가 다시 자동으로 업데이트됩니다.

<ol reversed start="20">  
  <li>...</li>  
  <li>...</li>  
  <li>...</li>  
</ol>  

다중 열 목록 레이아웃

이전 데모에서 볼 수 있듯이 다중 열 레이아웃은 때때로 목록에 잘 맞을 수 있습니다. 열 너비를 설정하면 목록이 자동으로 응답하여 충분한 공간이 있을 때만 두 개 이상의 열 위에 자체적으로 배치되도록 할 수 있습니다. 열 사이에 간격을 설정하고 더 번성하기 위해 스타일이 지정된 column-rule을 추가할 수도 있습니다 (border 속성과 유사한 약식 사용).

ol {  
    columns: 25rem;  
    column-gap: 7rem;  
    column-rule: 4px dotted turquoise;  
}  

열을 사용하면 목록 항목에 보기 좋게 표시되지 않을 수 있으며 원하는 효과가 나타나지 않을 수도 있습니다.

목록 항목에서 break-inside: avoid를 사용하여 이러한 강제 중단을 방지할 수 있습니다.

li {  
    break-inside: avoid;  
}  

맞춤 속성

CSS 맞춤 속성은 목록의 스타일을 지정하는 다양한 가능성을 열어줍니다. 목록 항목의 색인을 알고 있으면 이를 사용하여 속성 값을 계산할 수 있습니다. 안타깝게도 현재로서는 CSS 단독으로 요소의 색인을 (어떤 방식으로든 사용 가능한 방식으로) 결정할 수 있는 방법은 없습니다. 카운터는 content 속성의 값만 사용하도록 허용하며 계산을 허용하지 않습니다.

하지만 HTML의 style 속성 내에 요소의 색인을 설정할 수 있습니다. 이렇게 하면 특히 템플릿 언어를 사용하는 경우 계산이 더 쉬워집니다. 이 예에서는 Nunjucks를 사용하여 설정하는 방법을 보여줍니다.

<ol style="--length: items|length">  
  
</ol>  

Splitting.js는 클라이언트 측에서 유사한 기능을 실행하는 라이브러리입니다.

맞춤 속성 값을 사용하면 다양한 방식으로 목록의 진행 상황을 표시할 수 있습니다. 한 가지 방법은 단계 목록의 진행률 표시줄이 될 수 있습니다. 이 예에서는 선형 그래디언트가 있는 의사 요소를 사용하여 사용자가 목록에서 얼마나 많이 이동하는지 보여주는 각 항목의 막대를 만듭니다.

li::before {  
    --stop: calc(100% / var(--length) * var(--i));  
    --color1: deeppink;  
    --color2: pink;  

    content: '';  
    background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);  
}  

hsl() 색상 함수를 사용하여 목록이 진행됨에 따라 색조를 조정할 수도 있습니다. 맞춤 속성을 사용하여 hue 값을 계산할 수 있습니다.

설명 목록 스타일 지정

앞서 언급했듯이 용어와 정의를 dl의 div 내에 래핑하여 더 많은 스타일 지정 옵션을 제공할 수 있습니다. 예를 들어 목록을 그리드로 표시할 수 있습니다. 각 그룹 주위에 래퍼 div 없이 목록에 display: grid를 설정하면 용어 및 설명이 다른 그리드 셀에 배치됩니다. 다음 예에서와 같이 파이 메뉴를 파이에 대한 설명과 함께 표시하는 것이 유용한 경우도 있습니다.

목록 자체에 그리드를 정의하고 용어와 설명이 항상 가장 긴 용어로 결정되는 열 너비에 맞춰 정렬되도록 할 수 있습니다.

반면에 설명 카드 스타일로 용어를 명확하게 그룹화하려면 래퍼 <div>이 매우 유용합니다.

자료

• 목록 목록 및 ::marker 소개
• ::marker를 사용하는 맞춤 마커
• 카운터가 있는 CSS 목록