워드프레스 테마 설치까지 마치셨다면 이제 거의 다 만드신 거나 다름없어요. 이제부터는 내 취향에 맞춰 디자인을 조금씩 다듬어 볼 차례인데요. 코딩을 전혀 몰라도 걱정하지 마세요. ‘사용자 정의’ 메뉴에서 몇 가지 설정만 살짝 바꿔주면 누구나 멋지게 수정할 수 있거든요.
폰트 크기부터 조절해 볼까요?
블로그를 처음 꾸밀 때 가장 먼저 눈에 들어오고, 또 쉽게 바꿀 수 있는 부분이 바로 글자 크기인 것 같아요. 워드프레스 기본 설정은 우리가 보통 보는 한국 블로그보다 폰트가 조금 큼지막하게 잡혀있는 편인데요. 지금 크기가 보기에 편하다면 굳이 손댈 필요는 없지만, 나중에라도 스타일을 바꾸고 싶을 때를 대비해 기본적인 방법은 알아두시는 게 좋아요.
복잡한 FTP 대신 쉬운 방법으로
보통 CSS를 수정한다고 하면 파일질라 같은 프로그램을 써서 서버에 접속해야 한다고 생각하시는데, 처음 시작하는 분들에게는 너무 복잡하고 어렵게 느껴질 수 있어요. 원본 파일을 직접 건드리는 건 나중에 익숙해지면 해도 늦지 않으니, 지금은 훨씬 간편하고 안전한 방법을 사용해 볼게요.
사용자 정의 메뉴 활용하기
워드프레스 관리자 화면 상단을 보면 “사용자 정의”라는 메뉴가 있어요. 여기를 누르고 하단으로 내려가면 “추가 CSS”라는 입력창이 나오는데요. 여기에 원하는 코드를 복사해서 넣기만 하면 바로 적용된답니다. 정말 간단하죠?
폰트 단위 PX, EM, REM 차이점
폰트 크기를 조절할 때는 보통 세 가지 단위를 사용해요. 각각 어떤 특징이 있는지 가볍게 살펴볼게요.
PX는 픽셀 단위로 정확한 크기를 정할 수 있어서 직관적이지만, 요즘처럼 다양한 화면 크기에서는 유연하게 반응하기 힘들 수 있어요.
EM은 상위 요소를 기준으로 변하는 상대적인 단위라서 유연하긴 하지만, 구조가 복잡해지면 계산하기 머리 아플 수 있죠.
REM은 최상위 요소를 기준으로 하니까 계산하기도 편하고, 모바일 환경에서도 아주 잘 작동해서 제가 가장 추천하는 방식이에요.
아래 코드를 복사해서 아까 말씀드린 ‘추가 CSS’ 칸에 넣어보세요. 숫자를 조금씩 바꿔가면서 내 블로그에 딱 맞는 크기를 찾아보시면 좋아요.
h1 { font-size: 2.625rem; /* 42px */ }
h2 { font-size: 2.1875rem; /* 35px */}
h3 { font-size: 1.8125rem; /* 29px */ }
h4 { font-size: 1.5rem; /* 24px */ }
h5 { font-size: 1.25rem; /* 20px */ }
h6 { font-size: 1.15rem; /* 18.4px */ }
p { font-size: 1rem; /* 16px */ }제목 태그 디자인 예시
단순히 크기만 바꾸는 게 아니라 조금 더 멋을 부려볼 수도 있어요. 아래 코드는 소제목(H4)의 크기를 24px 정도로 맞추고, 제목 앞에 작은 동그라미 장식을 달아주는 스타일이에요. 이렇게 하면 글을 읽을 때 시선이 더 잘 집중되는 효과가 있답니다.
h4 { font-size: 1.5rem; /* 24px */ }
h4::before {
content: '\25CF';
color: #555;
font-size: 1.1em;
line-height: 1.2em;
padding-right: 5px;
}
