워드프레스 차일드 테마 만들기를 찾는다면 아마 업데이트 때 수정한 CSS나 템플릿이 사라질까 걱정될 거예요. 저도 부모 테마를 건드리기 전, 어디까지 바꿔도 되는지부터 정리했습니다.
차일드 테마가 업데이트 후 변경 사항을 지키는 원리
차일드 테마는 부모 테마의 디자인과 기능을 이어받는 작은 보관함처럼 동작합니다. 워드프레스의 테마 상속 구조에서는 부모 테마가 기본 뼈대를 제공하고, 차일드 테마가 내가 바꾼 파일만 따로 들고 있어요. 그래서 원본 전체를 새로 만들지 않아도 됩니다.
부모 테마 파일을 직접 고치면 문제가 생길 수 있습니다. 업데이트 때 새 파일이 내려오면서 기존 파일을 다시 쓰기 때문이에요. 이때 CSS나 PHP, 템플릿 변경분이 사라지면 업데이트 보존이 되지 않습니다. 반대로 차일드 테마 파일은 별도 폴더에 있으니 업데이트 보존에 유리합니다.
- CSS를 지속적으로 변경하는 경우
- 템플릿 구조를 수정하는 경우
- PHP 기능을 추가하는 경우
- 부모 테마 업데이트를 계속 받아야 하는 경우
- 여러 변경 사항을 장기간 관리하는 경우
단순 색상이나 여백 정도는 테마 사용자 정의의 추가 CSS로도 충분할 때가 있어요. 하지만 파일 단위의 커스터마이징이나 안전한 코드 수정이 필요하면 차일드 테마가 더 맞습니다. 핵심은 테마 상속 구조를 이용해 부모 테마는 그대로 두고 바꿀 부분만 분리하는 것입니다.
차일드 테마 작업 전 백업과 테스트 환경 준비
차일드 테마를 적용하기 전에는 파일과 데이터베이스를 함께 챙겨야 합니다. 워드프레스 화면 설정, 글, 메뉴 정보는 데이터베이스에 있고, 테마 파일은 서버에 있기 때문이에요. 백업 생성은 한쪽만 하면 복구가 어색해질 수 있습니다.
- 현재 사이트 파일과 데이터베이스를 백업합니다.
- 사용 중인 부모 테마의 이름과 버전을 기록합니다.
- 스테이징 사이트를 준비합니다.
- 관리자 계정과 파일 접근 수단을 확인합니다.
- 이전 테마 전환 또는 백업 복원 절차를 점검합니다.
백업 생성 파일은 웹 공개 경로 밖에 두는 것이 보안 모범 사례에 가깝습니다. 스테이징 사이트에서 메뉴, 위젯, 페이지 표시를 보며 변경 사항 테스트를 먼저 해보세요. 업데이트 전 점검과 롤백 절차가 있으면 운영 사이트 적용이 훨씬 덜 불안합니다.
워드프레스 차일드 테마 만들기 전 부모 폴더 확인
워드프레스 차일드 테마 만들기에서 자주 막히는 지점은 이름입니다. 관리자 화면에 보이는 이름과 실제 폴더명이 다를 수 있어요. `wp-content 경로` 아래 `themes 디렉터리`를 보면 테마마다 폴더가 나뉘어 있고, 여기 있는 실제 이름을 기준으로 부모 테마를 연결합니다.
- 호스팅 제어판의 파일 관리자
- FTP 접속 도구
- 로컬 또는 스테이징 서버의 코드 편집기
| 확인 대상 | 예시 값 | 확인 위치 |
|---|---|---|
| 부모 테마 표시 이름 | Twenty Twenty Six | 관리자 화면의 테마 목록 |
| 실제 폴더명 | twentytwentysix | wp-content/themes |
| 부모 style.css 위치 | twentytwentysix/style.css | 부모 테마 폴더 |
| 차일드 테마에 입력할 Template 값 | twentytwentysix | 자식 style.css 헤더 |
호스팅 제어판이나 FTP 접속으로 테마 폴더명 확인을 할 때는 대문자, 공백, 하이픈까지 그대로 봐야 합니다. Template 값은 부모 테마 표시 이름이 아니라 실제 디렉터리 이름과 맞아야 합니다.
자식 디렉터리와 필수 파일 구성
워드프레스에서 차일드 테마는 `wp-content/themes` 아래에 독립된 자식 디렉터리로 만듭니다. 필수 파일 구성의 중심은 `style.css`이고, 부모 테마 스타일과 자식 스타일을 차례로 불러오려면 `functions.php`도 함께 준비하는 편이 좋습니다.
- `wp-content/themes`로 이동합니다.
- `부모폴더명-child` 형식의 자식 디렉터리를 만듭니다.
- 빈 `style.css`와 `functions.php` 파일을 생성합니다.
- 필요할 때 `assets`, `js`, `languages` 등의 하위 디렉터리를 추가합니다.
“`text wp-content/ themes/ parent-theme/ style.css parent-theme-child/ style.css functions.php “`
수동 생성 방법으로 만들면 자식 디렉터리와 필수 파일 구성을 직접 이해할 수 있어요. 선택 파일 구성은 나중에 늘려도 됩니다. 다만 폴더 권한은 서버가 읽을 수 있는 수준으로 두고, 지나치게 넓은 쓰기 권한은 피하세요. 코드 편집기에서 저장 인코딩도 함께 확인하면 좋습니다.
style.css 헤더로 부모 테마 연결하기
`style.css 작성`에서 가장 중요한 부분은 파일 맨 위 주석입니다. 워드프레스는 이 메타데이터를 읽고 차일드 테마인지 판단합니다. 최소한 Theme Name 헤더와 Template 헤더가 있어야 하고, Template 헤더는 부모 테마의 실제 폴더명을 가리켜야 합니다.
“`css / Theme Name: Parent Theme Child Template: parent-theme Version: 1.0.0 Text Domain: parent-theme-child / “`
| 헤더 항목 | 필수 여부 | 입력 내용 | 주의점 |
|---|---|---|---|
| Theme Name | 필수 | 자식 테마 이름 | 관리자 화면에 표시됩니다 |
| Template | 필수 | 부모 폴더명 | 표시 이름을 넣으면 부모 테마 인식 오류가 날 수 있습니다 |
| Description | 선택 | 간단한 설명 | 짧게 적어도 충분합니다 |
| Version | 권장 | 자식 테마 버전 | 변경 이력 관리에 좋습니다 |
| Text Domain | 권장 | 번역 식별자 | 폴더명과 비슷하게 맞추면 관리가 쉽습니다 |
스타일시트 생성 후에는 파일명이 정확히 `style.css`인지 확인하세요. `style.css 작성` 중 주석이 닫히지 않았거나 Template 헤더에 부모 테마 표시 이름을 넣으면 차일드 테마가 손상된 것처럼 보일 수 있습니다. 필수 파일 구성부터 차분히 다시 보면 대부분 잡힙니다.
functions.php에서 부모와 자식 스타일 불러오기
부모 `functions.php`는 자동으로 함께 로드됩니다. 그래서 부모 파일을 차일드 테마로 복사하지 말고, 자식 `functions.php`에는 필요한 코드만 추가하는 게 좋습니다. 워드프레스에서는 `@import 비권장` 흐름보다 enqueue 방식이 관리하기 쉽고, `wp_enqueue_scripts 훅`에서 `wp_enqueue_style 함수`를 호출해 부모 스타일 불러오기를 처리합니다.
“`php
function vp_child_enqueue_styles() { $parent_handle = ‘parent-style’;
wp_enqueue_style( $parent_handle, get_template_directory_uri() . ‘/style.css’, array(), wp_get_theme( get_template() )->get( ‘Version’ ) );
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( $parent_handle ), filemtime( get_stylesheet_directory() . ‘/style.css’ ) ); } “`
부모 테마마다 이미 쓰는 핸들이 다를 수 있어요. 그래서 functions.php 설정 전에 해당 테마의 안내 문서나 기존 등록 방식을 먼저 확인하는 편이 좋습니다. 의존성 배열에 부모 핸들을 넣으면 자식 스타일이 부모 스타일 뒤에 오도록 도울 수 있고, 버전 관리 매개변수에 파일 수정 시간을 쓰면 바뀐 CSS를 다시 불러오는 데 도움이 됩니다.
- `wp_enqueue_scripts 훅` 이름 오타 확인
- `wp_enqueue_style 함수` 괄호와 쉼표 확인
- 부모 스타일 불러오기 핸들명 확인
- 자식 스타일의 의존성 배열 확인
- PHP 줄 끝 세미콜론 확인
`@import`는 CSS 안에서 다른 CSS를 다시 요청하는 방식이라 로딩 순서와 관리가 답답할 수 있습니다. enqueue 방식은 워드프레스가 스타일 관계를 더 명확히 다루게 해줍니다. functions.php 설정 중 화면이 멈추면 PHP 여는 태그 뒤 문법부터 다시 보세요.
ZIP 설치와 관리자 화면 활성화 절차
자식 디렉터리를 완성했다면 ZIP 파일 설치로 올리거나 서버의 테마 경로에 직접 배치할 수 있습니다. 차일드 테마를 쓰더라도 부모 테마는 삭제하지 말고 설치된 상태로 둬야 합니다.
- 자식 폴더 자체가 ZIP 최상위 디렉터리가 되도록 압축합니다.
- 관리자 화면의 외모 메뉴에서 테마 추가 화면을 엽니다.
- 테마 업로드를 선택하고 ZIP 파일을 설치합니다.
- 설치 오류가 없는지 확인합니다.
- 가능하면 테마 미리보기에서 주요 화면을 점검합니다.
- 차일드 테마를 관리자 화면에서 활성화하고 활성 테마 확인을 합니다.
콘텐츠 자체가 테마 파일에 저장되는 것은 아닙니다. 그래도 워드프레스 테마를 바꾸면 메뉴 위치, 위젯 영역, 사용자 설정이 다르게 연결될 수 있어요. 관리자 화면에서 활성화한 뒤 홈, 글, 페이지, 모바일 화면까지 변경 사항 테스트를 해보는 편이 안전합니다.
차일드 테마 CSS 수정과 적용 순서 점검
차일드 테마의 `style.css`에 작은 CSS부터 넣고, 브라우저 개발 도구에서 어떤 규칙이 최종 적용되는지 확인해보세요. 부모 테마보다 뒤에 로드되어도 CSS 우선순위가 항상 이기는 것은 아닙니다. 선택자 특이성이 높거나 인라인 규칙이 있으면 반응형 디자인 수정이 보이지 않을 수 있어요.
- 자식 `style.css`가 네트워크 요청에 포함되는지 확인합니다.
- 부모 스타일보다 뒤에 로드되는지 확인합니다.
- CSS 선택자와 속성 철자를 점검합니다.
- 선택자 특이성과 미디어 쿼리를 비교합니다.
- 사이트, 브라우저, CDN 캐시를 차례로 비웁니다.
| 증상 | 확인 항목 | 조치 |
|---|---|---|
| 파일 미로딩 | enqueue 코드 | 핸들명과 경로를 수정합니다 |
| 부모 규칙 우선 적용 | CSS 우선순위 | 선택자를 더 정확히 잡습니다 |
| 데스크톱만 적용 | 미디어 쿼리 | 조건 범위를 다시 맞춥니다 |
| 이전 스타일 표시 | 캐시 | 캐시 삭제와 캐시 무효화를 진행합니다 |
| 인라인 규칙 충돌 | 출력 위치 | 설정값이나 템플릿 출처를 확인합니다 |
단발성 CSS는 사용자 정의 CSS로도 처리할 수 있습니다. 하지만 파일, 기능, 템플릿과 함께 관리할 변경이라면 차일드 테마에 두는 편이 나중에 찾기 쉽습니다. 스타일 미적용 해결은 로딩 순서, CSS 우선순위, 캐시 삭제를 같이 봐야 빨라요.
부모 템플릿을 복사해 화면 구조 재정의하기
워드프레스는 요청 화면에 맞는 템플릿을 계층 구조 이해에 따라 찾습니다. 같은 상대 경로의 파일이 차일드 테마에 있으면 그 파일을 먼저 사용할 수 있어요. 이 방식이 템플릿 오버라이드입니다. 테마 상속 구조 덕분에 부모 테마 전체를 고치지 않고 필요한 화면만 바꿀 수 있습니다.
- 수정 대상 화면에 사용되는 템플릿을 확인합니다.
- 부모 테마의 원본 파일을 백업합니다.
- 같은 상대 경로를 유지해 자식 디렉터리로 복사합니다.
- 복사본만 수정하고 주요 화면을 테스트합니다.
- 부모 업데이트 후 원본과 복사본의 차이를 검토합니다.
| 템플릿 파일 | 주요 적용 화면 | 수정 예시 |
|---|---|---|
| header.php | 상단 공통 영역 | header.php 편집으로 구조 조정 |
| footer.php | 하단 공통 영역 | footer.php 편집으로 링크 정리 |
| single.php | 개별 글 | single.php 변경으로 글 하단 요소 추가 |
| page.php | 고정 페이지 | page.php 변경으로 페이지 레이아웃 수정 |
| archive.php | 목록 화면 | archive.php 변경으로 카드 배열 수정 |
| 확장 기능 템플릿 | 확장 화면 | WooCommerce 템플릿은 정해진 경로를 따릅니다 |
템플릿 파일 복사는 꼭 필요한 것만 하는 게 좋습니다. 모든 부모 테마 파일을 복사하면 부모 테마가 바뀔 때 비교할 것이 많아집니다. 템플릿 오버라이드는 계층 구조 이해를 바탕으로 작게 적용해야 유지가 쉽습니다.
훅과 functions.php로 기능 확장하기
차일드 테마의 `functions.php`는 부모 테마 파일을 대체하지 않고 추가로 로드됩니다. 워드프레스의 hooks 활용은 템플릿을 통째로 복사하지 않고 기능을 붙일 수 있는 방법이에요. actions 추가는 특정 시점에 실행할 코드를 넣고, filters 적용은 전달받은 값을 바꿔 돌려줍니다.
- 숏코드 등록으로 반복 문구를 짧게 호출합니다
- 위젯 영역 추가로 새 배치 공간을 만듭니다
- 메뉴 위치 등록으로 내비게이션 영역을 늘립니다
- 이미지 크기 설정으로 썸네일 규격을 추가합니다
- 출력값을 조정하는 필터 함수로 문구나 구조 일부를 바꿉니다
| 변경 목적 | 권장 방식 | 이유 |
|---|---|---|
| 콘텐츠 앞뒤 출력 추가 | hooks 활용 | 템플릿 복사 없이 붙일 수 있습니다 |
| 텍스트 값 변경 | filters 적용 | 값만 바꾸면 되기 때문입니다 |
| 새 메뉴 위치 등록 | functions.php 설정 | 테마 기능 등록에 맞습니다 |
| 페이지 구조 전체 변경 | 템플릿 복사 | 화면 뼈대가 달라집니다 |
| 작은 독립 기능 추가 | PHP 코드 스니펫 | 범위가 작고 분리하기 쉽습니다 |
워드프레스에서 함수명 충돌을 줄이려면 고유한 접두사를 붙이세요. 저는 `vp_`처럼 짧은 접두사를 정해두면 찾기 편했습니다. 차일드 테마에 hooks 활용 코드를 넣을 때도 한 번에 많이 넣지 말고, 작은 단위로 저장한 뒤 오류 여부를 확인하는 편이 좋습니다.
스크립트·에셋·번역 파일의 경로 설정
자식 폴더의 파일을 불러올 때는 `get_stylesheet_directory_uri`를 씁니다. 반대로 부모 테마 파일을 가리킬 때는 `get_template_directory_uri`가 맞아요. 워드프레스에서 차일드 테마와 부모 테마의 위치가 다르기 때문에 에셋 경로 지정 함수도 구분해야 합니다.
“`php
function vp_child_enqueue_assets() { wp_enqueue_script( ‘vp-child-script’, get_stylesheet_directory_uri() . ‘/assets/js/site.js’, array(), filemtime( get_stylesheet_directory() . ‘/assets/js/site.js’ ), true ); } “`
| 대상 파일 위치 | 사용 함수 | 대표 용도 |
|---|---|---|
| 자식 테마 이미지 | get_stylesheet_directory_uri | 직접 추가한 이미지 |
| 자식 테마 스크립트 | get_stylesheet_directory_uri | 자바스크립트 파일 |
| 부모 테마 이미지 | get_template_directory_uri | 원본 이미지 참조 |
| 부모 테마 스크립트 | get_template_directory_uri | 부모 제공 스크립트 |
번역 파일 적용도 같은 기준으로 정리하면 좋습니다. text domain 설정과 언어 파일 디렉터리를 일관되게 맞추고, 스크립트 불러오기는 필요한 페이지에서만 진행하세요. 이렇게 하면 누락된 요청을 줄이고 성능 최적화에도 도움이 됩니다.
블록 테마와 인기 테마별 적용 차이
모든 차일드 테마가 같은 방식으로 끝나지는 않습니다. 클래식 테마 적용은 PHP 템플릿과 `functions.php` 중심으로 생각하면 쉽지만, 블록 테마 지원에서는 `theme.json 수정`, HTML 템플릿, 템플릿 파트 편집, 사이트 편집기 호환까지 함께 봐야 합니다.
| 테마 유형 또는 제품군 | 우선 확인 항목 | 대표 변경 위치 | 주의점 |
|---|---|---|---|
| 클래식 테마 | 템플릿과 functions.php | PHP 파일 | 부모 테마 로딩 방식을 봅니다 |
| 블록 테마 | theme.json, 템플릿 파트, 사이트 편집기 저장값 | theme.json 수정과 HTML 템플릿 | 저장된 사용자 변경 우선순위를 확인합니다 |
| Avada | 공식 자식 패키지 | 아바다 차일드테마 파일 | 빌더 설정과 파일 변경을 구분합니다 |
| Astra | 부모 스타일 등록 방식 | Astra 자식 설정 | 제공 도구와 문서를 확인합니다 |
| GeneratePress | 공식 샘플 파일 | GeneratePress 자식 설정 | 훅 기능과 파일 변경 범위를 나눕니다 |
| Divi | 빌더 저장 구조 | Divi 자식 설정 | 빌더 옵션이 우선될 수 있습니다 |
| Hello Elementor | 빌더 역할 | Hello Elementor 자식 설정 | 파일보다 빌더 템플릿 영향이 클 수 있습니다 |
테마 버전에 따라 구조가 달라질 수 있습니다. 그래서 부모 테마의 현재 설치 버전, 공식 문서, 함께 제공된 파일을 기준으로 적용하세요. 특히 상용 또는 프레임워크형 테마는 자체 차일드 테마 파일을 제공하는 경우가 있어 먼저 확인하는 편이 좋습니다.
수동 생성과 플러그인 방식 선택하기
차일드 테마를 만드는 방법은 하나만 있는 것이 아닙니다. 워드프레스 파일 관리자나 FTP 접속이 익숙하면 수동 생성 방법이 명확하고, 서버 접근이 어렵다면 자동 생성 방법도 쓸 수 있어요. 다만 어떤 방식이든 부모 테마 연결 결과는 직접 확인해야 합니다.
| 방식 | 적합한 상황 | 장점 | 확인할 점 |
|---|---|---|---|
| 직접 파일 생성 | 파일 구조를 배우고 싶은 경우 | 수동 생성 방법이라 흐름이 잘 보입니다 | 헤더와 경로를 직접 맞춰야 합니다 |
| Child Theme Configurator 같은 플러그인 | 서버 파일 접근이 불편한 경우 | 자동 생성 방법으로 빠르게 시작합니다 | 생성된 코드와 스타일 순서를 봐야 합니다 |
| 테마 제작사가 제공하는 공식 ZIP | 해당 테마 전용 파일이 있는 경우 | 테마 규칙을 반영하기 쉽습니다 | 현재 버전과 맞는지 확인합니다 |
- `Template` 값과 부모 폴더명의 일치 여부
- 부모와 자식 스타일의 로딩 순서
- 기존 사용자 설정과 화면 표시 상태
- 불필요해진 생성 도구의 유지 여부
테마 사용자 정의와 가벼운 커스터마이징만 한다면 플러그인 방식도 편합니다. 하지만 파일 구조와 코드를 계속 관리하려면 수동 생성 방법이 더 또렷합니다. 차일드테마 플러그인을 썼더라도 만든 뒤에는 결과물을 직접 읽어보는 습관이 필요합니다.
테마 인식·스타일·PHP 오류 해결 순서
차일드 테마가 보이지 않거나 화면이 깨지면 증상별로 좁혀가야 합니다. 워드프레스 관리자 화면에 테마가 없으면 위치와 `style.css`를 먼저 보고, 스타일 미적용 해결은 enqueue와 캐시 삭제를 함께 봅니다. PHP 수정 뒤 화면이 비면 파일 접근 수단부터 확보하세요.
| 증상 | 가능한 원인 | 첫 확인 위치 | 복구 조치 |
|---|---|---|---|
| 관리자 화면에 테마가 없음 | 폴더 위치 또는 파일명 오류 | themes 디렉터리 | style.css 이름과 헤더를 고칩니다 |
| 부모 테마 누락 메시지 | Template 값 불일치 | style.css 헤더 | 부모 테마 폴더명을 맞춥니다 |
| 자식 CSS 미적용 | enqueue 누락 | functions.php | 부모 스타일 불러오기 순서를 수정합니다 |
| 일부 CSS만 덮어쓰기 실패 | 선택자 우선순위 | 브라우저 개발 도구 | 선택자와 미디어 쿼리를 조정합니다 |
| PHP 수정 후 빈 화면 | PHP 문법 오류 | 오류 로그 확인 | 최근 코드를 되돌립니다 |
| 특정 플러그인 사용 시 충돌 | 출력 순서 충돌 | 플러그인 충돌 점검 | 하나씩 비활성화해 범위를 좁힙니다 |
- 관리자 화면 대신 파일 관리자나 FTP로 접속합니다.
- 최근 수정한 `functions.php`의 변경 부분을 되돌립니다.
- 사이트 화면과 관리자 화면의 복구 여부를 확인합니다.
- 디버그 모드를 켜 오류 로그의 파일명과 줄 번호를 확인합니다.
- 스테이징 환경에서 수정 코드를 다시 검증합니다.
흰 화면 해결을 서두르다 원인 확인 전 부모 테마를 삭제하면 복구가 더 어려워질 수 있습니다. 차일드 테마 문제는 부모 테마 인식 오류, 스타일 미적용 해결, PHP 문법 오류를 나눠 보면 빠릅니다. 삭제 전 주의사항을 지키고, 캐시 삭제도 브라우저, 사이트, CDN 순서로 정리하세요.
업데이트와 배포를 위한 장기 유지보수
차일드 테마는 업데이트 보존을 돕지만 모든 충돌을 알아서 막아주지는 않습니다. 부모 테마의 템플릿 구조나 함수가 바뀌면 자식 파일과 맞지 않을 수 있어요. 그래서 워드프레스 운영에서는 백업 생성, 변경 사항 테스트, 업데이트 전 점검이 반복 절차가 되어야 합니다.
- 운영 사이트의 파일과 데이터베이스를 백업합니다.
- 자식 파일의 변경 사항을 Git 저장소에 기록합니다.
- 스테이징 환경에서 부모 테마를 먼저 업데이트합니다.
- 주요 템플릿과 기능을 테스트합니다.
- 문제가 없을 때 운영 사이트에 배포합니다.
- 이상이 발견되면 준비한 절차에 따라 이전 상태로 복원합니다.
| 점검 영역 | 확인 내용 | 권장 시점 |
|---|---|---|
| 템플릿 호환성 | 오버라이드 파일 차이 | 부모 테마 업데이트 후 |
| PHP 오류 | 로그와 화면 표시 | 배포 전 |
| CSS 표시 | 주요 기기 화면 | 변경 사항 테스트 때 |
| 자바스크립트 동작 | 메뉴와 버튼 반응 | 배포 직전 |
| 페이지 성능 | 불필요한 요청 여부 | 정기 점검 때 |
업데이트 보존을 오래 유지하려면 버전 관리 시스템을 가볍게라도 써보세요. Git 저장소에 수정 이유와 관련 버전을 남기면 배포 방법을 되짚기 쉽습니다. 더 이상 쓰지 않는 오버라이드 파일은 영향 검토와 백업 뒤 정리하는 것이 유지보수 전략과 성능 최적화에 도움이 됩니다.
워드프레스 차일드 테마 만들기 마무리
처음에는 부모 테마와 차일드 테마의 관계가 헷갈렸지만, 핵심은 간단했습니다. 원본은 그대로 두고 내가 바꿀 파일만 따로 관리하는 것이죠. 폴더명 확인, `style.css`, `functions.php`, 활성화, 테스트 순서만 지키면 업데이트 때 수정 내용이 사라질 걱정을 크게 줄일 수 있습니다. 작은 CSS부터 시작해보고, 파일 변경은 스테이징에서 먼저 확인해보세요.
