[워드프레스 팁] 머리글자(드롭캡)으로 잡지같은 글을 만들어 보자

| Updated

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

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

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

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

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

워드프레스 구텐베르그 편집기에서 머리글자, 드롭캡(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; }

글이나 페이지 처음에 드롭캡(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 }

인용문, 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; }

서울에 생긴 Vultr 서버 100$ 프로모션 안내

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션을 진행 中입니다.

아래 이미지를 클릭해 등록할 수 있습니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

저는 2016년부터 Vultr 서버를 사용했는데요. 지금까지 잘 사용해 오고 있습니다. 아래 사용기도 참고해 보세요.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Vultr 가상서버호스팅의 새상품 High Frequency 사용기

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

해외 가상서버호스팅(VPS)이 국내 호스팅보다 빠르다? – 아이비호스팅과 해외 가상서버호스팅 VULTR간 비교

사이트 운영을 위한 안내 – 웹서버 세팅에서 워드프레스 설치까지(우분투 17.10, NGINX 1.13.6, Marian DB 10.2, PHP7.2)

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments