블로그 CSS 수정 방법
블로그의 워드프레스 테마 설치 후, 디자인 편집은 CSS 수정 방법 으로 진행할 수 있습니다. 가장 기본적인 폰트 크기를 조정하려면 사용자 정의를 통해 PX, EM, REM 단위로 조절할 수 있습니다. PX는 고정 크기, EM은 상위 요소 기준, REM은 루트 기준으로 설정됩니다.
블로그 워드프레스 테마까지 설치했으면 거의 다 제작을 한 겁니다. 이제 자신이 원하는 디자인으로 블로그의 디자인을 편집하면 됩니다. 즉, CSS 수정을 통해 작업을 진행합니다. CSS 편집 작업은 코딩 지식이 없어도 몇 가지 기본적인 설정만 변경하는 것으로 누구나 쉽게 수정할 수 있습니다.
워드프레스 CSS 수정 방법
블로그의 가장 기본적인 CSS 수정 방법으로 우선 생각해야 할 부분이 폰트의 크기입니다. 워드프레스의 기본 설정은 한국적인 일반 블로그의 폰트보다 조금 크게 설정된 것 같습니다. 만약 현재 폰트 크기에 만족하신다면 변경 작업을 별도로 진행하실 필요는 없습니다.
그러나 차후 폰트를 디자인할 때 필요할 수 있으므로 기본적인 설정 방법을 알아보도록 하겠습니다.
블로그 CSS 수정 방법
워드프레스의 CSS를 수정하기 위해서는 원본 CSS 코드를 수정하는 방법도 있지만, 이 방법은 파일질라와 같은 프로그램을 사용하여 FTP 접속을 통해 원본 코드에 접근해야 하기 때문에 코딩에 대한 지식이 없으면 하기 힘들 수 있습니다. 물론 금방 배워서 작업을 진행할 수 있지만, 지금은 가장 쉽게 수정하는 방법을 사용하겠습니다
사용자 정의란을 사용하기
워드프레스 상단에 있는 “사용자 정의”를 이용합니다. “사용자 정의” 메뉴 하단에 “추가 CSS”를 넣어주면 본인이 원하는 CSS를 수정할 수 있습니다.
워드프레스 기본 폰트 크기
아래는 워드프레스의 기본 폰트 사이즈입니다. 폰트의 크기는 기본적으로 PX, EM, REM 3가지 방법으로 설정할 수 있습니다.
- 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 */ }
워드프레스 CSS 수정 적용
예:
CSS를 적용한 H4
아래 코드는 h4에 적용한 예입니다. h4 사이즈를 24px로 설정하고, h4 글자 앞에 동그라미를 넣어주는 CSS입니다
h4 { font-size: 1.5rem; /* 24px */ }
h4::before {
content: '\25CF';
color: #555;
font-size: 1.1em;
line-height: 1.2em;
padding-right: 5px;
}