지난 12편에서 HTML과 CSS가 만나는 <style> 태그의 기초를 배웠죠? 이제 본격적으로 내 블로그의 인상을 좌우하는 [글자 꾸미기]를 해볼 차례입니다.
블로그의 핵심은 '독자가 편하게 읽을 수 있는가'입니다. 오늘은 그 가독성을 완성하는 핵심 기술, 글자 색상과 폰트 크기를 정복해 봅시다!
[글자 색상 (color): 톤앤매너 설정]
많은 분이 글자를 눈에 띄게 하려고 빨간색, 파란색을 남발합니다. 하지만 전문적인 정보성 블로그라면 '눈이 편한 색'을 선택하는 것이 정답입니다.
기본 색상:
#333333(완전한 검은색보다 약간 부드러운 짙은 회색)강조 색상:
#007bff(신뢰감을 주는 파란색 계열)
CSS로 색상을 바꿀 때는 color 속성을 사용합니다.
p {
color: #333333; /* 글자색을 짙은 회색으로 */
}
strong {
color: #d9534f; /* 강조 태그는 눈에 띄게 붉은 계열로 */
}
[폰트 크기 (font-size): 모바일 시대의 필수]
요즘은 블로그를 PC보다 스마트폰으로 보는 사람이 80% 이상입니다. 글씨가 너무 작으면 독자는 1초 만에 창을 닫아버리죠.
본문:
16px~18px(이 정도 크기가 모바일에서 가장 읽기 좋습니다.)제목:
24px이상 (계층 구조가 확실히 보이도록)
body {
font-size: 16px; /* 본문 전체 폰트 크기 */
}
h1 {
font-size: 28px; /* 제목은 크게 */
}
[줄 간격 (line-height): 숨통을 틔우는 여백]
폰트 크기만큼 중요한 게 바로 줄 간격입니다. 줄과 줄 사이가 너무 좁으면 글자가 뭉쳐 보여서 눈이 금방 피로해집니다.
추천 줄 간격:
1.6~1.8(단위 없이 숫자만 적으면 글자 크기에 비례해서 알아서 조절됩니다.)
p {
line-height: 1.8; /* 줄 간격을 넓게 설정 */
}
[실전 실습: 메모장에 스타일 적용하기]
어제 실습했던 파일에 아래 코드를 <style> 태그 안에 넣고 다시 저장해 보세요! 훨씬 정돈된 느낌이 들 거예요.
<style>
body {
font-size: 17px;
color: #444444;
line-height: 1.7;
font-family: sans-serif; /* 깔끔한 고딕체 계열 */
}
h1 {
font-size: 32px;
color: #222222;
}
</style>
[에코노트허브의 승인 꿀팁: 폰트 패밀리(font-family)]
폰트(글꼴)도 디자인의 큰 부분을 차지합니다. 블로그에는 화려한 손글씨보다는 가독성이 좋은 '고딕체(sans-serif)' 계열을 추천합니다. font-family: sans-serif;라고만 적어도 컴퓨터가 알아서 가장 깔끔한 기본 폰트로 보여줍니다.
핵심 요약
글자 색상: 완전한 검정보다는 짙은 회색(
#333)이 눈에 편합니다.폰트 크기: 모바일 가독성을 위해 본문은 최소
16px이상으로 설정하세요.줄 간격:
1.6~1.8사이의 값을 주어 글자가 답답하지 않게 하세요.폰트 종류: 디자인을 고민할 시간에 가독성이 보장된
sans-serif(고딕 계열)를 쓰세요.
다음 편 예고: 14편에서는 우리 블로그의 본문을 더 보기 좋게 만드는 [여백의 미: 마진(Margin)과 패딩(Padding)]에 대해 배웁니다. 이것만 알면 여러분의 블로그가 이제 정말 '전문 웹사이트'처럼 보이기 시작할 거예요!
여러분은 블로그를 볼 때 '글씨 크기'나 '색깔' 중 어떤 요소가 가독성을 결정하는 가장 큰 요인이라고 생각하시나요? 여러분만의 '읽기 좋은 블로그' 기준을 공유해 주세요!