추가 CSS를 안전하게 적용하기

> 적용 대상: 최신 케이테마 / 난이도: 처음 사용하는 분

추가 CSS는 테마 파일을 직접 고치지 않고 작은 디자인 보정을 할 때 쓰는 공간입니다. 색상·여백·모서리처럼 한정된 요소만 조정하고, 큰 구조 변경은 케이테마 옵션이나 Elementor 설정을 우선 사용하세요.

시작하기 전에

• 먼저 케이테마 사용자 정의 옵션과 Elementor 위젯 설정으로 해결할 수 있는지 확인합니다.
• 추가할 CSS 전체를 메모장에 복사해 둡니다. 문제가 생기면 마지막 코드만 지워 되돌릴 수 있습니다.
• 한 번에 여러 변경을 넣지 말고, 한 항목씩 미리보기에서 확인합니다.

1. 추가 CSS 화면 열기

워드프레스 관리자에서 외모 → 사용자 정의하기 → 추가 CSS를 엽니다. 입력한 내용은 오른쪽 미리보기에 바로 반영되므로, 저장 전 결과를 확인할 수 있습니다.

2. 작은 변경부터 적용하기

아래 예시는 본문 안의 Elementor 버튼 모서리만 조금 둥글게 만드는 코드입니다. 사이트 전체에 영향을 줄 수 있으므로 그대로 복사하기보다, 원하는 요소를 정확히 확인한 뒤 사용하세요.

/* 본문 Elementor 버튼의 모서리만 조정하는 예시 */
.site-main .elementor-button {
  border-radius: 8px;
}

코드를 붙여 넣은 뒤 미리보기에서 바뀐 위치를 확인하고 발행을 누릅니다. 원하지 않는 결과가 나오면 방금 넣은 블록을 삭제하고 다시 발행하면 됩니다.

3. 문제를 피하는 방법

• 테마·플러그인 파일을 수정하라는 CSS는 추가 CSS에 넣지 않습니다.
• !important는 다른 방법이 없을 때만 사용합니다. 나중에 원인을 찾기 어려워집니다.
• PC에서 맞춘 값은 모바일에서도 확인합니다.
• 업데이트 직후 문제가 생겼다면 가장 최근에 추가한 CSS를 먼저 잠시 제거해 확인합니다.

완료 확인

• 미리보기와 실제 공개 페이지에서 같은 결과가 보입니다.
• PC·태블릿·모바일에서 글자와 버튼이 잘리지 않습니다.
• 기존에 정상 동작하던 메뉴·팝업·폼이 바뀌지 않았습니다.
• 추가한 코드의 원본을 별도 메모에 보관했습니다.

기존 테마 사용자

기존 테마의 추가 CSS를 모두 복사해 넣지 마세요. 이전 테마의 선택자와 구조가 최신 케이테마와 다를 수 있습니다. 눈에 꼭 필요한 보정 한 가지씩만 옮기고, 전역 색상·폰트·버튼은 전역 색상·폰트·버튼 설정에서 먼저 조정하세요.

더 알아보기

CSS의 기본 개념과 안전한 선택자 작성법은 WordPress 공식 안내를 참고할 수 있습니다.