워드프레스로 블로그나 홈페이지를 만들고 나면 가장 먼저 해야 할 일이 바로 CSS 기본 설정이다. 테마를 설치했다고 끝이 아니다. 내 취향과 스타일에 맞게 글꼴, 여백, 제목 스타일 등을 조정해야 읽기 편한 사이트가 된다. 나도 처음엔 이 부분이 너무 막막했다. 하지만 몇 가지 핵심 CSS 설정만 알면 누구나 쉽게 전문적인 느낌의 사이트를 만들 수 있다. 실제로 블로그를 운영하며 필수라고 느낀 CSS 설정들의 기본 개념을 CSS코드 및 자세한 주석과 함께 소개하고자 한다. (그외 초보자들이 검색엔진 최적화/SEO를 위해 설정해야하는 것들은 아래 #2링크를 참조하자)
워드프레스(WordPress) 초보자들을 위한 기본 설정 #2 (검색엔진 최적화/SEO, robots.txt, 사이트맵 등)
워드프레스에서 CSS 설정하는 방법
CSS를 적용하는 방법은 크게 두 가지이다.
- 테마 커스터마이저 이용하기 : 외모 > 커스터마이저 > 추가 CSS
- 플러그인 이용하기 : ‘Simple Custom CSS’ 같은 플러그인 설치
개인적으로는 플러그인보다 테마 커스터마이저를 추천한다. 테마를 변경해도 설정이 유지되고, 불필요한 플러그인을 줄일 수 있기 때문이다. 지금 부터 아래에 제공한 코드를 CSS에 추가하여 사이트를 세련되게 꾸며보길 추천한다.
1. 기본 폰트 설정하기
글꼴은 블로그의 첫인상을 좌우한다. 가독성 좋은 폰트를 선택하고 크기를 적절하게 설정하는 것이 중요하다.
/* 사이트 전체 폰트 설정 */
body {
font-family: 'Noto Sans KR', sans-serif; /* 기본 폰트를 'Noto Sans KR'로 설정, sans-serif는 대체 폰트 */
font-size: 16px; /* 기본 글자 크기를 16픽셀로 설정 */
line-height: 1.7; /* 줄 간격을 글자 크기의 1.7배로 설정 */
color: #333; /* 글자 색상을 어두운 회색(#333)으로 설정 */
word-break: keep-all; /* 한글 단어 단위로 줄바꿈 (단어 중간에서 끊기지 않음) */
}
/* 웹폰트 적용 (구글 폰트 예시) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap'); /* 구글 폰트에서 Noto Sans KR 폰트를 가져옴 (400=보통, 500=중간, 700=굵게) */
TIP: ‘Noto Sans KR’은 한글 가독성이 좋은 폰트다. 요즘엔 ‘Pretendard’도 인기가 많다. 필요하다면 두 폰트를 함께 사용해도 좋다.
2. 제목 스타일 설정하기
제목은 글의 구조를 한눈에 파악하게 해주는 중요한 요소다. 본문과 명확히 구분되도록 설정하자.
/* 제목 공통 설정 */
h1, h2, h3, h4, h5, h6 {
font-family: 'Pretendard', sans-serif; /* 모든 제목 태그에 'Pretendard' 폰트 적용 */
font-weight: 700; /* 폰트 굵기를 700(굵게)으로 설정 */
margin-top: 1.5em; /* 제목 위쪽 여백을 글자 크기의 1.5배로 설정 */
margin-bottom: 0.8em; /* 제목 아래쪽 여백을 글자 크기의 0.8배로 설정 */
line-height: 1.4; /* 제목의 줄 간격을 글자 크기의 1.4배로 설정 */
color: #222; /* 제목 글자 색상을 거의 검정에 가까운 색(#222)으로 설정 */
}
/* 제목별 크기 설정 */
h1 {
font-size: 2em; /* h1 크기를 기본 텍스트의 2배로 설정 */
border-bottom: 1px solid #eee; /* h1 아래에 연한 회색 경계선 추가 */
padding-bottom: 0.3em; /* h1 텍스트와 경계선 사이에 여백 추가 */
}
h2 { font-size: 1.7em; } /* h2 크기를 기본 텍스트의 1.7배로 설정 */
h3 { font-size: 1.4em; } /* h3 크기를 기본 텍스트의 1.4배로 설정 */
h4 { font-size: 1.2em; } /* h4 크기를 기본 텍스트의 1.2배로 설정 */
h5 { font-size: 1.1em; } /* h5 크기를 기본 텍스트의 1.1배로 설정 */
h6 {
font-size: 1em; /* h6 크기를 기본 텍스트와 동일하게 설정 */
color: #555; /* h6만 조금 더 밝은 회색으로 설정하여 차별화 */
}
헤딩 태그에 약간의 여백과 테두리를 추가하면 글의 구조가 더 명확해진다. h1에는 하단 경계선을 추가해 특별한 느낌을 주었다. 제목, 소제목의 디자인을 잘 꾸미고 사이트와의 통일성을 잘 유지해야 SEO에 도움이 될 것이라 생각한다.
- 아래는 내가 이 사이트에서 쓰는 소제목 헤딩 H2, H3, H4, H5, H6 CSS코드이다. 필요하다면 한 번 참조해보기 바란다.
.single .entry-content h1 {
font-weight: 700;
font-size: 30px;
line-height: 1.5;
color: #1a202c;
}
.single .entry-content h2 {
color: #333;
padding: 3px 8px;
text-align: left;
background-color: #f5f5f5;
border-left: 5px solid #007f77;
margin: 18px 0 15px 0px; /* 좌측 여백 0px */
font-size: 19px;
font-weight: 700;
transition: none;
position: relative;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.single .entry-content h3 {
color: #333;
padding: 2px 8px;
text-align: left;
background-color: #f5f5f5;
border-left: 5px solid #4ebfb4;
margin: 18px 0 15px 20px; /* 좌측 여백 10px 추가 */
font-size: 17px;
font-weight: 600;
transition: none;
position: relative;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.single .entry-content h4 {
color: #333;
padding: 1px 8px;
text-align: left;
background-color: #f5f5f5;
border-left: 3px solid #aad4c6;
margin: 17px 0 15px 40px; /* 좌측 여백 20px 추가 */
font-size: 16px;
font-weight: 600;
transition: none;
position: relative;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.single .entry-content h5 {
color: #333;
padding: 1px 10px;
text-align: left;
background-color: #f5f5f5;
border-left: 0px solid #537FEE;
margin: 20px 0 15px 60px; /* 좌측 여백 30px 추가 */
font-size: 16px;
font-weight: 600;
transition: none;
position: relative;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
3. 단락 여백과 줄간격 설정하기
읽기 편한 글을 위해서는 적절한 여백과 줄간격이 필수다. 너무 좁으면 답답하고, 너무 넓으면 집중이 어렵다.
/* 단락 설정 */
p {
margin-bottom: 1.2em; /* 단락 아래 여백을 글자 크기의 1.2배로 설정 (단락 간 간격) */
line-height: 1.8; /* 단락 내 줄 간격을 글자 크기의 1.8배로 설정 (가독성 향상) */
}
/* 리스트 설정 */
ul, ol {
margin-bottom: 1.2em; /* 목록 아래 여백을 글자 크기의 1.2배로 설정 */
padding-left: 1.5em; /* 목록 왼쪽 여백(들여쓰기)을 글자 크기의 1.5배로 설정 */
}
li {
margin-bottom: 0.5em; /* 목록 항목 간 간격을 글자 크기의 0.5배로 설정 */
}
줄간격(line-height)은 1.7~1.8 정도가 가독성이 좋다. 특히 한글은 글자가 복잡해서 여유 있는 줄간격이 필요하다.
- 아래는 내가 이 사이트에서 쓰는 줄간격 단락 들여쓰기 CSS코드이다. 가장 중요하게 생각하는 것은 소제목 레벨에 맞춰서 단락 들여쓰기가 되어야 한다는 점이다. 필요하다면 한 번 참조해보기 바란다.
/* 본문 글자 폰트 */
p {
font-size :15px;
}
/* 목록 숫자 폰트 */
ol {
font-size: 15px;
/* color: #353535; */
}
/* 목록 불렛 폰트 */
ul {
font-size: 15px;
/* color: #353535; */
}
/*제목 아래 단락 글 및 코드박드 전체 제목 라인에 맞춰서 들여쓰기 하는 CSS -정말 중요함!*/
/* H2 아래의 모든 컨텐츠를 들여쓰기 */
.entry-content h2 ~ p,
.entry-content h2 ~ ul,
.entry-content h2 ~ ol,
.entry-content h2 ~ pre {
margin-left: 20px;
}
/* H3 아래의 모든 컨텐츠를 들여쓰기 */
.entry-content h3 ~ p,
.entry-content h3 ~ ul,
.entry-content h3 ~ ol,
.entry-content h3 ~ pre {
margin-left: 40px;
}
/* H4 아래의 모든 컨텐츠를 들여쓰기 */
.entry-content h4 ~ p,
.entry-content h4 ~ ul,
.entry-content h4 ~ ol,
.entry-content h4 ~ pre {
margin-left: 60px;
}
/* H5 아래의 모든 컨텐츠를 들여쓰기 */
.entry-content h5 ~ p,
.entry-content h5 ~ ul,
.entry-content h5 ~ ol,
.entry-content h5 ~ pre {
margin-left: 80px;
}
/* H6 아래의 모든 컨텐츠를 들여쓰기 */
.entry-content h6 ~ p,
.entry-content h6 ~ ul,
.entry-content h6 ~ ol,
.entry-content h6 ~ pre {
margin-left: 100px;
}
4. 코드 블록 스타일링하기
프로그래밍 관련 블로그라면 코드 블록 스타일링은 필수다. 아니더라도 가끔 코드를 인용할 때 있으니 미리 설정해두자.
/* 인라인 코드 - 문장 내에 들어가는 짧은 코드 */
code {
background: #f5f5f5; /* 코드 배경색을 연한 회색으로 설정 */
padding: 2px 5px; /* 코드 내부 여백을 상하 2px, 좌우 5px로 설정 */
border-radius: 3px; /* 코드 박스 모서리를 3px만큼 둥글게 설정 */
font-family: 'Consolas', 'Monaco', monospace; /* 코드에 적합한 고정폭 글꼴 설정 */
font-size: 0.9em; /* 코드 글자 크기를 주변 텍스트보다 약간 작게(0.9배) 설정 */
}
/* 코드 블록 - 여러 줄의 코드를 표시하는 영역 */
pre {
background: #f8f8f8; /* 코드 블록 배경색을 연한 회색으로 설정 */
border: 1px solid #eee; /* 코드 블록 주변에 연한 회색 테두리 추가 */
border-radius: 5px; /* 코드 블록 모서리를 5px만큼 둥글게 설정 */
padding: 1em; /* 코드 블록 내부에 모든 방향으로 글자 크기만큼 여백 추가 */
overflow-x: auto; /* 가로 내용이 넘칠 경우 스크롤바 표시 (화면 밖으로 안 넘치게) */
margin-bottom: 1.5em; /* 코드 블록 아래 여백을 글자 크기의 1.5배로 설정 */
}
pre code {
background: transparent; /* 코드 블록 내부의 code 태그 배경색을 투명하게 설정 (이중 배경 방지) */
padding: 0; /* 코드 블록 내부의 code 태그 여백을 0으로 설정 (이중 여백 방지) */
}
코드 블록은 가로 스크롤이 생기도록 overflow-x: auto를 설정하는 것이 좋다. 긴 코드라인이 화면을 벗어나지 않게 해준다.
5. 인용문(Blockquote) 스타일링
블로그 글에서 다른 사람의 말이나 중요한 정보를 인용할 때 사용하는 블록쿼트. 시각적으로 구분되게 꾸며보자.
blockquote {
border-left: 4px solid #ddd; /* 인용문 왼쪽에 4px 두께의 회색 수직선 추가 */
padding: 0.8em 1em; /* 인용문 내부 여백을 상하 0.8em, 좌우 1em으로 설정 */
margin: 1.5em 0; /* 인용문 위아래 여백을 1.5em으로 설정, 좌우 여백은 없음 */
background: #f9f9f9; /* 인용문 배경색을 아주 연한 회색으로 설정 */
font-style: italic; /* 인용문 텍스트를 기울임체(이탤릭체)로 설정 */
color: #555; /* 인용문 텍스트 색상을 회색으로 설정하여 일반 텍스트와 구분 */
}
blockquote p:last-child {
margin-bottom: 0; /* 인용문 내 마지막 단락의 아래 여백을 제거 (불필요한 공간 방지) */
}
왼쪽에 색상 막대를 넣고 배경색을 살짝 다르게 해서 본문과 구분되게 했다. 폰트 스타일을 이탤릭으로 바꾸는 것도 인용문의 느낌을 잘 살려준다.
6. 이미지 스타일링
블로그에서 이미지는 내용을 보완하는 중요한 요소다. 적절한 여백과 테두리를 추가해 정돈된 느낌을 주자.
/* 이미지 기본 설정 */
img {
max-width: 100%; /* 이미지 최대 너비를 부모 요소의 100%로 제한 (반응형 이미지) */
height: auto; /* 이미지 높이를 너비에 비례하여 자동 조절 (비율 유지) */
border-radius: 5px; /* 이미지 모서리를 5px만큼 둥글게 설정 */
}
/* 이미지 캡션 - 워드프레스에서 이미지 설명을 표시하는 컨테이너 */
.wp-caption {
max-width: 100%; /* 캡션 컨테이너의 최대 너비를 부모 요소의 100%로 제한 */
margin-bottom: 1.5em; /* 캡션 컨테이너 아래 여백을 글자 크기의 1.5배로 설정 */
}
/* 이미지 캡션 텍스트 */
.wp-caption-text {
font-size: 0.9em; /* 캡션 텍스트 크기를 주변 텍스트보다 약간 작게(0.9배) 설정 */
color: #666; /* 캡션 텍스트 색상을 회색으로 설정 */
text-align: center; /* 캡션 텍스트를 가운데 정렬 */
margin-top: 0.5em; /* 캡션 텍스트 위 여백을 글자 크기의 0.5배로 설정 */
}
max-width: 100%는 모바일에서도 이미지가 컨테이너를 벗어나지 않게 해준다. 반응형 디자인에 필수적인 설정이다.
7. 링크 스타일링
방문자가 다른 페이지로 이동할 수 있는 링크. 본문과 구분되면서도 자연스럽게 어울리도록 설정하자.
/* 기본 링크 */
a {
color: #0066cc; /* 링크 텍스트 색상을 파란색으로 설정 */
text-decoration: none; /* 링크의 밑줄을 제거 */
transition: color 0.2s ease; /* 링크 색상이 변할 때 0.2초 동안 부드럽게 전환되도록 설정 */
}
/* 마우스를 올렸을 때의 링크 상태 */
a:hover {
color: #004499; /* 마우스를 올렸을 때 링크 색상을 더 진한 파란색으로 변경 */
text-decoration: underline; /* 마우스를 올렸을 때 링크에 밑줄 표시 */
}
/* 방문한 링크 */
a:visited {
color: #551A8B; /* 이미 방문한 링크의 색상을 보라색으로 설정 */
}
링크에 마우스를 올렸을 때(hover) 부드럽게 색상이 변하도록 transition 속성을 추가했다. 이런 작은 애니메이션이 사용자 경험을 향상시킨다.
8. 테이블 스타일링
데이터를 정리해서 보여주는 테이블도 깔끔하게 스타일링해두면 좋다.
table {
width: 100%; /* 테이블 너비를 부모 요소의 100%로 설정 */
border-collapse: collapse; /* 테이블 셀 테두리를 합쳐서 표시 (이중선 방지) */
margin-bottom: 1.5em; /* 테이블 아래 여백을 글자 크기의 1.5배로 설정 */
}
th, td {
padding: 10px; /* 테이블 셀 내부 여백을 모든 방향으로 10px 설정 */
border: 1px solid #ddd; /* 테이블 셀 주변에 연한 회색 테두리 추가 */
text-align: left; /* 테이블 셀 내용을 왼쪽 정렬 */
}
th {
background-color: #f5f5f5; /* 테이블 헤더 배경색을 연한 회색으로 설정 */
font-weight: bold; /* 테이블 헤더 텍스트를 굵게 설정 */
}
tr:nth-child(even) {
background-color: #f9f9f9; /* 짝수 번째 행의 배경색을 연한 회색으로 설정 (가독성 향상) */
}
짝수 행에 배경색을 넣어 가독성을 높였다. 헤더(th)에는 살짝 더 진한 배경색을 적용해 구분감을 주었다.
9. 모바일 최적화
요즘은 모바일로 블로그를 보는 방문자가 많다. 화면 크기에 따라 폰트 크기와 여백을 조정해보자.
/* 모바일 최적화 - 화면 너비가 768px 이하일 때 적용되는 스타일 */
@media screen and (max-width: 768px) {
body {
font-size: 15px; /* 모바일에서는 기본 글자 크기를 15px로 줄임 (작은 화면에 맞춤) */
}
h1 { font-size: 1.8em; } /* 모바일에서 h1 크기를 기본 텍스트의 1.8배로 축소 */
h2 { font-size: 1.5em; } /* 모바일에서 h2 크기를 기본 텍스트의 1.5배로 축소 */
h3 { font-size: 1.3em; } /* 모바일에서 h3 크기를 기본 텍스트의 1.3배로 축소 */
.content {
padding: 0 15px; /* 모바일에서 콘텐츠의 좌우 여백을 15px로 설정 (화면 가장자리 공간 확보) */
}
}
미디어 쿼리를 사용해 화면 너비가 768px 이하일 때 폰트 크기를 약간 줄이고 여백을 조정했다. 이렇게 하면 모바일에서도 읽기 편한 블로그가 된다.
10. 포인트 컬러 설정
블로그에 개성을 부여하는 포인트 컬러. CSS 변수를 활용하면 한 번에 관리하기 편하다.
:root {
--main-color: #4e6ef2; /* 주요 색상을 파란색 계열로 정의 (전역 변수) */
--accent-color: #ff5722; /* 강조 색상을 주황색 계열로 정의 (전역 변수) */
--dark-color: #333333; /* 어두운 색상을 거의 검정에 가까운 회색으로 정의 (전역 변수) */
--light-color: #f8f8f8; /* 밝은 색상을 거의 흰색에 가까운 회색으로 정의 (전역 변수) */
}
/* 포인트 컬러 적용 예시 */
.widget-title {
color: var(--main-color); /* 위젯 제목 텍스트 색상에 주요 색상 변수 적용 */
border-bottom: 2px solid var(--accent-color); /* 위젯 제목 아래 테두리에 강조 색상 변수 적용 */
}
.category-label {
background-color: var(--main-color); /* 카테고리 라벨 배경색에 주요 색상 변수 적용 */
color: white; /* 카테고리 라벨 텍스트 색상을 흰색으로 설정 (배경색과 대비) */
}
CSS 변수를 사용하면 나중에 색상 변경이 필요할 때 한 곳만 수정하면 된다. 테마 컬러를 일관되게 유지하기 좋은 방법이다.
지금까지 워드프레스 블로그의 기본적인 CSS 설정에 대해 알아봤다. 이런 기본 설정들이 모여 블로그의 전체적인 분위기를 결정 짓는다. 모든 설정을 한 번에 적용하기보다는 하나씩 적용해보며 내 블로그에 어울리는지 확인하는 것이 좋다. CSS를 조금씩 수정하면서 자신만의 스타일을 찾아 보길 추천한다.