목록 마커 뒤의 간격에 대해 알아야 할 모든 것

나는 읽고 있었다 "크리에이티브 목록 스타일링" Google의 web.dev 블로그에서 다음 코드 예제 중 하나에서 이상한 점을 발견했습니다. ::marker 기사 섹션. 기본 제공 목록 마커는 글머리 기호, 서수 및 문자입니다. 그만큼 ::marker 의사 요소를 사용하면 이러한 마커의 스타일을 지정하거나 사용자 지정 문자 또는 이미지로 바꿀 수 있습니다.

::marker { content: url('/marker.svg') ' ';
}

내 관심을 끈 예는 목록 항목에 대한 사용자 정의 마커로 SVG 아이콘을 사용합니다. 그러나 단일 공백 ​​문자(" ") 옆에 있는 CSS 값에서 url() 기능. 이 공간의 목적은 사용자 지정 마커 뒤에 간격을 삽입하는 것 같습니다.

이 코드를 보았을 때 격차를 만드는 더 좋은 방법이 있는지 즉시 궁금해졌습니다. 다음에 공백 추가 content 최적의 솔루션보다 해결 방법처럼 느껴집니다. CSS가 제공하는 margin 과 padding 및 페이지의 요소를 간격을 두는 다른 표준 방법. 이 상황에서 이러한 속성 중 어느 것도 사용할 수 없습니까?

먼저 공백 문자를 적절한 여백으로 대체하려고 했습니다.

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

작동하지 않았습니다. 결과적으로 ::marker 만 지원합니다 주로 텍스트와 관련된 CSS 속성의 작은 세트. 예를 들어 다음을 변경할 수 있습니다. font-size 과 color 마커의 설정을 통해 사용자 지정 마커를 정의합니다. content 위와 같이 문자열 또는 URL에. 하지만 margin 과 padding 속성은 지원되지 않는이므로 설정해도 아무런 효과가 없습니다. 얼마나 실망 스럽습니까?

공백 문자가 사용자 지정 마커 뒤에 간격을 삽입하는 유일한 방법일 수 있습니까? 나는 알아낼 필요가 있었다. 이 주제를 조사하면서 이 기사에서 공유하고 싶은 몇 가지 흥미로운 발견을 했습니다.

패딩 및 여백 추가

먼저 무엇인지 확인하자 margin 과 padding 에 할 <ul> 과 <li> 강요. 이를 위해 테스트 페이지를 만들었습니다. 관련 슬라이더를 드래그하고 목록 마커의 양쪽 간격에 미치는 영향을 관찰합니다. 팁: 재설정 버튼을 자유롭게 사용하여 모든 컨트롤을 초기 값으로 재설정하십시오.

참고 : 브라우저는 기본값을 적용합니다. padding-inline-left of 40px 에 <ol> 과 <ul> 강요. 논리적 padding-inline-left 속성은 물리적 속성과 동일합니다. padding-left 왼쪽에서 오른쪽 인라인 방향이 있는 쓰기 시스템의 속성입니다. 이 기사에서는 단순화를 위해 물리적 특성을 사용하겠습니다.

당신이 볼 수 있듯이, padding-left on <li> 목록 마커 뒤의 간격을 늘립니다. 다른 세 가지 속성은 마커 왼쪽의 간격, 즉 목록 항목의 들여쓰기를 제어합니다.

목록 항목이 padding-left is 0px, 마커 뒤에 여전히 최소 간격이 있습니다. 이 격차는 margin or padding. 최소 간격의 정확한 길이는 브라우저에 따라 다릅니다.

요약하면 목록 항목의 콘텐츠는 마커에서 브라우저별 최소 거리에 배치되며 이 간격은 다음을 추가하여 더 늘릴 수 있습니다. padding-left 에 <li>.

다음으로 마커를 배치하면 어떻게 되는지 살펴보겠습니다. 내부 목록 항목.

목록 항목 내에서 마커 이동

XNUMXD덴탈의 list-style-position 속성은 두 개의 키워드를 허용합니다. outside, 기본값이며 inside, 목록 항목 내에서 마커를 이동합니다. 후자는 전체 너비 목록 항목이 있는 디자인을 만드는 데 유용합니다.

마커가 지금 내부 목록 항목은 다음을 의미합니까? padding-left on <li> 더 이상 마커 뒤의 간격을 늘리지 않습니까? 알아 보자. 내 테스트 페이지에서 켜기 list-style-position: inside 체크박스를 통해 넷은 어때? padding 과 margin 이 변경의 영향을 받는 속성은 무엇입니까?

당신이 볼 수 있듯이, padding-left on <li> 이제 간격을 증가시킵니다. 왼쪽 (left) 마커의. 이는 마커 뒤의 간격을 늘리는 기능을 상실했음을 의미합니다. 이 상황에서 추가할 수 있으면 유용합니다. margin-right ~로 ::marker 하지만 위에서 설정한 것처럼 작동하지 않습니다.

또한, Chromium의 버그 마커 뒤의 간격을 트리플 로 전환한 후 inside 포지셔닝. 기본적으로 간격의 길이는 텍스트 크기의 약 XNUMX/XNUMX입니다. 그래서 기본적으로 font-size of 16px, 격차는 약 5.5px. 로 전환 후 inside, 격차가 완전히 커집니다. 16px 크롬에서. 이 버그는 disc, circle및 square 마커, 그러나 서수가 아닌 마커.

다음 이미지는 macOS의 세 가지 주요 브라우저에서 외부 및 내부 위치 목록 마커의 기본 렌더링을 보여줍니다. 귀하의 편의를 위해 간격 크기의 차이를 더 쉽게 비교할 수 있도록 마커의 모든 목록 항목을 가로로 정렬했습니다.

요약하면 다음으로 전환 list-style-position: inside 두 가지 문제를 소개합니다. 우리는 더 이상 격차를 늘릴 수 없습니다. padding-left on <li>, 간격 크기가 브라우저 간에 일치하지 않습니다.

마지막으로 기본 목록 마커를 사용자 지정 마커로 교체하면 어떻게 되는지 살펴보겠습니다.

사용자 지정 마커로 전환

a를 정의하는 방법에는 두 가지가 있습니다. 커스텀 마커:

• list-style-type 과 list-style-image 속성
• content 재산 ::marker 의사 요소

XNUMXD덴탈의 content 재산은 더 강력합니다. 예를 들어, 다음을 사용할 수 있습니다. counter() 목록 항목의 서수에 액세스하는 기능( 절대적인 list-item 카운터) 사용자 지정 문자열로 장식합니다.

안타깝게도 Safari는 다음을 지원하지 않습니다. content 속성 ::marker 아직 (웹킷 버그). 이러한 이유로 다음을 사용하겠습니다. list-style-type 사용자 지정 마커를 정의하는 속성입니다. 당신은 여전히 ​​사용할 수 있습니다 ::marker 를 통해 선언된 사용자 지정 마커의 스타일을 지정하는 선택기 list-style-type. 그 측면의 ::marker 사파리에서 지원됩니다.

모든 유니코드 문자는 잠재적으로 사용자 지정 목록 마커 역할을 할 수 있지만 실제로 공식 이름에 "Bullet"이 포함된 소수의 문자 집합만 참조용으로 여기에서 컴파일해야 한다고 생각했습니다.

캐릭터	성함	코드 포인트	CSS 키워드
•	총알	U+2022	disc
‣	삼각 총알	U+2023
⁃	하이픈 글머리 기호	U+2043
⁌	블랙 왼쪽 총알	U+204C
⁍	블랙 Rightwards 총알	U+204D
◘	역 총알	U+25D8
◦	화이트 총알	U+25E6	circle
☙	반전된 회전 플로럴 하트 글머리 기호	U+2619
❥	회전된 무거운 블랙 하트 총알	U+2765
❧	회전 꽃 하트 총알	U+2767
⦾	동그라미 흰색 글머리 기호	U+29BE
⦿	동그라미 글머리 기호	U+29BF

참고 : CSS square 키워드에 유니코드의 해당 "Bullet" 문자가 없습니다. 가장 가까운 캐릭터는 검은색 작은 사각형(▪️) 이모티콘(U+25AA).

이제 기본 목록 마커를 list-style-type: "•" (U+2022 총알). 이것은 기본 글머리 기호와 동일한 문자이므로 큰 렌더링 차이가 없어야 합니다. 테스트 페이지에서 list-style-type 옵션을 선택하고 마커의 변경 사항을 관찰합니다.

보시다시피 두 가지 중요한 변경 사항이 있습니다.

1. 마커 뒤에는 더 이상 최소 간격이 없습니다.
2. 글머리 기호가 더 작게 렌더링된 것처럼 작아졌습니다. font-size.

에 따르면 CSS 카운터 스타일 레벨 3, 기본 목록 마커(disc)는 "다음과 유사해야 합니다. • U+2022 총알". 브라우저는 기본 글머리 기호의 크기를 늘려 더 읽기 쉽게 만드는 것 같습니다. Firefox는 특별한 글꼴을 사용하기도 합니다. -moz-bullet-font, 마커의 경우.

CSS로 작은 크기 문제를 해결할 수 있습니까? 내 테스트 페이지에서 마커 스타일을 켜고 스타일을 변경하면 어떻게 되는지 관찰합니다. font-size, line-height및 font-family 마커의.

보시다시피, 증가 font-size 사용자 지정 마커가 세로로 잘못 정렬되며 이는 line-height. 그만큼 vertical-align 이 문제를 쉽게 해결할 수 있는 속성은 다음에서 지원되지 않습니다. ::marker.

하지만 font-family 마커가 더 커질 수 있습니까? 로 설정해보세요 Tahoma. 주요 브라우저 및 운영 체제에서 어떤 글꼴이 가장 잘 작동하는지 테스트하지는 않았지만 작은 크기 문제에 대한 잠재적인 해결 방법이 될 수 있습니다.

또한 목록 항목 내부에 마커를 배치할 때 Chromium 버그가 더 이상 발생하지 않는다는 것을 알아차렸을 것입니다. 이는 사용자 지정 마커가 이 버그에 대한 해결 방법으로 사용될 수 있음을 의미합니다. 이것이 제가 이 주제를 연구하기 시작한 주요 문제와 이유에 이르게 합니다. 사용자 지정 표식을 정의하고 목록 항목 안에 배치하면 표식 뒤에 간격이 없으며 표준 방법으로 간격을 삽입할 방법이 없습니다.

1. 사용자 지정 마커 뒤에는 최소 간격이 없습니다.
2. ::marker 지원하지 않습니다 padding or margin.
3. padding-left on <li> 마커가 배치되기 때문에 간격이 늘어나지 않습니다. inside.

요약

기사에서 언급한 모든 주요 사실을 요약하면 다음과 같습니다.

1. 브라우저는 기본값을 적용합니다. padding-inline-start of 40px 에 <ul> 과 <ol> 집단.
2. 기본 제공 목록 마커(disc, decimal, 등.). 사용자 지정 마커(문자열 또는 URL) 뒤에는 최소 간격이 없습니다.
3. 간격의 길이는 다음을 추가하여 늘릴 수 있습니다. padding-left 에 <ul>, 그러나 마커가 목록 항목 외부에 있는 경우에만 가능합니다(기본 모드).
4. 사용자 지정 문자열 마커는 기본 제공 마커보다 기본 크기가 작습니다. 변경 font-family on ::marker 크기를 늘릴 수 있습니다.

결론

기사 시작 부분의 코드 예제를 다시 살펴보면 공백 문자가 있는 이유를 이제 이해한 것 같습니다. content 값. SVG 마커 뒤에 간격을 삽입하는 더 좋은 방법은 없습니다. 양이 없기 때문에 필요한 해결 방법입니다. margin 과 padding 목록 항목 내부에 위치한 사용자 지정 마커 뒤에 간격을 만들 수 있습니다. ㅏ margin-right on ::marker 쉽게 할 수 있지만 지원되지 않습니다.

까지 ::marker 더 많은 속성에 대한 지원을 추가하면 웹 개발자는 종종 마커를 숨기고 ::before 의사 요소. 마커를 변경할 수 없었기 때문에 최근에 직접 수행해야 했습니다. background-color. 바라건대, 우리는 더 강력한 ::marker 의사 요소.

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/