테마에 사용자 지정 CSS 추가
CSS(캐스케이딩 스타일 시트)는 테마에서 요소가 표시되는 방식을 변경하고 한 번에 여러 페이지의 모양을 제어할 수 있습니다. 사용자 지정 CSS 기능을 이용하여 테마에 기본으로 제공되는 설정 외에 테마를 사용자 지정할 수 있습니다. 전체 테마 또는 테마 내 템플릿의 특정 섹션에 사용자 지정 CSS를 추가할 수 있습니다. 사용자 지정 CSS는 결제 페이지에서 지원되지 않습니다.
CSS를 사용자 지정하려면 CSS 및 HTML에 대해 어느 정도 알고 있어야 합니다. 테마 사용자 지정 전에 먼저 사용 가능한 지원 수준을 알아두는 것이 좋습니다.
이 페이지의 정보
사용자 지정 CSS 사용 시 고려 사항
테마에 사용자 지정 CSS를 추가하기 전에 다음 고려 사항을 검토하십시오.
-
사용자 지정 CSS에서는 다음 CSS 선택기가 지원되지 않습니다.
- at-규칙
@import,@charset및@namespace를 사용할 수 없습니다. - 섹션 수준 CSS의 경우 at-규칙
@media,@container,@layer및@supports가 허용됩니다. - 섹션 수준 CSS의 경우
shopify-section클래스를 사용하여 테마에서 렌더링한 래핑 Shopify 섹션 요소의 ID 또는 클래스를 대상으로 지정할 수 없습니다.
- at-규칙
사용자 지정 CSS 규칙이 상위 섹션 요소를 래핑하는 태그로 선언된 경우 하위 태그로 간주되고 스타일 지정 규칙이 해당 섹션에 적용됩니다. 기본적으로 상위 섹션은
<div>태그로 래핑되지만 테마 개발자가 섹션 스키마에서 허용된 값으로 설정할 수 있습니다.현재 사용자 지정 CSS에서 URL을 사용하는 경우 https://cdn.shopify.com 도메인만 허용됩니다.
사용자 지정 글꼴은 제한되지 않습니다. 그러나 사용자 지정 글꼴은 텍스트를 렌더링하기 전에 브라우저에서 다운로드하는 별도의 리소스로, 스토어의 전체 성능에 영향을 줄 수 있습니다. 상점이 사용자 지정 글꼴로 인해 부정적인 영향을 받지 않도록 하는 것은 판매자의 책임입니다. 테마에서 사용자 지정 글꼴을 사용하는 방법을 알아보십시오.
전체 테마에 영향을 주는 CSS 규칙은 1,500자로 제한됩니다.
특정 섹션에 영향을 주는 CSS 규칙은 500자로 제한됩니다.
사용하는 CSS 선택기 또는 클래스에 따라 테마를 업데이트하면 사용자 지정 CSS의 작동이 중지될 수 있습니다.
Shopify는 고급 테마 사용자 지정을 지원하지 않습니다. 사용자 지정 CSS에서 이러한 제한과 관련된 오류가 발생하고 오류의 원인을 확인할 수 없는 경우 사용 가능한 기타 지원 리소스 목록을 참조하십시오.
사용자 지정 CSS 추가
사용자 지정 CSS는 결제 페이지를 제외한 온라인 스토어의 모든 페이지에 영향을 미치는 전체 테마에 추가할 수 있습니다. 예를 들어 전체 스토어에서 버튼이 표시되는 방식을 변경할 수 있습니다.
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 사용자 지정을 클릭합니다.
- 테마 설정을 클릭합니다.
- 사용자 지정 CSS를 클릭합니다.
- 코드를 추가합니다.
- 저장을 클릭합니다.
테마의 특정 섹션에 사용자 지정 CSS를 추가할 수도 있습니다. 테마 섹션에 사용자 지정 CSS를 추가하는 경우 CSS 범위가 해당 섹션으로 지정됩니다. 예를 들어 사용자 지정 글꼴 크기나 배경 색상을 단일 섹션에 적용할 수 있습니다.
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 사용자 지정을 클릭합니다.
- CSS를 추가하려는 섹션을 클릭합니다.
- 섹션 속성 패널 하단에서 사용자 지정 CSS를 클릭합니다.
- 코드를 추가합니다.
- 저장을 클릭합니다.
CSS에 대한 추가 리소스
CSS를 사용자 지정하려면 CSS 및 HTML에 대해 어느 정도 알고 있어야 합니다. 테마 사용자 지정 전에 먼저 사용 가능한 지원 수준을 알아두는 것이 좋습니다.
CSS에 대해 자세히 알아보려면 다음 리소스를 살펴볼 수 있습니다.