CSS 목록, 마커 및 카운터

CSS의 목록에는 우리가 기대하는 표준 목록 스타일을 제공하는 특정 속성이 있습니다. 정렬되지 않은 목록에는 disc 유형의 목록 글머리 기호가 표시되고 정렬된 목록에는 번호가 매겨집니다. 목록을 더 자세히 탐색하는 데 관심을 갖게 된 것은 MDN용 ::marker 의사 요소를 문서화하기 위해 수행한 일부 작업에서 비롯되었습니다. 이 유사 요소는 Firefox 68에 포함되어 있으며 오늘 출시됩니다 . ::marker 의사 요소를 사용할 수 있으므로 목록으로 몇 가지 흥미로운 작업을 시작할 수 있습니다. 이 기사에서 더 자세히 설명하겠습니다.

목록 분해하기

목록을 마크업에서 자주 사용하지만 목록에 대해 많이 생각하지 않았을 수도 있습니다. 많은 것들이 매우 논리적으로 목록으로 표시될 수 있습니다. 단계별 지침이나 순위가 지정된 요소는 자연스럽게 정렬된 목록 <ol> 로 설명될 수 있지만 디자인의 많은 항목은 정렬되지 않은 목록 <ul> 을 사용하여 설명할 수 있습니다. 예를 들어 요소의 매우 일반적인 용도는 사이트의 대상 목록이므로 탐색을 표시하는 것입니다. 탐색을 위해 CSS에서 목록이 정확히 무엇인지 알아내는 것부터 시작하겠습니다.

CSS의 많은 항목과 마찬가지로 목록에는 몇 가지 초기 값이 적용됩니다. 이러한 값은 목록처럼 보이게 합니다. 이러한 특수 값은 목록 항목에 값이 list-item 인 display 속성이 있다는 정보로 시작됩니다. 그러면 추가 마커 상자가 있는 블록 수준 상자가 생성됩니다. 마커 상자는 목록 글머리 기호 또는 번호가 추가되는 곳입니다.

목록은 CSS 초기에 정의되었으며 오늘날 우리가 사용하는 목록 정의의 대부분은 CSS2에서 가져온 것입니다. CSS2 사양은 목록 항목을 다음과 같이 설명합니다.

" display: list-item 이 있는 요소는 요소의 내용에 대한 주요 블록 상자를 생성하고 list-style-type 및 list-style-image 값에 따라 요소를 시각적으로 표시하는 마커 상자도 생성할 수 있습니다. 목록 항목입니다."

주요 블록 상자 는 요소의 기본 상자이며 목록 항목이 다른 마크업을 포함할 수 있으므로 모든 자식을 포함합니다. 그런 다음 마커 상자가 이 주요 상자에 대해 배치됩니다. 사양은 배경색이 이 기본 상자 뒤에만 있고 마커가 아니라는 사실을 자세히 설명합니다. 또한 마커는 미리 정의된 값 범위 중 하나로 설정할 수 있습니다.

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none
• inherit

레벨 3 디스플레이 사양은 display: list-item 을 display 속성에 대해 가능한 다른 값과 함께 정의합니다. CSS2에서 가져온 많은 CSS 속성 및 값과 마찬가지로 CSS 2.1을 다시 참조하지만 list-item 키워드를 "요소가 ::marker 의사 요소를 생성하게 함"으로 설명합니다.

레벨 3 사양은 또한 display: inline list-item 이라는 두 가지 값 구문이 사용되는 인라인 목록 항목을 생성하는 기능을 소개합니다. 이것은 아직 브라우저에서 구현되지 않았습니다.

목록이 아닌 항목에 마커 상자 만들기

display 의 다른 값과 마찬가지로 HTML 요소에 list-item 의 표시 유형을 제공하는 것은 완벽하게 유효합니다(항목에 ::marker 의사 요소를 생성하려는 경우). 이렇게 하면 요소 가 의미상 목록 항목이 되지 않고 대신 시각적으로 목록 항목으로만 표시되므로 ::marker 를 가질 수 있습니다. 아래 ::marker 의사 요소에 대해 논의할 때 다른 요소에 display: list-item 을 제공하는 것이 유용할 수 있는 몇 가지 경우를 발견하게 될 것입니다.

CSS는 레벨 3 사양을 나열합니다: ::marker 및 Counters

display 사양은 CSS2에서 찾은 목록의 정의를 확장하고 명확하게 하지만 목록 동작을 자세히 정의하는 사양도 있습니다: CSS 목록 사양 레벨 3. 목록 항목의 기본 동작은 display 에 정의되어 있으므로, 사양은 정렬된 목록을 생성할 때마다 기본적으로 사용되는 카운터와 함께 display: list-item 이 있을 때 생성되는 마커 상자를 자세히 설명합니다. 이러한 기능을 통해 액세스할 수 있는 잠재적으로 유용한 기능이 있습니다.

::marker 의사 요소

::marker 의사 요소를 사용하면 목록 항목의 내용과 별도로 목록 마커를 대상으로 지정할 수 있습니다. 이것은 CSS의 이전 버전에서는 불가능했기 때문에 ul 또는 li 의 색상이나 글꼴 크기를 변경하면 마커의 색상과 글꼴 크기도 변경됩니다. 텍스트와 다른 색상 목록 글머리 기호를 사용하는 것처럼 간단해 보이는 작업을 수행하려면 목록 항목의 내용을 범위에 래핑하거나 마커에 이미지를 사용하는 작업이 필요합니다.

 ul { color: #00b7a8; } ul span { color #333; }

::marker 의사 요소를 사용하여 시도할 수 있는 가장 간단한 방법은 텍스트 색상에 다른 글머리 기호를 사용하는 것입니다. 즉, 위 예제의 코드 대신 다음을 사용할 수 있습니다.

 ul { color: #333; } ul ::marker { color: #00b7a8; }

정렬된 목록의 번호 매기기에 다른 크기와 font-family 을 사용할 수도 있습니다.

 ol ::marker { font-size: 200%; color: #00b7a8; font-family: "Comic Sans MS", cursive, sans-serif; }

내 CodePen 예제를 사용하여 지원 브라우저에서 이 모든 것을 볼 수 있습니다.

목록이 아닌 항목에 ::marker 의사 요소를 사용할 수 있습니다. 아래 코드에서 display: list-item . 이것은 총알을 제공하므로 대상에 ::marker 상자가 됩니다.

이모티콘을 사용하도록 글머리 기호를 변경했습니다.

 h1 { display: list-item; } h1::marker { content: ""; } 

위의 예에서는 마커에 대한 규칙에서 생성된 콘텐츠를 사용했습니다. CSS 속성의 작은 하위 집합만 ::marker 에서 사용할 수 있습니다. 여기에는 글꼴 속성과 색상이 포함되지만 생성된 콘텐츠를 포함하기 위한 content 속성도 포함됩니다.

::marker 에 대한 허용 속성으로 content 를 추가한 것은 최근이지만 Firefox 구현에 포함되어 있습니다. 포함이란 ::marker 에 문자열을 포함하는 것과 같은 작업을 수행할 수 있음을 의미합니다. 또한 카운터의 사용을 ::marker 와 결합할 때 마커의 형식화에 대한 추가 가능성을 높입니다.

브라우저 지원 및 대체

::marker 의사 요소를 지원하지 않는 브라우저의 경우 대체는 어쨌든 표시되는 일반 마커입니다. 불행히도 현재로서는 이 유사 요소와 같은 선택기에 대한 지원을 감지하기 위해 기능 쿼리를 사용할 수 없지만 사양에 추가하는 것과 관련하여 문제가 제기되었습니다. 즉, 지원이 있을 때 코드에서 한 가지 작업을 수행하고 지원이 없을 때 다른 작업을 수행할 수 없습니다. 대부분의 경우 일반 마커로 돌아가는 것이 합리적인 해결책이 될 것입니다.

카운터

정렬된 목록에는 목록 번호 매기기가 있습니다. 이는 CSS 카운터를 통해 달성됩니다. 따라서 CSS 목록 사양은 이러한 카운터도 설명합니다. ::marker 의사 요소와 결합하여 유용한 기능을 제공할 수 있는 카운터에 직접 액세스하고 생성할 수 있습니다. 이 카운터는 일반(비 ::marker ) 생성 콘텐츠에서도 사용할 수 있습니다.

번호가 매겨진 단계 목록이 있는 경우("1단계", "2단계" 등을 작성하고 싶은 경우) 마커에 생성된 콘텐츠를 사용하고 list-item 카운터를 추가하여 이 작업을 수행할 수 있습니다. 이것은 내장 카운터를 나타냅니다.

 ::marker { content: "Step " counter(list-item) ": "; } 

중첩 카운터

중첩 목록이 있는 경우 목록에 번호를 지정하는 일반적인 방법은 최상위 항목에 정수(1)를 지정하고 자식 항목을 (1.1, 1.2)로, 자식 항목(1.1.1, 1.1.2)을 지정하는 것입니다. 등등. 카운터의 더 많은 기능을 사용하여 이를 달성할 수 있습니다.

HTML 목록을 중첩하면 동일한 이름의 여러 카운터가 생성되며 서로 중첩됩니다. 카운터의 중첩은 counters() 함수를 사용하여 액세스할 수 있습니다.

아래 코드에서 나는 counters() 를 사용하여 위에서 설명한 대로 내 목록 마커의 형식을 지정합니다. counters() 의 첫 번째 인수는 사용할 카운터의 이름입니다. 내장된 list-item 카운터를 사용하고 있습니다. 두 번째 인수는 문자열입니다. 이것은 출력 카운터 사이에 연결될 것입니다(저는 .를 사용하고 . ). 마지막으로 카운터 함수 외부에 있지만 content 값 내부에 : 를 추가하여 카운터 출력이 내용과 콜론으로 구분되도록 합니다.

 ::marker { content: counters(list-item,'.') ':'; color: #00b7a8; font-weight: bold; }

이것은 이미지와 같은 출력을 제공합니다. ::marker 및 카운터를 지원하는 브라우저를 사용하는 경우 CodePen 예제에서 작동하는 것을 볼 수 있습니다 . 출력을 변경하는 방법을 보려면 다른 항목으로 이동합니다.

counter() 와 counters() 의 차이점은 무엇입니까?

첫 번째 예제에서 단계를 작성하기 위해 사용한 counter() 함수는 가장 안쪽 카운터만 사용합니다. 따라서 중첩 목록 집합이 있는 상황에서 현재 있는 수준과 관련된 카운터를 작성합니다.

counters() 함수는 기본적으로 전체 분기를 작성하고 분기의 카운터 간에 문자열을 연결할 수 있는 기회를 제공합니다. 따라서 카운터가 2 인 목록 항목(카운터가 4 인 목록 항목 안에 중첩된 목록의 일부임)이 있는 경우 분기에는 다음이 포함됩니다.

• 4
• 2

다음을 사용하여 마커에서 이것을 4.2 로 출력할 수 있습니다.

 ::marker { content: counters(list-item,'.'); }

다른 요소에 대한 카운터

카운터는 목록이 아닌 항목에 사용할 수 있습니다. 마커를 출력하는 경우 이 경우 요소에 display: list-item 이 있어야 하거나 생성된 일반 콘텐츠를 출력해야 합니다. 카운터는 장 및 그림 번호 매기기 다른 것들을 활성화하기 위해 책 제작에서 광범위하게 사용됩니다. 특히 긴 기사의 경우 웹에서 유사한 접근 방식을 취하지 않을 이유가 없습니다.

이러한 카운터를 처리하는 CSS 목록 사양에 정의된 CSS 속성은 다음과 같습니다.

• counter-set
• counter-reset
• counter-increment

이것이 목록 외부에서 어떻게 작동하는지 보기 위해 문서의 제목에 번호를 매기기 위해 카운터를 사용하는 예를 볼 수 있습니다.

내가 해야 할 첫 번째 일은 사용할 준비가 된 body 요소의 헤더에 대한 카운터를 만드는 것입니다. 나는 이것을 하기 위해 counter-reset 속성을 사용하고 있습니다. counter-reset 및 counter-set 속성은 매우 유사합니다. counter-reset 속성은 지정된 이름의 카운터가 아직 존재하지 않는 경우 새 카운터를 생성하지만 해당 이름의 카운터가 존재하는 경우 위에서 설명한 대로 중첩 카운터도 생성합니다. counter-set 속성은 해당 이름의 카운터가 없는 경우에만 새 카운터를 만듭니다. 이를 위해 두 속성 중 하나를 사용하면 잘 작동하지만 counter-set 은 counter-reset 만큼 좋은 브라우저 지원을 제공하지 않으므로 실용적인 경로를 택하겠습니다.

 body { counter-reset: heading-counter; }

이제 카운터가 있으므로 헤더에 대한 선택기의 counter-increment 속성을 사용할 수 있습니다. 이것은 선택기가 일치할 때마다 카운터를 증가시켜야 합니다.

 h2 { counter-increment: heading-counter; }

값을 보려면 문서로 출력해야 합니다. 다음 CodePen 예제와 같이 생성된 콘텐츠를 사용하고 제목 before 추가하여 이 작업을 수행할 수 있습니다.

 h2::before { content: counter(heading-counter) ": "; color: #00b7a8; font-weight: bold; } 

또는 아래에 설명된 대로 h2 요소를 list-item 으로 만든 다음 ::marker 를 사용할 수 있습니다. 이미 자세히 설명했듯이 ::marker 요소를 사용하면 브라우저 지원이 제한됩니다. Firefox에서는 표제 표시로 사용되는 카운터를 볼 수 있지만 다른 브라우저에서는 기본 글머리 기호를 표시합니다.

 h2 { display: list-item; } h2::marker { content: counter(heading-counter) ": "; color: #00b7a8; font-weight: bold; } 

양식 요소의 카운터

CSS 카운터를 사용하여 달성할 수 있는 약간의 상호 작용도 있습니다. 이는 JavaScript가 필요하다고 생각할 수 있는 것입니다.

여러 필수 필드가 있는 양식이 있습니다. 필수 상태는 CSS에서 :required 의사 클래스를 사용하여 선택할 수 있으며 필드가 완료되지 않았다는 사실은 :invalid 의사 클래스를 통해 감지할 수 있습니다. 이것은 필수 필드와 유효하지 않은 필드를 모두 확인하고 카운터를 증가시킬 수 있음을 의미합니다. 그런 다음 생성된 콘텐츠로 출력합니다.

이것이 실제로 얼마나 유용한지는 논쟁의 여지가 있습니다. 생성된 콘텐츠에 넣는 것 외에는 그 값으로 아무 것도 할 수 없다는 점을 감안할 때입니다. 또한 생성된 콘텐츠가 특정 화면 판독기에서 액세스할 수 없는 것과 관련하여 우려가 있으므로 장식 이상의 사용은 해당 정보에 액세스하는 다른 방법을 보장해야 합니다. 접근성 및 생성된 콘텐츠에 대한 자세한 내용은 "CSS 생성 콘텐츠에 대한 접근성 지원" 및 최신 정보인 "CSS 콘텐츠 속성 화면 판독기 호환성"을 참조하십시오.

그러나 카운터가 단순히 목록에 번호를 매기는 것보다 더 유용한 것을 얻을 수 있음을 보여줍니다. 언젠가는 지식이 당신이 하고 있는 어떤 문제를 해결하는 데 도움이 될 수 있습니다.

더 찾아 봐

이 기사는 내가 설명한 모든 것이 CSS 목록 사양에서 발견된다는 사실에도 불구하고 스타일 목록에서 다소 먼 길을 마쳤습니다. 아래 링크에서 설명된 내용에 대한 자세한 정보를 찾을 수 있습니다. CSS 카운터의 흥미로운 용도를 찾았거나 ::marker 를 사용할 수 있는 것에 대해 생각할 수 있다면 주석에 메모를 추가하세요.

• ::marker
• counter-set
• counter-reset
• counter-increment
• "CSS 카운터 사용", MDN 웹 문서
• "CSS 카운터와 CSS 그리드로 계산", CSS-Tricks