각 목록 항목 스타일을 사용자 정의하는 CSS 트릭

반응형

List style type CSS

목록은 모든 유형의 문서에서 일반적으로 사용되는 데이터 표현 형식입니다. HTML에는 순서 목록과 순서 없는 목록의 두 가지 유형이 있습니다.

정렬된 목록에서 항목은 일련 번호 또는 순서대로 된 문자로 표시됩니다. 정렬되지 않은 목록에서 목록 항목은 다양한 유형의 글머리 기호, 디스크, 원, 사각형 또는 이미지로 표시됩니다.

기본적으로 정렬된 목록 항목은 숫자로 표시되고 정렬되지 않은 목록 항목은 디스크 글머리 기호로 표시됩니다.

<!-- Unordered list -->
<ul>
    <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered list -->
<ol>
      <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

 

스타일 리스트 스타일 유형

스타일 리스트의 경우 CSS 리스트 속성이 있는데, 이 속성을 사용하여 리스트 스타일 타입, 리스트 위치를 변경하고 리스트 항목의 글머리 기호 이미지만 목록 유형으로 추가할 수 있습니다.

CSS 목록 속성

ul, ol {
    /* list-style is a shorthand property */
    list-style: list-style-type list-style-position list-style-image
}

 

• 리스트 스타일 유형 - 리스트의 글머리 기호 스타일을 변경합니다.
• 리스트 스타일 위치 - 리스트의 위치를 변경합니다(외부 및 내부 두 값).
• list-style-image - 이미지를 목록에 글머리 기호로 추가합니다. 이미지가 표시되지 않으면 목록 스타일 유형이 표시됩니다.

그래서 리스트의 글머리 기호 타입을 변경하기 위해서는 우리가 필요한 글머리 기호와 함께 CSS 목록 스타일 타입을 사용하면 됩니다. 리스트의 총알을 어떻게 바꾸는지 봅시다.

/* Unordered list */
ul {
    list-style-type: '️';
    or /* list-style: '️'; */
}

/* Orderedlist */
ol {
    list-style: ''
}

우리는 CSS 목록 스타일 값을 변경하는 것 만으로도 어떤 목록의 글머리 기호도 변경할 수 있습니다. 목록 스타일 유형의 가능한 값은 언어별 문자, 로마 숫자 등 모든 것이 될 수 있습니다. CSS에서 지원되는 다양한 목록 스타일 유형을 알아보려면 이 MDN Docs로 이동하십시오.

 

하지만 이렇게 하면 리스트의 모든 아이템에 대해 모든 스타일 타입이 같아집니다. 모든 개별 항목에 대한 스타일 유형을 사용자 정의하려면 CSS at-rule @counter-style을 사용하여 스타일을 정의해야 합니다.

개별 리스트 스타일 유형 사용자 정의

@counter-style을 사용하여 목록의 개별 항목에 대한 사용자 정의 목록 스타일 유형을 정의할 수 있습니다. 그것은 목록을 커스터마이징하기 위한 매우 많은 속성을 가지고 있습니다. 리스트 스타일 유형을 사용자 정의하기 위해 우리가 알아야 할 세 가지 중요한 속성이 있습니다.

@counter-style custom-type {
    system: cyclic;
    symbols: "";
    suffix: " ";
}

ul {
    list-style: custom-type;
    /*or list-style-type: custom-type; */
}

• system - 목록 글머리 기호 표시 방법을 정의합니다. 가능한 값은 순환, 숫자, 알파벳, 기호, 가법 또는 고정 등입니다.
• 기호 - 목록 항목에 대해 표시할 다양한 목록 스타일 유형을 지정해야 합니다. 숫자, 알파벳, 기호, 심지어 공백으로 구분된 이미지가 될 수 있다.
• 접미사 - 일반적으로 스타일 유형 뒤에 공백을 두려면 공백이어야 합니다. 여백 말고는 접미사로 아무거나 쓸 수 있다.

 

위의 모든 것을 실행해 봅시다.

<!-- Unordered list -->
<ul>
    <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<!-- Ordered list -->
<ol>
    <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>
/* style type for unordered list */
@counter-style custom-unordered {
    system: cyclic;
    symbols:  '' '️' '️' ;
    suffix: ' ';
}

/* style type for ordered list */
@counter-style custom-ordered {
    system: fixed;
    symbols: '️' '' '';
    suffix: ' ';
}

ul {
    list-style: custom-unordered;
    /* or list-style-type: custom-unordered; */
}
ol {
    list-style-type: custom-ordered;
}

매체 블로그에서 CSS를 편집할 수 없기 때문에 결과 이미지가 여기에 있습니다. 웹 페이지에서 실제 결과를 보려면 Devapt 사이트의 원본 문서를 참조하십시오.

@counter 스타일을 사용하면 개별 목록 스타일 유형을 추가할 수 있습니다. 시스템이 순환으로 정의된 경우 모든 유형이 완료된 후 동일한 리스트 스타일 유형이 반복되고, 정의된 기호 수보다 많은 항목 번호에 대한 스타일 유형이 고정된 경우 기본 스타일 유형(순서 리스트의 번호 및 순서 없는 리스트의 디스크)을 가져옵니다.

 

항목 수가 고정되어 있다는 것을 알고 있을 때만 시스템 값이 고정되어야 하며 그렇지 않으면 순환 또는 다른 유형으로 진행하는 것이 좋습니다.

참고: Safari는 이 CSS 기능을 지원하지 않는 유일한 최신 브라우저입니다. 여기서 호환성을 확인할 수 있습니다.

CSS를 사용하여 개별 리스트 아이템 타입을 스타일링하는 것은 여기까지입니다.

Twitter @wahVinci 및 Instagram @dev_apt에서 웹 개발과 기술에 대한 흥미로운 팁, 요령 및 해킹을 공유하겠습니다. 관심 있으시면 팔로우하십시오.