테마에 커스텀 CSS 추가

CSS(Cascading Style Sheet)는 테마에 요소가 표시되는 방식을 변경하며 한 번에 여러 페이지의 모양을 제어할 수 있습니다. 커스텀 CSS 기능을 사용하면 테마에 내장된 설정 이상으로 테마를 맞춤 설정할 수 있습니다. 예를 들어 테마의 색상 설정에서 CSS를 사용하여 그라데이션을 설정할 수 있습니다. 테마 전체 또는 테마 내 템플릿의 특정 섹션에 커스텀 CSS를 추가할 수 있습니다. 커스텀 CSS는 결제 페이지에서 지원되지 않습니다.

CSS를 맞춤 설정하려면 CSS 및 HTML에 대한 지식이 필요합니다. 테마를 맞춤 설정하기 전에 사용 가능한 지원 수준을 이해해야 합니다.

이 페이지의 내용

커스텀 CSS 사용 시 고려 사항

테마에 커스텀 CSS를 추가하기 전에 다음 고려 사항을 검토하십시오.

다음 CSS 선택자와 속성은 커스텀 CSS에서 지원되지 않습니다.
- @ 규칙 @import, @charset, @namespace는 사용할 수 없습니다.
- 섹션 수준 CSS의 경우 @ 규칙 @media, @container, @layer, @supports만 허용됩니다.
- 섹션 수준 CSS의 경우, 테마에서 렌더링하는 shopify-section 클래스가 있는 래핑 Shopify 섹션 요소의 ID 또는 클래스를 타겟팅할 수 없습니다.
- content 속성은 커스텀 CSS에서 사용할 수 없습니다.
상위 섹션 요소를 래핑하는 태그로 커스텀 CSS 규칙이 선언된 경우, 해당 태그는 하위 태그로 간주되어 해당 섹션에 스타일 지정 규칙이 적용됩니다. 기본적으로 상위 섹션은 <div> 태그로 래핑되지만, 테마 개발자는 섹션 스키마의 허용된 값 중 하나로 이를 설정할 수 있습니다.
현재 커스텀 CSS에서 URL을 사용할 때는 https://cdn.shopify.com 도메인만 허용됩니다.
커스텀 폰트는 제한되지 않습니다. 그러나 커스텀 폰트는 텍스트가 렌더링되기 전에 브라우저에서 다운로드하는 별도의 리소스이므로 스토어의 전체 성능에 영향을 줄 수 있습니다. 커스텀 폰트로 인해 스토어프론트가 부정적인 영향을 받지 않도록 해야 합니다. 테마에서 커스텀 폰트를 사용하는 방법에 대해 알아보세요.
테마 전체에 영향을 미치는 CSS 규칙은 1,500자로 제한됩니다.
특정 섹션에 영향을 미치는 CSS 규칙은 500자로 제한됩니다.
사용하는 CSS 선택자 또는 클래스에 따라 테마를 업데이트하면 커스텀 CSS가 작동하지 않을 수 있습니다.

Shopify에서는 고급 테마 맞춤 설정을 지원하지 않습니다. 커스텀 CSS에서 이러한 제한과 관련된 오류가 발생했으나 원인을 확인할 수 없는 경우 사용 가능한 기타 지원 리소스 목록을 참조하세요.

커스텀 CSS 추가

결제 페이지를 제외하고 온라인 스토어의 모든 페이지에 영향을 미치는 커스텀 CSS를 테마 전체에 추가할 수 있습니다. 예를 들어, 스토어 전체에서 버튼이 표시되는 방식을 변경할 수 있습니다.

단계:

Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
테마 편집을 클릭합니다.
테마 설정을 클릭합니다.
커스텀 CSS를 클릭합니다.
코드를 추가합니다.
저장을 클릭합니다.

커스텀 CSS는 테마의 특정 섹션에 추가할 수도 있습니다. 테마의 섹션에 커스텀 CSS를 추가하면 CSS의 범위가 해당 섹션으로 지정됩니다. 예를 들어 단일 섹션에 커스텀 글꼴 사이즈 또는 배경 색상을 적용할 수 있습니다.

단계:

Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
테마 편집을 클릭합니다.
CSS를 추가하려는 섹션을 클릭합니다.
섹션 속성 패널 하단에서 사용자 지정 CSS를 클릭합니다.
코드를 추가합니다.
저장을 클릭합니다.

CSS 관련 추가 리소스

CSS를 맞춤 설정하려면 CSS 및 HTML에 대한 지식이 필요합니다. 테마를 맞춤 설정하기 전에 사용 가능한 지원 수준을 이해해야 합니다.

CSS에 대해 더 자세히 알아보려면 다음 리소스를 살펴볼 수 있습니다.