블로그스팟 드롭 캡(DROP CAP) : 모든 포스팅의 첫 글자를 자동으로 크게 만드는 방법

 

블로그의 품격을 높이는 '드롭 캡(Drop Cap)' 자동 적용법

글의 첫 마디가 크고 강렬하면 독자는 무의식적으로 콘텐츠의 품질이 높다고 판단합니다. 오늘은 CSS의 가상 요소(Pseudo-element) 기능을 활용해, 내가 쓴 모든 글의 첫 번째 문단, 첫 번째 글자만 자동으로 커지게 만드는 마법의 코드를 공유합니다.

✨ 이 효과의 장점

1. 완전 자동화: 한 번만 설정하면 과거에 쓴 글부터 앞으로 쓸 글까지 모두 적용됩니다.

2. 가독성 향상: 문단의 시작점을 명확히 알려주어 독자의 집중력을 유도합니다.

3. 세련된 UI: 단순한 텍스트 나열에서 벗어나 전문 잡지 같은 레이아웃을 완성합니다.

1단계: 드롭 캡 자동 적용 CSS 설정

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

아래 코드를 복사해서 붙여넣으세요. 파란색 부분의 숫자를 조절하면 글자 크기를 내 마음대로 바꿀 수 있습니다.

/* 포스팅 본문의 첫 번째 문단, 첫 번째 글자 타겟팅 */ .post-body p:first-of-type::first-letter { float: left; font-size: 3.5rem; /* 🚩 글자 크기 (숫자가 커질수록 왕글자가 됩니다) */ line-height: 1; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-weight: bold; color: #4285f4; /* 🚩 첫 글자 색상 (현재 블로그 포인트 컬러로 설정됨) */ font-family: "Georgia", serif; /* 🚩 첫 글자만 클래식한 서체로 변경 */ }

💡 디자인을 더 예쁘게 바꾸려면?
1. 색상 변경: 위 코드의 #4285f4 부분을 원하는 색상 코드로 바꾸면 첫 글자 색이 변합니다.
2. 폰트 변경: font-family 부분에 'Gungsuh'(궁서) 등을 넣으면 더 고전적인 느낌을 줄 수 있습니다.
3. 간격 조절: padding-right 값을 높이면 첫 글자와 본문 사이의 간격이 넓어집니다.

2단계: 주의사항 및 팁

이 코드는 자동이기 때문에 편리하지만, 아래 상황을 미리 체크해 두는 것이 좋습니다.

⚠️ 꼭 확인하세요!

• 첫 줄 공백 주의: 글을 시작할 때 엔터를 치거나 공백을 넣으면 효과가 적용되지 않을 수 있습니다.
• 이미지 우선: 글의 맨 처음에 이미지를 넣으면, 이미지 다음 나오는 첫 문단에 효과가 나타납니다.
• 한글/영어 공통: 한글뿐만 아니라 영어 첫 글자에도 똑같이 적용되어 아주 멋스러운 영문 포스팅을 만들 수 있습니다.