CSS 재정의 파일 작업
이 문서에서는 CSS(Cascading Style Sheet)(CSS) 재정의 파일을 사용하는 이유, 시기 및 방법을 설명합니다 Microsoft Dynamics 365 Commerce.
영구 사이트 스타일은 일반적으로 사이트 테마를 통해 처리되어야 합니다. 테마는 사이트의 모든 페이지에 있는 모듈에 대한 기본 CSS 및 스타일 설정을 제공합니다. 테마는 Dynamics 365 Commerce 온라인 소프트웨어 개발 키트(SDK)를 사용하여 생성되며 Microsoft Dynamics LCS(라이프사이클 서비스)를 통해 웹사이트에 배포됩니다. SDK의 테마 디버깅 기능과 모듈 인터페이스 구성은 사이트 개발자가 사용자 정의 가능하고 응집력 있는 사이트 디자인 패키지를 만드는 데 도움이 됩니다. 이러한 디자인 패키지가 사이트에 배포되면 사이트 작성자는 사이트 개발 대신 콘텐츠 생성, 편집 및 게시에 집중할 수 있습니다.
테마의 일반적인 수명 주기를 고려할 때 개발자가 SDK 및 LCS 배포 파이프라인을 통해 스타일을 변경하는 데 의존하는 것은 일부 시나리오에서 금지될 수 있습니다. SDK가 구성되지 않았거나 LCS 배포를 기다릴 시간이 없는 경우 사이트 프로토타입이나 핫픽스가 번거로워 보일 수 있습니다.
이러한 시나리오에서는 CSS 파일 재정의가 도움이 될 수 있습니다. 상거래 작성 도구에서 인증된 사용자는 CSS 파일을 업로드하고 미리 본 다음 활성화하여 사이트 테마를 재정의할 수 있습니다. SDK 또는 LCS 배포의 오버헤드가 필요하지 않습니다. 재정의 파일에 지정된 CSS 재정의는 단일 텍스트 스타일 변경만큼 작을 수도 있고 전체 브랜드 점검만큼 광범위할 수도 있습니다.
재정의 파일을 사용하기 전에 CSS 다음 제한 사항에 유의하세요.
- 사이트에서는 한 번에 하나의 CSS 재정의 파일만 활성화할 수 있습니다. 따라서 모든 활성 재정의는 단일 재정의 파일에 있어야 합니다.
- 상거래 작성 도구에서 재정의를 미리 볼 수 있지만 재정의로 인해 발생하는 버그를 식별하는 데 도움이 되는 전용 디버깅 기능은 없습니다. 즉, CSS 재정의 파일을 사용하면 SDK가 모듈 및 작성 유효성 검사를 위해 제공하는 것과 동일한 도구 세트가 없습니다.
그럼에도 불구하고 CSS 재정의 파일은 전체 테마 업데이트가 개발 및 배포되기 전에 디자인을 프로토타입하거나 핫픽스를 구현하는 빠른 방법을 제공합니다.
CSS 재정의 파일 만들기
CSS 재정의 파일을 생성하려면 통합 개발 환경(IDE), 텍스트 편집기 또는 소스 코드 편집기를 사용할 수 있습니다. 일반적인 접근 방식은 브라우저에서 표준 웹 디버거를 사용하여 기존 사이트의 스타일 선택기, 속성 및 값을 식별하는 것입니다. 대부분의 브라우저에서는 값을 변경하고 디버거에서 미리 볼 수 있습니다. 원하는 변경 사항을 확인한 후 해당 내용을 자신의 CSS 파일에 저장할 수 있습니다.
CSS 재정의 파일 업로드
CSS Commerce 사이트에 파일을 업로드하려면 다음 단계를 따르세요.
저작 도구에서 사이트로 이동합니다.
왼쪽 탐색 창에서 디자인을 선택합니다.
메모
사용 중인 상거래 작성 도구의 버전에 따라 를 선택하기 전에 탐색 창에서 설정 을 확장해야 할 수도 있습니다. 디자인.
기본 디자인 창 상단에서 CSS 재정의 탭이 아직 선택되지 않은 경우 선택합니다.
사용 가능한 CSS 재정의에서 파일 업로드 CSS 를 선택합니다. 파일 탐색기 창이 나타납니다.
파일 탐색기에서 CSS 파일을 찾아 선택한 다음 열기를 선택합니다. 이제 업로드된 CSS 파일이 사용 가능 CSS 재정의 아래에 표시됩니다.
CSS 재정의 파일 미리보기
재정의 파일을 라이브 사이트에서 활성화하기 전에 CSS 미리 보려면 다음 단계를 따르세요.
- 왼쪽 탐색 창에서 디자인을 선택한 다음 CSS 재정의 탭에서 사용 가능한 CSS 재정의, 미리 보려는 CSS 파일을 찾으세요.
- CSS 파일 이름 옆에 있는 사이트 미리보기를 선택합니다.
- URL 선택 대화 상자에서 재정의 적용을 확인하려는 사이트의 URL을 선택한 다음 확인을 선택합니다.
- 선택한 URL에 변형이 여러 개 있는 경우 표시되는 미리 변형 변형 대화 상자에서 원하는 변형을 선택하세요.
사이트에 대한 스타일 재정의를 확인할 수 있는 새 브라우저 탭 또는 창이 열립니다. 그런 다음 검토 및 피드백을 위해 인증된 다른 상거래 사용자와 URL을 공유할 수 있습니다.
라이브 사이트에서 CSS 재정의 파일 활성화
재정의 파일을 미리 보고 승인한 후 CSS 실시간 사이트에서 활성화할 수 있습니다.
메모
사이트에서는 한 번에 하나의 CSS 재정의 파일만 활성화할 수 있습니다. 새 재정의 파일을 활성화하면 이전 재정의 파일이 비활성화됩니다. 따라서 필요한 모든 재정의가 단일 CSS 재정의 파일에 있는지 확인하세요.
재정의 파일을 활성화하려면 CSS 다음 단계를 따르세요.
- 왼쪽 탐색 창에서 디자인을 선택한 다음 CSS 재정의 탭에서 사용 가능한 CSS 재정의, 활성화하려는 CSS 파일을 찾으세요.
- CSS 파일 이름 아래에서 활성화를 선택합니다. 재정의 파일은 라이브 사이트에서 즉시 활성화됩니다.
라이브 사이트에서 CSS 재정의 파일 비활성화
사이트에서 CSS 재정의 파일을 비활성화하려면 다음 단계를 따르세요.
- 왼쪽 탐색 창에서 디자인을 선택한 후 CSS 재정의 탭에서 사용 가능한 CSS 재정의, 비활성화하려는 CSS 파일을 찾으세요.
- CSS 파일 이름 아래에서 비활성화를 선택합니다. 재정의 파일은 라이브 사이트에서 즉시 비활성화됩니다.
팁
CSS 파일 재정의에 대한 추가 옵션에 액세스하려면 파일 이름 옆에 있는 줄임표(... CSS )를 선택하세요. 다운로드, 이름 바꾸기 및 바꾸기 옵션 기존 CSS 재정의 파일을 빠르게 변경하는 데 유용합니다.