광고 소재 목록 스타일 지정

목록에 스타일을 지정하는 유용하고 창의적인 방법을 살펴봅니다.

Michelle Barker

목록을 생각하면 무엇이 떠오르나요? 가장 명확한 예는 쇼핑 목록입니다. 쇼핑 목록은 가장 간단한 목록으로 특정 순서 없이 항목을 모아 놓은 것입니다. 하지만 웹에서는 다양한 방식으로 목록을 사용합니다. 특정 장소에서 열릴 예정인 연주회 모음 목록일 가능성이 매우 높습니다. 여러 단계로 이루어진 예약 절차 목록일 가능성이 높습니다. 이미지 갤러리 이 경우에도 설명이 있는 이미지 목록으로 간주될 수 있습니다.

이 도움말에서는 웹에서 사용할 수 있는 다양한 HTML 목록 유형과 이를 사용할 때의 주의점을 살펴봅니다. 여기에는 익숙하지 않을 수 있는 몇 가지 속성도 포함됩니다. 또한 CSS를 사용하여 스타일을 지정하는 유용하고 창의적인 방법도 살펴보겠습니다.

목록을 사용해야 하는 경우

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

유형 나열

마크업을 사용하면 다음 세 가지 목록 요소 중에서 선택할 수 있습니다.

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

선택하는 방법은 사용 사례에 따라 다릅니다.

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

순서 없는 목록 요소(<ul>)는 목록의 항목이 특정 순서에 해당하지 않는 경우에 가장 유용합니다. 기본적으로 글머리기호 목록으로 표시됩니다. 순서가 중요하지 않은 쇼핑 목록이 한 가지 예입니다.

웹에서 더 일반적인 예는 탐색 메뉴입니다. 메뉴를 빌드할 때는 보조 기술을 지원하기 위해 ul를 nav 요소로 래핑하고 라벨로 메뉴를 식별하는 것이 좋습니다. 또한 메뉴에서 현재 페이지를 식별해야 합니다. 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>)이 포함됩니다. 각 용어는 하나 이상의 설명과 함께 표시될 수 있습니다. 용어집이나 레스토랑 메뉴가 가능한 사용 사례에 해당합니다. 브라우저에서 <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 가상 요소를 사용하면 할 수 있는 일이 많습니다.

::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 목록, 마커, 카운터 도움말에서는 몇 가지 가능성을 자세히 설명합니다.

::marker 스타일 지정 제한사항

마커의 위치와 스타일을 더 세부적으로 제어해야 하는 경우가 있습니다. 예를 들어 flexbox나 그리드를 사용하여 마커를 배치할 수 없으므로 다른 정렬이 필요한 경우 단점이 될 수 있습니다. ::marker는 스타일 지정을 위해 제한된 수의 CSS 속성을 노출합니다. 디자인에 기본 스타일 지정 외의 항목이 필요한 경우 다른 가상 요소를 사용하는 것이 좋습니다.

목록처럼 보이지 않는 목록의 스타일 지정

기본 스타일과 완전히 다른 방식으로 목록의 스타일을 지정해야 할 때가 있습니다. 탐색 메뉴에서 종종 이러한 경우가 발생합니다. 예를 들어 일반적으로 모든 마커를 삭제하고 flexbox를 사용하여 목록을 가로로 표시할 수 있습니다. 일반적인 방법은 list-style 속성을 none로 설정하는 것입니다. 이렇게 하면 DOM에서 마커 가상 요소에 더 이상 액세스할 수 없게 됩니다.

::before를 사용한 맞춤 마커

::marker가 등장하기 전에는 ::before 가상 요소에 스타일을 지정하는 것이 맞춤 목록 마커를 만드는 일반적인 방법이었습니다. 하지만 지금도 시각적으로 복잡한 목록 스타일을 위해 필요한 경우 더 유연하게 사용할 수 있습니다.

::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 목록