워드프레스 자식 테마 CSS 적용 방법 — 스타일을 안전하게 관리하는 3가지 방법
✅ 핵심 답변
자식 테마 CSS 적용 방법: 자식 테마의 style.css에 작성하거나, 워드프레스 대시보드 → 외모 → 사용자 정의하기 → 추가CSS에 입력하면 부모 테마 업데이트 후에도 스타일이 안전하게 유지됩니다.
CSS를 부모 테마 파일에 직접 수정했다면 테마 업데이트 한 번으로 모든 스타일이 사라집니다. 자식 테마를 활성화한 이유가 바로 이 문제를 방지하기 위해서입니다. 그런데 자식 테마로 전환하면 기존 추가CSS가 초기화되거나, enqueue 코드 문제로 CSS가 깨지는 상황이 자주 발생합니다.
이 글에서는 자식 테마에서 CSS를 적용하는 3가지 방법의 차이와 우선순위, 그리고 테마 전환 시 CSS를 잃지 않는 안전한 방법을 단계별로 설명합니다.
📅 최종 업데이트: 2026년 04월 | ✍️ 정보 출처: WordPress 공식 문서 기준
1. 워드프레스 CSS 적용 방법 3가지 비교
방법 선택이 핵심
워드프레스에서 CSS를 적용하는 방법은 크게 세 가지입니다. 어디에 작성하느냐에 따라 업데이트 후 생존 여부와 우선순위가 완전히 달라집니다. WordPress 공식 문서(developer.wordpress.org)는 “부모 테마 파일을 직접 수정하지 말고 자식 테마를 사용하라”고 명시하고 있습니다. (출처: WordPress 공식 개발자 문서)
| 구분 | 위치 | 업데이트 후 유지 | 우선순위 |
|---|---|---|---|
| 부모 테마 CSS 직접 수정 | generatepress/assets/css/ | ❌ 삭제됨 | 낮음 |
| 자식 테마 style.css | generatepress-child/style.css | ✅ 유지됨 | 중간 |
| 추가CSS (사용자 정의) | 대시보드 → 추가CSS | ✅ DB 저장 | 가장 높음 |
- 부모 테마 파일 직접 수정 → 업데이트 1회로 전부 초기화
- 자식 style.css → 테마 업데이트에 영향받지 않고 영구 유지
- 추가CSS → 데이터베이스 저장, 테마 전환 시 재입력 필요
2. CSS 우선순위는 어떻게 되나요?
로드 순서가 곧 우선순위
CSS는 나중에 로드될수록 우선순위가 높습니다. 워드프레스에서의 실제 로드 순서는 ① 부모 테마 CSS → ② 자식 테마 style.css → ③ 추가CSS(사용자 정의) 순입니다. 추가CSS가 가장 마지막에 로드되므로 우선순위가 가장 높고, 같은 선택자라면 추가CSS의 스타일이 최종 적용됩니다.
| 로드 순서 | 위치 | 우선순위 |
|---|---|---|
| 1번째 | 부모 테마 CSS (generate-style) | 낮음 |
| 2번째 | 자식 테마 style.css | 중간 |
| 3번째 | 추가CSS (사용자 정의) | 🔝 가장 높음 |
- 같은 선택자(예: .wp-block-button)에 스타일 충돌 시 추가CSS가 항상 이김
- 자식 style.css는 부모보다 우선하지만 추가CSS보다는 낮음
- !important는 가급적 사용하지 말고 선택자 구체성으로 해결 권장
3. 자식 style.css에 CSS 작성하는 방법
고속도로 휴게소·실시간 교통 지도 →
파일 직접 편집법
자식 테마 폴더(generatepress-child/)의 style.css는 테마 헤더 주석 아래에 CSS를 자유롭게 추가하면 됩니다. 파일 매니저 또는 대시보드 → 외모 → 테마 파일 편집기에서 직접 편집할 수 있으며, 저장 즉시 사이트에 반영됩니다. 부모 테마를 업데이트해도 자식 style.css는 절대 덮어쓰이지 않습니다.
- style.css 최상단 주석(Theme Name, Template 등)은 절대 삭제하지 않음
- 주석 아래 빈 줄부터 원하는 CSS를 자유롭게 작성
- 저장 후 시크릿 창(Ctrl+Shift+N)으로 캐시 없이 확인
4. 테마 전환 시 추가CSS 백업·복원 방법
전환 전 필수 백업
워드프레스의 추가CSS(대시보드 → 외모 → 사용자 정의하기 → 추가CSS)는 테마별로 별도 저장됩니다. 즉, 부모 테마에서 작성한 추가CSS는 자식 테마로 전환하면 자동으로 사라집니다. Reddit(r/Wordpress) 사용자들의 경험에서도 이 문제는 가장 자주 발생하는 자식 테마 전환 실수로 꼽힙니다. (출처: Reddit r/Wordpress, 2021)
| 단계 | 작업 내용 |
|---|---|
| STEP 1 | 부모 테마 활성 상태에서 대시보드 → 외모 → 사용자 정의하기 → 추가CSS 전체 복사 → 메모장 저장 |
| STEP 2 | 자식 테마 활성화 |
| STEP 3 | 대시보드 → 외모 → 사용자 정의하기 → 추가CSS → 복사해 둔 CSS 붙여넣기 → 게시 |
| STEP 4 | 시크릿 창에서 버튼·레이아웃 정상 여부 최종 확인 |
- 추가CSS 백업을 생략하면 버튼 디자인, 폰트, 색상 등 모든 커스텀 스타일 초기화
- 자식 style.css에 붙여넣어도 되지만 추가CSS가 관리 편의성 높음
- 테마 전환 전 반드시 백업 → 활성화 → 복원 순서 준수
5. enqueue 코드가 CSS 깨짐을 일으키는 이유
올바른 enqueue 코드
자식 테마 functions.php에 enqueue 코드를 잘못 작성하면 부모 CSS와 자식 CSS 로드 순서가 꼬여 레이아웃이 깨집니다. GeneratePress는 자체적으로 generate-style 핸들로 CSS를 로드하므로, 자식 테마에서는 이 핸들을 의존성(dependency)으로 설정해야 합니다. 올바른 코드는 아래와 같으며, generate-style을 dependency에 명시해야 로드 순서가 보장됩니다.
- 잘못된 예: get_template_directory_uri() 사용 → 자식 style.css가 부모 CSS보다 먼저 로드됨
- 올바른 예: get_stylesheet_directory_uri() + array(‘generate-style’) 의존성 설정
- GeneratePress 외 다른 테마는 해당 테마의 CSS 핸들명을 확인 후 적용
결론
워드프레스 자식 테마에서 CSS는 반드시 자식 style.css 또는 추가CSS에 작성해야 부모 테마 업데이트 후에도 스타일이 유지된다. 부모 테마 CSS 파일을 직접 수정하는 방법은 업데이트 1회로 전부 초기화되므로 절대 사용하지 않아야 합니다.
테마를 전환하기 전에는 반드시 추가CSS를 메모장에 복사해 백업하고, 자식 테마 활성화 후 즉시 붙여넣는 습관을 들이세요. enqueue 코드는 generate-style을 의존성으로 설정해야 CSS 로드 순서가 올바르게 유지됩니다. 이 세 가지 원칙만 지키면 CSS 깨짐 문제의 90%는 예방할 수 있습니다.
— 워드프레스 테마 개발 전문가 관점
📚 기초
Q1. 자식 테마 style.css에는 어떤 CSS를 넣어야 하나요?
버튼 색상, 폰트 크기, 레이아웃 간격 등 부모 테마의 기본 스타일을 변경하고 싶은 모든 CSS를 넣을 수 있습니다. 주석 아래 빈 줄부터 자유롭게 작성하면 됩니다.
Q2. 추가CSS와 자식 style.css 중 어디에 쓰는 게 더 좋나요?
소량의 스타일 조정이라면 추가CSS가 편리하고, 테마 전반에 걸친 스타일 변경이라면 자식 style.css에 정리하는 것이 관리하기 좋습니다. 둘 다 업데이트에 안전합니다.
Q3. 자식 style.css의 주석(테마 헤더)을 삭제해도 되나요?
절대 삭제하면 안 됩니다. Theme Name과 Template 주석이 있어야 워드프레스가 해당 폴더를 유효한 자식 테마로 인식합니다. 삭제 시 테마 목록에서 사라집니다.
Q4. 부모 테마 CSS 파일을 복사해서 자식 폴더에 넣으면 안 되나요?
assets/css/ 같은 하위 폴더의 파일은 자식 테마로 재정의되지 않습니다. 워드프레스는 루트 PHP 파일만 자식 우선 로드를 적용하며, CSS 파일은 enqueue 방식으로 로드되므로 복사해도 자동 적용되지 않습니다.
Q5. CSS 수정 후 사이트에 반영이 안 되는 이유는 무엇인가요?
브라우저 캐시 때문일 가능성이 높습니다. Ctrl+Shift+R(강력 새로고침) 또는 시크릿 창(Ctrl+Shift+N)으로 접속해 확인하세요. 캐시 플러그인이 있다면 캐시도 비워야 합니다.
⚠️ 주의사항
Q6. 자식 테마로 바꿨더니 버튼 CSS가 전부 사라졌어요. 왜 그런가요?
추가CSS는 테마별로 별도 저장됩니다. 부모 테마에서 작성한 추가CSS는 자식 테마 전환 후 자동으로 사라집니다. 전환 전 메모장에 복사해 두고, 전환 후 다시 붙여넣기 해야 합니다.
Q7. enqueue 코드에서 ‘parent-style’을 사용하면 안 되나요?
GeneratePress는 자체적으로 CSS를 로드하므로 parent-style로 중복 로드하면 스타일 충돌이 발생할 수 있습니다. generate-style을 의존성으로만 지정하고 자식 style.css만 enqueue 하는 것이 올바릅니다.
Q8. 자식 style.css에 CSS를 추가했는데 추가CSS의 같은 선택자가 이를 덮어씁니다. 어떻게 하나요?
추가CSS가 자식 style.css보다 우선순위가 높기 때문입니다. 해결책은 추가CSS에서 해당 스타일을 삭제하거나, 자식 style.css에서 선택자를 더 구체적으로 작성해 specificity를 높이는 방법이 있습니다.
Q9. 자식 테마 style.css를 대시보드 테마 파일 편집기로 수정해도 안전한가요?
가능하지만 실수로 주석 헤더를 삭제하면 테마가 인식되지 않을 수 있습니다. 편집 전 파일 매니저로 백업 후 진행하거나, FTP/파일 매니저에서 직접 편집하는 방법을 권장합니다.
Q10. !important를 너무 많이 사용하면 문제가 생기나요?
네, 문제가 됩니다. !important를 남용하면 나중에 스타일을 재정의할 수 없는 상황이 발생합니다. 선택자 구체성(specificity)을 높이는 방식으로 먼저 해결을 시도하고, !important는 최후의 수단으로만 사용하세요.