CSS를 조금만 이해하면 WordPress에서 할 수 있는 디자인 변경의 범위가 크게 넓어집니다. 글자 크기 · 색상 · 여백 · 버튼 · 배경 · 테두리 · 정렬, 특정 영역 숨기기까지 조정할 수 있습니다.
HTML이 웹페이지의 구조를 만든다면 CSS는 그 구조를 어떻게 보이게 할 것인지 결정합니다. 쉽게 말해 HTML은 뼈대, CSS는 디자인입니다.
세 가지 개념만
Selector무엇을 바꿀지 가리키는 부분입니다. 예: h1
Property어떤 속성을 바꿀지입니다. 예: font-size
Value어떤 값으로 바꿀지입니다. 예: 40px
문법을 전부 외울 필요는 없습니다. Typography(크기 · 굵기 · 행간 · 자간), Layout(폭 · 여백 · 배치), Visual(색 · 배경 · 테두리 · 그림자) 정도로 묶어 이해하면 충분합니다.
CSS를 어디에 넣을까
Theme의 Custom CSS 기능, Site Editor, 별도의 CSS 관리 기능, Child Theme 등 환경에 따라 방법이 다릅니다. 중요한 것은 Theme 파일을 무작정 직접 수정하지 않는 것입니다.
개발자 도구를 켜보십시오
브라우저의 Developer Tools로 특정 요소에 어떤 CSS가 적용되는지 확인할 수 있습니다. “이 버튼의 색상은 어디서 결정되는가” 같은 질문에 직접 답을 찾게 됩니다.
흔한 실수 세 가지
- !important 를 무작정 사용해 나중에 관리가 어려워지는 경우
- 지나치게 복잡하고 구체적인 Selector
- Theme 파일에 직접 넣어 업데이트에서 사라지는 경우
처음부터 전체 디자인을 CSS로 다시 만들지 마십시오. 제목 크기 하나, 버튼 하나, 여백 하나처럼 작은 변경부터 시작하고 매번 실제 페이지에서 확인합니다.