CSS initial-letter 속성을 사용하면 훨씬 더 쉽게 작업할 수 있습니다.
브라우저 지원
어디에서 initial-letter을(를) 사용해 볼 수 있나요? Safari 및 Chrome 110부터 사용할 수 있습니다. Safari에서는 속성에 -webkit- 접두사가 필요합니다. Firefox에서 이 기능을 구현하는 데 미해결 문제가 있습니다.
다음을 사용하여 initial-letter 지원을 테스트합니다.
@supports (initial-letter: 1 1) { /* Your supported styles */ }
현재 솔루션
현재 CSS에서 드롭 캡의 스타일을 어떻게 지정할 수 있을까요?
::first-letter 의사 요소를 통해 이러한 작업을 수행할 수 있습니다.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
그러나 첫 번째 글자의 크기를 계산할 때 '부동 소수점 수'와 같은 속성에 도달해야 할 수 있습니다.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
lh와 같은 새로운 CSS 단위를 도입하면 이러한 문제를 어느 정도 완화할 수 있습니다. 하지만 이러한 기능도 제한적으로 지원됩니다 (lh는 현재 Chrome에서만 지원됩니다).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
첫 글자 소개
initial-letter 속성을 사용하면 이 드롭 캡 스타일을 더 세밀하게 제어할 수 있습니다. 공백으로 구분된 다음 두 개의 값을 사용합니다.
p::first-letter {
initial-letter: 3.5 3;
}
- 첫 번째 인수는 문자의 크기와 문자가 차지할 줄 수를 정의합니다. 글자는 가로세로 비율을 유지하면서 확장됩니다. 음수 값은 사용할 수 없지만 소수점 값은 사용할 수 있습니다.
- 두 번째 인수는 문자 싱크를 정의합니다. 이는 문자가 위치할 오프셋으로 생각할 수 있습니다. 두 번째 값은 선택사항이며 음수가 될 수 없습니다. 이 값이 없는 경우 가장 가까운 정수로 내림된 문자 크기 값을 가정합니다. 이는 키워드 'drop'을 사용하는 것과 같습니다. 이 싱크는 1의 싱크에 해당하는 'raise'라는 다른 키워드 값도 허용합니다.
이 데모에서 값을 변경하여 드롭 캡 스타일 지정에 어떤 영향을 미치는지 확인하세요.
::first-line와 결합하면 다음과 같은 결과를 얻을 수 있습니다.
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
또는 border를 지정할 수도 있습니다. 다음 예에서 생략된 경우 기본값이 되고 3과 동일한 'drop' 키워드를 사용하는 방법을 확인하세요.
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
background 또는 box-shadow를 추가할 수도 있습니다.
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
또는 다음과 같이 배경을 텍스트에 맞게 자릅니다.
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
무한한 가능성
이제 initial-letter를 사용하여 드롭 캡 스타일을 더 세밀하게 제어할 수 있습니다. 서체에 드롭 대문자를 추가하시겠어요? 어떤 스타일로 꾸미면 좋을까요? Google에 알려주세요.