명세서가 꼭 심심해야 하는 것은 아니다.
새로운 ::marker 위조 원소가 생겨서 재미있게 만드는 것도 고통스럽지 않다.이 위조원소browser support는 과거에는 불연속적이었지만 Chrome 86에 첨가되면 곧 통용될 것이다.
나는 너희들에게 어떻게 너희들의 명세서를 돋보이게 하는지 보여줄 것이다.
우리는 다음을 포함할 것이다.

내장 목록 스타일

목록 표시 색상 변경

이모티콘 목록 글머리 기호

CSS 카운터

이미지 글머리 기호 사용자 정의

사용 ::before 전체 사용자 정의 목록 태그

기본 스타일

우선 내장 스타일을 사용하여 목록 표시의 외관을 변경합시다.우리는 list-style-type 속성을 사용하여 실현한다.질서정연한 목록과 무질서한 목록은 선택할 수 있는 스타일 옵션이 있습니다.

이것들은 단지 가장 흔히 볼 수 있는 선택일 뿐이다.DN에서 찾을 수 있습니다full list.

사용자 정의 스타일

::marker 위조 요소는 목록 태그의 스타일 (글머리 기호/숫자) 을 변경할 수 있습니다.CSS 속성의 하위 집합을 사용합니다.허용되는 속성은 다음과 같습니다.

모든 속성 (글꼴 크기, 글꼴 시리즈 등)

font

color 및 animation 재산

transition , direction , text-combine-upright

및 unicode-bidi

우리가 그것이 무엇을 할 수 있는지 봅시다.

🌈 색상 변경

목록을 더 좋게 보이는 가장 기본적인 방법은 목록 표시의 색을 바꾸는 것이다.우리는 일반 텍스트의 색깔을 바꾸는 것처럼 이렇게 할 수 있다.

오래된 브라우저를 지원하려면 어떻게 해야 합니까?색상을 content 에 적용하고 텍스트를 다른 요소로 포장할 수 있습니다.이렇게
HTML

<ul>
  <li><span class="text-wrapper">Muffin candy canes<span></li>
  <li><span class="text-wrapper">Fruitcake powder cookie<span></li> 
  <li><span class="text-wrapper">Biscuit muffin liquorice<span></li>
</ul>

CSS

ul { color: #0E6FC9; }
.text-wrapper { color: black; }

또는 li를 사용하여 완전히 사용자 정의된 태그를 만듭니다.나중에 자세히 설명합니다.

사용자 정의 텍스트

그래, 하지만 ::before 할 수 있는 건 색깔을 바꾸는 거야?
아니오, 결코 그렇지 않습니다.이것은 우리가 목록에 표시된 내용을 변경할 수 있도록 적절한 이름 ::marker 속성을 사용할 수 있도록 합니다.

위에서 언급한 유니코드 기호, 심지어 이모티콘을 포함한 모든 텍스트content를 사용할 수 있습니다...

🔫 이모티콘 총알

위에서 말한 바와 같이 너는 이모티콘을 목록 표시로 사용할 수 있다.

li::marker {
  content: "😁"
}

하지만 모든 목록 항목에 똑같은 이모티콘을 사용하고 싶지 않을 수도 있다.이 문제를 해결하기 위해 우리는 HTML의 content 속성에서 표정을 설정할 수 있다.

<ul>
  <li data-emoji="🤪">Oat cake jelly beans</li>
  <li data-emoji="😴">Croissant cotton candy</li> 
  <li data-emoji="🤠">Jelly beans muffin tiramisu</li>
</ul>

함수를 사용하여 CSS에서 읽어들입니다.

li::marker {
  content: attr(data-emoji);
}

우리는 심지어 data-*pseudo-class를 사용하여 정지 표시의 내용을 변경할 수 있다.

li:hover::marker {
  content: "🤯";
}

결과는 다음과 같다.

네, 그런데 서열표가 있는데요?우리가 이렇게 그들이 표시한 내용을 바꿀 수 있습니까?

정렬 목록 사용자 정의

서열표가 표시된 내용을 바꾸려면, 우리는 그것이 어느 항목에 속하는지 알아야 한다.우리는 그것이 목록에 있는 위치를 알아야 한다.여기가 바로 CSS counters 나타난 곳이다.
목록에 계수기를 만들고 목록 항목마다 늘려야 합니다.그런 다음 CSS 함수를 사용하여 카운터의 현재 값을 검색합니다.우리는 이 함수의 결과를 attr() 속성의 값으로 사용한다.

/* Import fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway&family=Sigmar+One&display=swap');

ol {
  list-style-position: inside;
  /* Start counter */
  counter-reset: list;
}

li {
  font-family: 'Raleway', sans-serif;
  /* Increment counter on each list item */
  counter-increment: list;
}

li::marker {
  font-family: "Sigmar One", cursive;
  /* Use counter to display the current number */
  content: "Step " counter(list) ". ";
}

코드를 훑어보고 무슨 일이 일어났는지 알아보자.
우리는 :hover 이라는 새 계수기를 만듭니다.이 이름은 임의의 것이니 완전히 네가 결정해라.그런데 왜 이 속성을 계수기 리셋이라고 합니까?계수기는 사실상 전역적이기 때문에, 우리는 모든 목록에서 그 값을 초기화해야 한다.이것이 바로 우리가 목록 항목이 아니라 counter() 에 설정해야 하는 이유입니다.
우리는 이미 계수기를 만들었지만, 만약 그것의 가치가 영원히 변하지 않는다면, 그것은 쓸모가 없을 것이다.우리는 모든 목록 항목에 그것을 추가해야 한다.이를 위해 content 에 counter-reset 를 설정합니다.
현재 우리는 자동으로 증가하는 값을 가지고 있으며, 우리는 표시된 list 속성에서 그것을 사용한다.여기가 신기하게 일어난 곳이야.우리는 카운터의 값을 다른 문자열과 조합할 수 있으며, 공백으로 구분할 수 있습니다.
몇 가지 참고 사항:

이 예에서 나는 Google Fonts에서 글꼴을 가져왔다.이것은 필요하지 않지만, 목록 항목의 내용과 표시를 구분하기 위해 사용합니다.

예시에서 표시된 내용이 매우 길기 때문에 어떤 경우에는 화면을 떠날 수 있습니다.이것이 바로 내가 ol 목록 항목의 상자 안에서 표시를 이동하는 이유이다.

계수기 이름 뒤에 다른 값부터 숫자를 놓을 수 있습니다.그것은 보기에 이렇다. counter-increment: list;, 목록의 세 항목에는 숫자 6, 7, 8이 있을 것이다.

계수기는 목록뿐만 아니라 모든 html 요소에 사용할 수 있다.

이미지 글머리 기호 사용자 정의

알겠습니다. 목록 표시의 색깔, 스타일, 텍스트 내용을 변경할 수 있습니다. 하지만 완전히 맞춤화된 것을 원한다면?우리는 그림을 사용해야 한다.
이를 위해 CSS 함수를 사용하여 이미지를 태그로 설정합니다.

전체 사용자 정의 목록 태그

만약 위의 모든 옵션이 여전히 부족하다면, 또 하나의 옵션이 있다.그것은 우리가 목록으로 우리가 하고 싶은 일을 표시할 수 있도록 한다.이것은 더 많은 일과 약간의 기교가 필요하지만, 만약 다른 모든 것이 실패한다면 이것은 유용하다.
우리는 <li> 위조 원소를 사용하여 우리의 표시를 만들 수 있다.이 방법을 사용하면 태그를 위한 사용자 정의 배경을 만들고 이미지 항목 기호를 쉽게 축소할 수 있습니다.

기본값 지우기

자신의 태그를 만들기 전에 기본 태그를 제거해야 합니다.

ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

이것은 우리에게 공백 화포를 주었다.

Note: This can create accessibility issues, so you should add role="list" to the list in your HTML

<ol role="list">
  <li>Latvia</li>
  <li>China</li>
  <li>Portugal</li>
</ol>

태그 만들기

content 를 사용하면 list-style-position: inside; 의 하위 집합뿐만 아니라 모든 CSS 속성에 액세스할 수 있습니다.

단, 태그의 내용, 태그와 목록 항목 텍스트 사이의 간격, 정확한 정렬 방식을 설정해야 합니다.

예를 들면, 다음은 어떻게 객관적으로 가장 보기 좋은 목록을 만드는가이다.주석에 설명이 포함되어 있습니다.

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

body {  
  background: center/contain no-repeat linear-gradient(135deg, red,orange,yellow,green,blue,violet); 
  color: red;
  font: italic bold 3.2rem cursive;
  text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black;
  letter-spacing: 3px;
}

ol {
  /* Remove defaults */
  margin: 0;
  padding: 0;
  list-style: none;

  /* Use CSS grid for spacing between list items */
  display: grid;
  gap: 20px;

  /* Create counter */
  counter-reset: list;
}

li {
  /* Use CSS grid for spacing between marker and list item contents */
  display: grid;
  grid-template-columns: min-content 500px;
  column-gap: 20px;

  /* Increment counter */
  counter-increment: list;
}

li::before {
  /* Set content to an empty string */
  content: counter(list);

  /* Add a background image for the marker */
  background: center/contain no-repeat url("path/to/image.png");

  /* Add animation */
  animation: 3s linear 1s infinite spin;

  /* Create the box and center its contents */
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Additional text styles */
  color: white;
}

위의 코드는 다음과 같습니다.

몇 가지 주의사항

태그 이미지의 background 속성을 사용하면 더욱 쉽게 축소하고 조정할 수 있습니다.

& counter-reset: list 5; 를 사용하여 무질서한 목록에 사용자 정의 이미지 항목 기호를 만들려면 태그를 렌더링하려면 url() 를 설정해야 합니다.

그뿐입니다. 당신은 현재 목록 스타일의 대가입니다.
읽어주셔서 감사합니다.나는 네가 유용한 것을 좀 배웠으면 좋겠다.만약 당신에게 무슨 문제가 있으면 평론에서 질문하세요.

다른 네가 좋아할 만한 문장

CSS 그라데이션 엔드 가이드

Mateusz Hadryś・ 20년 12월 29일・ 6분 읽기

#css #tutorial #webdev #design

Windows에서 여러 버전의 node를 사용하는 방법

Mateusz Hadryś・ 2019년 6월 15일・ 2분 읽기

#node #javascript #webdev #tutorial