글을 잡지처럼 멋지게 편집하는 방법의 하나로 첫 글자를 강조해주는 머리글자, 드롭캡(Drop Cap)을 적용할 수 있는데요.

이러한 머리글자, 드롭캡(Drop Cap)은 워드프레스 구텐베르그 편집기에서 제대로 사용할 수 있는 워드프레스 팁을 살펴보죠.

구텐베르그 편집기에서 머리글자, 드롭캡(Drop Cap) 적용법

워드프레스가 야심차게 도입한 구텐베르그 편집기에서는 매우 쉽게 머리글자, 즉 드롭캡(Drop Caps)을 적용할 수 있습니다.

구텐베르그에서 글을 적는 가장 일반적인 그리고 가장 기본적인 블럭인 단락의 블럭 특징중에 Drop cap을 체크해주면 됩니다.

워드프레스 드롭캡(Drop cap) 제대로 활용하기

워드프레스 구텐베르그 편집기에서 기본으로 제공하는 드롭캡(Drop cap) 기능을 적용하다보면 뭔가 마음 안드는 부분을 발견하게 됩니다.

마음에 들지않는 것중의 하나는 너무 크다는 것이구요. 강조를 위해서 다른 강렬한, 눈길을 끌 수 있는 컬러를 사용하고 싶기도 할 때가 있습니다.

또는 좀 더 다양한 곳에서 드롭캡(Drop cap)을 적용해 보고 싶기도 합니다.

드롭캡(Drop cap) 글자 크기 조정

기본적으로 워드프레스 구텐베르그에서 지정해준 드롭캡(Drop cap)크기는 font-size:8.4em;입니다. 이는 생각보다 크기때문에 부담스럽습니다.

저는 이 기본 크기가 너무 컸기 때문에 드롭캡(Drop cap) 자체를 상요하지 않다가 드롭캡(Drop cap)에 대해서 종합적으로 재설정해 사용하고 있습니다.

드롭캡(Drop cap) 재설정은 따로 설정 메뉴가 있는 것이 아니므로 커스텀 css를 지정해야 하는데요. 일반적인 드롭캡(Drop cap) 설정을 위해서는 .has-drop-cap에 사이즈를 지정해 줍니다.

.has-drop-cap:not(:focus):first-letter {
    font-size: 4em;
}Code language: PHP (php)

글이나 페이지 처음에 드롭캡(Drop cap) 적용

대부분의 잡지는 글의 처음 부분을 큰 글자로 시작해 가독성과 주목을 끌고 있죠.

워드프레스 구텐베르그 편집기를 이용한 글의 첫 부분에 드롭캡(Drop cap)을 적용하기 위해서는 아래와 같은 커스텀 CSS 코드를 적용합니다.

드롭캡(Drop cap) 퐁트 크기, 폰트 컬러 위치 등은 적절하게 사용합니다.

.inside-article p:first-of-type:first-letter {
    float: left;
    font-size: 4em;
    line-height: .78;
    margin: .05em .1em 0 0;
    text-transform: uppercase;
    font-style: normal
}Code language: PHP (php)

인용문, block-quote에 드롭캡(Drop cap) 적용

때로는 인용문에도 자동으로 드롭캡(Drop cap) 적용하고 싶은 경우가 있습니다.

이 경우는 아래와 같은 커스텀 CSS 코드를 적용합니다.

.wp-block-quote p:first-of-type:first-letter{
    float: left;
    font-size: 2.5em;
 /*   line-height: .78; */
    margin: .05em .1em 0 0;
    text-transform: uppercase;
    font-style: italic;
}Code language: PHP (php)