CSS 사용자 지정 번호 매기기 목록 스타일 지정

다른 날 우리는 emoji list을 만들었습니다. 그리고 CSS 카운터라는 또 다른 강력한 CSS 속성을 포함하고 싶었습니다.

이것이 Codepen의 최종 결과입니다.

CSS 카운터는 무엇입니까?

그것들은 CSS에 의해 제어되는 변수이며, 그 값은 특정 CSS 규칙에 의해 증가할 수 있습니다.
CSS 에서 다음 속성을 사용할 수 있습니다.

content -> counter() 속성을 배치하는 데 사용됩니다.

counter-reset -> 카운터를 만들거나 재설정합니다

.

counter-increment -> 특정 카운터 증가

counter() -> 요소에 값을 추가합니다

.

HTML 구조

두 개의 목록을 사용하여 매우 간단한 예를 만들어 보겠습니다. 각 목록이 카운터를 다시 시작하도록 합니다.

<div>
  <ol>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
    <li>Item #5</li>
  </ol>
</div>
<div>
  <ol>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
    <li>Item #5</li>
  </ol>
</div>

CSS 카운터 스타일링

이제 CSS 카운터를 어떻게 사용합니까?
<ol> 요소부터 시작하겠습니다.

ol {
  counter-reset: custom;
  list-style-type: none;
  padding: 0;
  margin: 0px 20px;
}

custom라는 목록 카운터를 재설정하는 것으로 시작합니다.
그런 다음 이 사용자 지정 스타일을 추가할 예정이므로 기본 목록 스타일을 제거합니다.

이제 <li> 스타일링으로 넘어갈 수 있습니다.

ol li {
  counter-increment: custom;
  padding: 15px 0;
  display: flex;
  align-items: center;
}

여기에서 사용자 정의 카운터를 증가시키고 기본 패딩 및 정렬을 추가합니다.

이제 before pseudo element 에서 이 카운터를 실제로 사용해야 합니다.

ol li:before {
  content: counters(custom,".") " ";
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background: purple;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

보시다시피 콘텐츠 요소에 맞춤 카운터를 배치합니다.
그런 다음 기본 스타일을 추가하여 조금 더 멋지게 보이도록 합니다.

flex options to style everything centered 을 많이 사용하고 있습니다.

몇 가지 놀라운 예

이제 제 소개를 보셨으니 멋진 사람들이 이 멋진CSS 속성으로 무엇을 만들었는지 확인하세요.

이 멋진 그라디언트를 확인하십시오.



또는 이 섹션 레이아웃은



또는 카운터가 있는 터무니없이 좋은 Tic-Tac-Toe

브라우저 지원

좋은 소식은?

CSS 카운터가 완전히 지원됩니다! 🎉

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나