> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 커스텀 CSS

> CSS를 작성하여 카트 드로어의 디자인을 커스터마이징하세요.

<div id="overview">
  # 개요
</div>

이 섹션에서는 기존 카트 요소의 모양과 느낌을 변경하거나 편집기를 통해 추가한 커스텀 HTML에 스타일을 적용할 수 있어요.

<div id="where-to-find-it">
  ## **위치 안내**
</div>

다음 경로로 이동하세요:\
**Upcart > Cart Editor > Settings > Custom CSS**\
Settings는 탭이 나열된 행이며, Custom CSS는 Custom HTML과 함께 그중 하나예요. 보이지 않는다면 **More settings** 뒤에 숨어 있어요.

<div id="how-it-works">
  ## **작동 방식**
</div>

다음과 같은 용도로 CSS를 추가할 수 있어요:

* 기본 카트 요소에 스타일 지정
* 커스텀 HTML의 모양 수정
* 간격, 정렬, 타이포그래피 등 조정

입력하는 동안 **자동 완성 팝업**이 유효한 Upcart 선택자를 제안하여 편집 속도를 높여줘요. 제안을 선택하면 규칙이 자동 완성되고 코드 구조를 잡는 데 도움이 돼요. 변경 사항이 예상대로 나타나지 않으면 브라우저와 Upcart 편집기 양쪽의 캐시 새로 고침, CSS 배치 확인, CSS 규칙의 적절한 특이성 확보 등 일반적인 문제 해결 방법을 확인해 보세요.

<div id="using-selectors">
  ## **선택자 사용하기**
</div>

Upcart는 다양한 커스텀 선택자를 제공해요. \*\*"Show list"\*\*를 클릭하면 사용 가능한 모든 옵션을 볼 수 있어요. 스토어프론트에 의도치 않은 변경이 생기지 않도록 `.upcart-cart`로 범위를 지정하지 않은 `body`, `div`, `h3` 같은 전역 선택자는 사용을 피하세요. 스타일이 올바르게 적용되지 않는 경우에는 CSS 특이성을 높이거나 CSS 규칙에 `!important`를 추가하는 것을 고려하세요. 이렇게 하면 충돌하는 스타일을 확실히 재정의할 수 있어요. 예시:

```
.upcart-cart .upcart-checkout-button {    border-radius: 20px !important;    background-color: #CFA17E !important;    color: #1A1A1A !important;}
```

예시 (안전한 선택자):

```
.upcart-cart h3 { font-size: 20px; }
```

<div id="example-thank-you-message-styling">
  ## **예시: 감사 메시지 스타일링**
</div>

체크아웃 버튼 아래에 다음 커스텀 HTML을 추가했다고 가정해 볼게요:

```
<div class="thank-you-message">Thanks for shopping with us!</div>
```

CSS가 없으면 메시지가 밋밋하게 보여요. 스타일을 지정하려면:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.thank-you-message { color: green; font-size: 16px; font-weight: bold; text-align: center; margin-top: 5px; }
```

<div id="common-problems-and-solutions">
  # 자주 발생하는 문제와 해결 방법
</div>

<div id="css-not-appearing-on-mobile-devices">
  ## 모바일 기기에서 CSS가 나타나지 않는 경우
</div>

커스텀 텍스트나 스타일이 모바일에서 보이지 않는다면:

* **Upcart Editor**와 모바일 브라우저 양쪽에서 페이지를 새로 고침하여 캐시된 버전을 지우세요.
* 최신 게시된 카트 버전이 활성화되어 있는지 확인하세요.
* CSS가 **Upcart > Cart Editor > Settings**의 **Custom CSS** 탭에 저장되어 있는지 확인하세요.

<div id="discrepancies-between-editor-and-live-store">
  ## 편집기와 라이브 스토어 간 차이
</div>

편집기에서는 스타일이 올바르게 표시되지만 라이브 사이트에서는 그렇지 않다면, 선택자 특이성을 높이거나 핵심 규칙에 `!important`를 추가해야 할 수 있어요.

```
.upcart-cart .upcart-checkout-button { font-size: 18px !important; background: blue !important; color: white !important; }
```

<div id="incorrect-css-selector-usage">
  ## 잘못된 CSS 선택자 사용
</div>

올바른 클래스나 ID를 대상으로 지정했는지 확인하세요. 의도치 않은 결과를 피하려면 Upcart 전용 요소에는 항상 `.upcart-` 같은 접두사를 포함하세요. 스타일이 예상대로 적용되지 않으면 `.thank-you-message` 선택자가 의도한 HTML 요소를 정확히 대상으로 하는지 확인하고, CSS 코드가 올바른 탭(Upcart > Cart Editor > Settings > Custom CSS)에 배치되어 있는지 점검하세요.

***

커스터마이징 관련 지원:

Upcart 지원팀은 커스텀 CSS의 구현이나 디버깅을 도와드릴 수 없어요. 고급 스타일링 지원이 필요하면 Shopify Expert와 협업하는 것을 권장해요. 커스텀 CSS 문제 해결은 모바일 기기에서 스타일이 누락되는 문제, 편집기 미리보기와 라이브 스토어프론트 간 차이, 선택자 배치 오류 등의 해결 방법이 안내된 자주 발생하는 문제 섹션을 참고하세요.