카페24 쇼핑몰 디자인 수정 방법 및 CSS 편집 위치

카페24 쇼핑몰 디자인 수정 방법 및 CSS 편집 위치

1. 디자인(스킨) 수정 방법

• 카페24 관리자 페이지에 접속
  [디자인] > [디자인 보관함] 메뉴로 이동합니다12.
• 수정할 디자인/스킨 선택
  편집하려는 스킨(PC, 모바일 별도)을 선택 후 '편집' 버튼을 클릭합니다12.
• 스마트디자인 편집창에서 수정
  스마트디자인 편집창이 열리면 화면별로 원하는 영역(헤더, 바디, 푸터 등)을 골라 디자인을 커스터마이즈할 수 있습니다34.
  드래그&드롭, 속성 변경 등 화면 방식의 간단한 디자인 수정도 지원합니다.

2. CSS 직접 수정 가능 여부

• CSS 직접 수정 가능
  스마트디자인 편집창에서는 HTML 소스뿐 아니라 CSS 파일도 직접 열어서 수정할 수 있습니다356.
• 진입 방법:
  • 화면 상단의 <!--@css(경로)--> 표시 옆의 '파일열기'를 클릭하면 해당 CSS를 바로 편집할 수 있습니다67.
  • 원하는 파일(.css)을 찾아서 컬러, 폰트, 마진, 패딩 등 스타일을 직접 변경할 수 있습니다.

3. CSS 수정 위치 찾는 팁

• 특정 요소의 CSS 확인
  • 크롬 브라우저 개발자도구(F12)로 원하는 요소의 CSS 선택자 및 파일 위치를 확인할 수 있습니다89.
• 실제 CSS 파일 열기
  • 스마트디자인 편집창 > HTML 편집 영역 상단에서 관련 CSS 경로 확인67.
  • 경로를 따라가 '파일열기' 클릭 → 직접 내용 수정 후, 저장해야 쇼핑몰 반영.

4. 대표 기능 요약 표

| 수정 방식 | 접근 경로 | 가능 범위 |
|:++++++++++++++:|:---------------------------------------------:|:---------------:|
| 화면 기반 | 디자인 보관함 > 편집 > 스마트디자인(간단) | 배치, 모듈, 속성 등 |
| CSS 직접 수정 | 스마트디자인 편집창 > 관련페이지 파일 > CSS 파일 | 색상, 폰트, 배경, 레이아웃 세부 지정 등 |

5. 참고 사항

• 디자인 스킨마다 클래스명, 구조가 달라 CSS 파일 위치가 다를 수 있습니다.
• CSS, HTML 수정 시 반드시 '저장'을 눌러야 실제 적용됩니다.
• 잘못 수정할 경우를 대비해 파일 백업 또는 복사본 보관을 권장합니다2.

카페24는 HTML/CSS 기반으로 높은 수준의 디자인 자유도를 제공하며, 관리자 메뉴에서 손쉽게 디자인 및 CSS 수정이 가능합니다36.

더 자세한 가이드와 실제 예시는 카페24 공식 도움말 또는 동영상 강좌를 참고해 실습하면 좋습니다.

1. https://support.cafe24.com/hc/ko/articles/8466402024985-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%87%BC%ED%95%91%EB%AA%B0-%EC%8A%A4%EB%A7%88%ED%8A%B8%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8E%B8%EC%A7%91%EC%B0%BD%EC%9D%80-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9D%B4%EC%9A%A9%ED%95%98%EB%82%98%EC%9A%94
2. https://brunch.co.kr/@ziinup/31
3. https://support.cafe24.com/hc/ko/articles/7749165125401-%EC%8A%A4%EB%A7%88%ED%8A%B8%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8E%B8%EC%A7%91
4. https://img.echosting.cafe24.com/guide/cafe24_smartdesign_editorguide.pdf
5. https://itdesign.tistory.com/20
6. https://support.cafe24.com/hc/ko/articles/8466199568281--%EB%94%94%EC%9E%90%EC%9D%B8%EA%B4%80%EB%A6%AC-%ED%8E%B8%EC%A7%91%EC%B0%BD%EC%97%90%EC%84%9C-CSS-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%B0%BE%EA%B3%A0-%EC%8B%B6%EC%96%B4%EC%9A%94
7. https://sdsupport.cafe24.com/board/tip/read.html?no=582&board_no=6
8. https://www.youtube.com/watch?v=APgzLrmHX6g
9. https://www.youtube.com/watch?v=7i4S5_zrPU4
10. https://kindkimyoung.tistory.com/47
11. https://www.youtube.com/watch?v=WAXKtNWZ1Lw
12. https://sunnyst.com/product/%EC%8A%A4%EB%A7%88%ED%8A%B8%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%88%98%EC%A0%95-%EA%B2%BD%EB%A1%9C-%EC%B0%BE%EC%95%84%EA%B0%80%EA%B8%B0/127/
13. https://support.cafe24.com/hc/ko/articles/8433929854489-%EC%87%BC%ED%95%91%EB%AA%B0-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%80-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%84%A4%EC%A0%95%ED%95%98%EB%82%98%EC%9A%94
14. https://support.cafe24.vn/hc/ko-kr/articles/900004764226--%EC%97%90%EB%94%94%EB%B4%87-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%97%90%EB%94%94%EB%B4%87-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%84-HTML-CSS%EB%A1%9C-%EC%88%98%EC%A0%95%ED%95%98%EA%B3%A0-%EC%8B%B6%EC%96%B4%EC%9A%94
15. https://support.cafe24.com/hc/ko/articles/8469844678297-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%87%BC%ED%95%91%EB%AA%B0-%EB%A9%94%EC%9D%B8-%EC%83%81%ED%92%88-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%B3%80%EA%B2%BD-%EB%B0%A9%EB%B2%95
16. https://d.cafe24.com/story/story_view?no=3594
17. https://www.youtube.com/watch?v=gjTw5c0aHHg
18. https://d.cafe24.com/story/story_view?no=3597
19. https://www.youtube.com/watch?v=sH9miKYSTS0
20. https://store.cafe24.com/kr/story/3597