CSS letter-spacing을 사용하여 텍스트 드러내기

일부 텍스트 효과는 CSS로 구현하기가 상대적으로 어려운데, 그 주요 원인은 우리가 개별 문자를 타겟팅할 수 없기 때문입니다 (많은 이들이 ::nth-letter() 형태로 이를 원하지만, 박스 요소의 첫 번째 글리프(glyph)에 접근할 수 있게 해주는 ::first-letter가 있긴 하지만 말이죠).

하지만 아마도 우리가 이미 가지고 있는 것들로 오늘 사용할 수 있는 몇 가지 방법이 있을 것입니다.

예를 들어, CSS letter-spacing 속성은 텍스트 블록 내의 모든 문자 사이의 간격을 조정합니다. 양수 값은 각 글리프의 오른쪽(왼쪽에서 오른쪽으로 쓰는 모드 기준)에 공간을 추가하며, 음수 값은 글리프 박스의 너비를 축소시켜 글자들이 겹치게 하거나 심지어 반대 방향으로 움직이게 만듭니다.

CodePen Embed Fallback

letter-spacing은 길이 단위와 퍼센트(폰트 크스 대비 상대적 값)를 허용합니다. 이는 애니메이션화(animateable)가 가능하며, 이전에 보았듯이 음수 값은 간격을 줄이거나 반전시킬 수 있습니다. 이는 우리가 활용할 수 있는 부분입니다.

글자 겹치기 및 분리하기

시작 단계로 문자를 완전히 겹치게 만들고 color를 transparent(투명)로 설정하여 시각적으로 숨기는 것은 매우 쉽습니다.

label {
  letter-spacing: -1ch;
  color: transparent;
...

그다음, 체크박스가 :checked 상태일 때와 같이 letter-spacing 값을 양수 값으로 애니메이션화하고 color를 가시적인 값으로 업데이트함으로써 텍스트를 드러낼 수 있습니다:

li:nth-of-type(2) label {
  text-align: center;
}
...

CodePen Embed Fallback

참고: CSS ch 단위는 숫자 0(zero) 글리프의 너비를 나타내는 상대적 길이입니다.

레이블은 음수 letter-spacing에서 일반 간격으로 변하며, color는 black으로 업데이트됩니다. 이 두 가지 변화는 모두 transition을 통해 일어납니다.

두 번째와 세 번째 레이블에는 중앙(center) 및 오른쪽(right) 텍스트 정렬(text-align)이 적용되어 있어, 음수 letter-spacing이 적용될 때 각각 지정된 정렬 위치인 중앙과 오른쪽에 뭉치게 됩니다. letter-spacing이 음수에서 0(또는 양수 값)으로 변하면, 글자들이 동일한 정렬 위치로부터 분리됩니다.

이로써 텍스트가 드러나는(reveal) 효과를 얻을 수 있습니다! 몇 가지 사례를 더 살펴보겠습니다.

텍스트 보여주기 및 숨기기

이것을 확인해 보세요. 체크박스 레이블을 토글하여 재미있는 인터랙티브 UI 요소를 만들 수 있습니다.

CodePen Embed Fallback

<!-- 간결함을 위해 단순화됨; 추가적인 접근성 고려 사항 필요 -->
<input type="checkbox" id="cb">
<label for="cb">
...

label {
  overflow: clip;
  /* 기타 속성 */
...

체크박스가 체크되면, 첫 번째 <span>에 음수 letter-spacing 값(-2ch)과 text-indent 값(-1.5ch)이 사용되어 컨테이너 박스 밖으로 슬라이드되어 나갑니다. 우리는 overflow: clip을 사용하여 텍스트를 완전히 숨깁니다.

동시에, 두 번째 <span>의 텍스트는 letter-spacing 값이 -1ch에서 0ch로 변하며 텍스트가 드러납니다. -1ch 상태에서 겹쳐진 이 텍스트를 숨기기 위해 transparent 색상을 부여했으며, 체크박스가 체크되면 black으로 바뀝니다.

다른 글리프 박스(glyph box) 스타일링과 함께 사용하기

또 다른 재미있는 예시입니다. 마우스를 올렸을 때(hover) 전체 텍스트가 드러나는 약어(acronym)로 시작할 수 있습니다. 이번에도 ::first-letter와 ::first-line을 포함하여 이를 구현하는 데 도움이 되는 기존 기능들을 활용합니다.

다음 마크업으로 시작하겠습니다:

<!-- 간결함을 위해 단순화됨 -->
<p id="acronym">
  <span class="words">United</span
...

.words {
  letter-spacing: -1ch;
  color: transparent;
...

UNICEF 약어의 각 단어는 처음에 텍스트를 축소하기 위해 letter-spacing: -1ch를 설정하고, 축소된 텍스트를 숨기기 위해 color: transparent를 설정합니다. 다만, ::first-letter에는 color: black을 적용하여 나머지 텍스트가 그 아래에 겹쳐져 있음에도 불구하고 계속 보이도록 합니다.

이제 :hover 시 이미지를 타겟팅하고 전체 텍스트를 선택하여, 각 단어의 letter-spacing 값을 0ch로 줄이고 color: black을 적용함으로써 단어의 나머지 부분이 나타나도록 할 수 있습니다.

CodePen Embed Fallback

또 무엇을 할 수 있을까요?

저도 잘 모르겠습니다! 하지만 바로 그 지점에서 여러분의 역할이 시작됩니다. 분명히 가상의 ::nth-letter 선택자가 있다면 온갖 종류의 텍스트 효과를 만드는 데 놀라울 것입니다. 하지만 오늘날 letter-spacing, ::first-letter, ::first-line과 같은 기존 기능들을 사용하여 그와 유사한 형태를 만들어낼 수 있다는 점은 멋진 일입니다.

이러한 제약 사항들을 알고 있는 상태에서 여러분은 어떤 것을 만들어낼 수 있을까요?