블로그스팟 디자인 팁: 잡지처럼 세련된 '박스형 드롭 캡' 자동 설정법

 

강렬한 포인트! 사각형 박스 형태의 '드롭 캡' 자동 적용법

단순히 글자만 키우는 것이 심심하다면, 첫 글자에 배경색을 넣어보세요. 시각적으로 훨씬 강조될 뿐만 아니라 블로그의 전체적인 브랜드 이미지를 독자에게 각인시키는 데 매우 효과적입니다.

1단계: 박스형 드롭 캡 CSS 설정

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

아래 코드를 복사해서 붙여넣으세요. 빨간색은 박스 색상, 파란색은 글자 크기를 조절하는 부분입니다.

/* 박스 형태의 드롭 캡 설정 */ .post-body p:first-of-type::first-letter { float: left; font-size: 2.8rem; /* 🚩 글자 크기 */ line-height: 1; font-weight: bold; margin-right: 10px; margin-top: 5px; padding: 8px 12px; /* 🚩 박스 안쪽 여백 (글자 주변 공간) */ background-color: #4285f4; /* 🚩 박스 배경색 (현재 파란색) */ color: #ffffff; /* 🚩 박스 안 글자색 (보통 흰색이 가장 예뻐요) */ border-radius: 4px; /* 🚩 박스 모서리 둥글게 (0이면 직각) */ text-transform: uppercase; }

💡 내 블로그에 맞게 커스텀하는 법
1. 완전한 원형 만들기: border-radius 값을 50%로 바꾸면 동그란 원 안에 글자가 들어갑니다.
2. 부드러운 파스텔 톤: 배경색을 연하게 하고 글자색을 검정으로 바꾸면 훨씬 차분한 느낌을 줍니다.
3. 폰트 굵기: font-weight를 900으로 설정하면 더 꽉 찬 박스 느낌을 낼 수 있습니다.

2단계: 깔끔하게 적용되었는지 확인하기

설정을 마치고 글을 새로고침해 보세요. 첫 글자가 지정한 색상의 박스 안에 쏙 들어가 있다면 성공입니다!

⚠️ 주의사항
첫 문단에 인용구(Blockquote)나 이미지가 먼저 오면 인식이 안 될 수 있습니다. 텍스트로 시작하는 첫 문단에 이 효과가 적용되도록 글 구성을 확인해 주세요.