워드프레스: 첫 글자를 크게 표시하기 (드롭 캡 기능)

Last Updated: 2022년 11월 25일 댓글
무료 전자책 애드센스 웨비나

어릴 적, 각 단원의 첫 글자를 돋보이는 스타일로 크게 표시된 책을 보고 신기하게 여겼던 기억이 있습니다.

워드프레스: 첫 글자를 크게 표시하기 - 드롭 캡

이렇게 첫 글자를 크게 표시하는 것을 드롭 캡(머리글자) 기능이라고 합니다. 워드프레스에서는 각 문단(단락)의 첫 글자를 큰 글씨체로 표시하는 드롭 캡 옵션을 제공합니다. 드롭 캡으로 첫 글자를 강조 표시하여 오래된 고전 서적이나 잡지와 같은 멋진 편집 효과를 낼 수 있습니다.

워드프레스: 첫 글자를 크게 표시하는 방법 - 드롭캡 기능 사용하기

워드프레스 기본 에디터인 블록 에디터(구텐베르크)를 사용하는 경우 문단 블록에서 첫 글자를 크게 표시하는 드롭 캡(머리글자) 기능을 적용할 수 있습니다.

워드프레스 본문에서 문단의 첫 글자를 크게 표시하기

문단의 첫 글자를 큰 글자로 표시하려면 문단 블록 설정에서 서체 옵션 옆의 세 개 점으로 된 아이콘을 클릭합니다. 아래 그림과 같이 드롭다운 메뉴가 표시되면 드롭 캡을 클릭합니다.

워드프레스 드롭 캡 기능 활성화

그러면 드롭 캡을 활성화할 수 있는 옵션이 표시됩니다. 드롭 캡 왼쪽의 단추를 클릭하여 머리글자 기능을 활성화합니다.

드롭 캡 스타일 변경하기

블록 에디터의 문단 블록에서 드롭 캡을 제어하는 CSS 스타일은 다음과 같습니다.

.has-drop-cap:not(:focus):first-letter {
    float: left;
    font-size: 8.4em;
    line-height: .68;
    font-weight: 100;
    margin: .05em .1em 0 0;
    text-transform: uppercase;
    font-style: normal;
}

기본 드롭 캡 스타일이 마음에 들지 않을 경우 커스텀 CSS 코드를 추가하여 조정할 수 있습니다.

예를 들어, 저는 다음과 같은 CSS 코드로 드롭 캡의 글자 크기를 변경하여 사용하고 있습니다.

/* 워드프레스 드롭 캡 스타일 변경하기 */
/* Change Drop cap style in WrodPress */

.has-drop-cap:not(:focus):first-letter {
    font-size: 5.2em;
    font-weight: 500;
    margin: .15em .1em 0 0;
}

기본 드롭 캡 스타일이 마음에 들지 않을 경우 CSS 코드를 사용하여 적절히 변경하시기 바랍니다.

마치며

이상으로 워드프레스에서 문단의 첫 글자를 크게 표시하는 드롭 캡 기능을 적용하는 방법에 대하여 살펴보았습니다.

이 기능은 블록 에디터에서만 제공되며, 고전 편집기(클래식 에디터)를 사용하는 경우에는 문단의 첫 글자를 머리글자로 바꾸는 CSS 코드(본문 참조)를 추가하여 테스트해볼 수 있을 것입니다.

하지만 워드프레스 5.0 이상에서는 블록 에디터(구텐베르크)가 기본 에디터로 탑재되어 있고, 고전 편집기 플러그인은 공식적으로는 2022년 말까지만 유지되고 이후에는 계속 유지관리될지 여부가 불투명하므로 가급적 블록 에디터를 사용하시기 바랍니다.

참고

댓글 남기기

Leave a Comment