CSS 초기 문자로 감소 한도 관리

Jhey Tompkins
자음 첫 글자 스타일 지정은 수천 년이 아니더라도 수백 년 동안 사용되어 왔습니다. 인쇄 스타일에서 새 섹션이나 장의 시작을 나타내는 데 사용된 사례는 역사를 통해 확인할 수 있습니다. 하지만 디지털 시대에 스타일을 지정하는 일은 항상 문제가 되었습니다. 스타일을 지정하는 '깔끔한' 솔루션이 없었습니다.

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 소개

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에 알려주세요.