Dynamics 365 Commerce의 소매 관심 그룹이 Yammer에서 Viva Engage로 이동했습니다. 새 Viva Engage 커뮤니티에 액세스할 수 없는 경우 이 양식(https://aka.ms/JoinD365commerceVivaEngageCommunity)을 작성하여 추가하고 최신 토론에 계속 참여하세요.
이 문서에서는 Microsoft Dynamics 365 Commerce에서 Cascading Style Sheets (CSS) 재정의 파일을 왜, 언제, 어떻게 사용해야 하는지 설명합니다.
영구 사이트 스타일은 일반적으로 사이트의 테마를 통해 처리해야 합니다. 테마는 사이트의 모든 페이지에 있는 모듈에 대한 기본 CSS 및 스타일 설정을 제공합니다. 테마는 Dynamics 365 Commerce 온라인 소프트웨어 개발 키트(SDK)를 사용하여 생성되며, Microsoft Dynamics Lifecycle Services(LCS)를 통해 웹 사이트에 배포됩니다. SDK의 테마 디버깅 기능 및 모듈 인터페이스 구성은 사이트 개발자가 사용자 지정 가능하고 응집력 있는 사이트 디자인 패키지를 만드는 데 도움이 됩니다. 이러한 디자인 패키지를 사이트에 배포하면 사이트 작성자는 사이트 개발 대신 콘텐츠를 만들고, 편집하고, 게시하는 데 집중할 수 있습니다.
테마의 일반적인 수명 주기를 감안할 때 SDK 및 LCS 배포 파이프라인을 통해 스타일을 변경하기 위한 개발자에 대한 종속성은 일부 시나리오에서 엄두도 못 낼 수 있습니다. 사이트 프로토타입 또는 핫픽스는 SDK가 구성되지 않았거나 LCS 배포를 기다릴 시간이 없는 경우 번거로울 수 있습니다.
이러한 경우 CSS 재정의 파일이 도움이 될 수 있습니다. Commerce 편집 도구에서 인증된 사용자는 CSS 파일을 업로드하고 미리 보기 후 활성화하여 사이트의 테마를 덮어쓸 수 있습니다. SDK 또는 LCS 배포의 오버헤드는 필요하지 않습니다. CSS 재정의 파일에서 지정된 재정의는 단일 텍스트 스타일 변경과 같은 작은 변경 사항부터 브랜드 전체 리뉴얼과 같은 광범위한 변경 사항까지 다양할 수 있습니다.
CSS 재정의 파일을 사용하기 전에 다음 제한 사항을 주의하시기 바랍니다.
- 사이트에서는 한 번에 하나의 CSS 재정의 파일만 활성화될 수 있습니다. 따라서 모든 활성 재정의는 단일 재정의 파일에 있어야 합니다.
- Commerce 작성 도구에서 재정의를 미리 볼 수 있지만 재정의로 인해 발생하는 버그를 식별하는 데 도움이 되는 전용 디버깅 기능은 없습니다. 즉, CSS 재정의 파일을 사용할 때 SDK가 모듈 및 작성 검증에 제공하는 동일한 도구 세트를 사용할 수 없습니다.
그러나 CSS 재정의 파일은 전체 테마 업데이트가 개발 및 배포되기 전에 디자인을 프로토타입을 만들거나 핫픽스를 구현하는 빠른 방법을 제공합니다.
CSS 재정의 파일 만들기
CSS 재정의 파일을 생성하려면 통합 개발 환경(IDE), 텍스트 편집기 또는 소스 코드 편집기를 사용할 수 있습니다. 일반적인 방법은 브라우저에서 표준 웹 디버거를 사용하여 기존 사이트의 스타일 선택기, 속성 및 값을 식별하는 것입니다. 대부분의 브라우저에서는 값을 변경하고 디버거에서 미리 볼 수 있습니다. 변경하려는 내용을 식별한 후 자신의 CSS 파일에 저장할 수 있습니다.
CSS 재정의 파일 업로드
Commerce에서 사이트에 CSS 파일을 업로드하려면 다음 단계를 따르세요.
제작 도구에서 사이트로 이동합니다.
왼쪽 탐색 창에서 디자인을 선택합니다.
참고
사용 중인 Commerce 편집 도구 버전에 따라 디자인을 선택하기 전에 탐색 창에서 설정을 확장해야 할 수 있습니다.
주 디자인 창 상단에서 CSS 재정의 탭이 선택되어 있지 않다면 해당 탭을 선택합니다.
사용 가능한 CSS 재정의에서 CSS 파일 업로드를 선택합니다. 파일 탐색기 창이 나타납니다.
파일 탐색기에서 CSS 파일을 찾아 선택한 다음 열기를 선택합니다. 업로드된 CSS 파일이 이제 사용 가능한 CSS 재정의 아래에 표시됩니다.
CSS 재정의 파일 미리 보기
실시간 사이트에서 CSS 재정의 파일을 활성화하기 전에 미리 보려면 다음 단계를 따르세요.
- 왼쪽 탐색 창에서 디자인을 선택한 다음 CSS 재정의 탭의 사용 가능한 CSS 재정의에서 미리 보려는 CSS 파일을 찾습니다.
- CSS 파일 이름 옆에 있는 프리뷰 사이트를 선택합니다.
- URL 선택 대화 상자에서 재정의를 적용할 사이트의 URL을 선택한 다음 확인을 클릭합니다.
- 선택한 URL에 여러 변형이 있는 경우, 표시되는 변형 미리 보기 대화 상자에서 원하는 변형을 선택합니다.
새 브라우저 탭 또는 창이 열리면 사이트에 대한 스타일 재정의의 유효성을 검사할 수 있습니다. 그런 다음 검토 및 피드백을 위해 인증된 다른 Commerce 사용자와 URL을 공유할 수 있습니다.
실시간 사이트에서 CSS 재정의 파일 활성화
CSS 재정의 파일을 미리 보고 승인한 후에는 실시간 사이트에서 활성화할 수 있습니다.
참고
사이트에서는 한 번에 하나의 CSS 재정의 파일만 활성화될 수 있습니다. 새 재정의 파일을 활성화하면 이전 재정의 파일이 비활성화됩니다. 따라서 필요한 모든 재정의가 단일 CSS 재정의 파일에 포함되어 있는지 확인하세요.
CSS 재정의 파일을 활성화하려면 다음 단계를 따르세요.
- 왼쪽 탐색 창에서 디자인을 선택한 다음 CSS 재정의 탭의 사용 가능한 CSS 재정의에서 활성화하려는 CSS 파일을 찾습니다.
- CSS 파일 이름에서 활성화를 선택합니다. 재정의 파일은 라이브 사이트에서 즉시 활성화됩니다.
실시간 사이트에서 CSS 재정의 파일 비활성화
사이트에서 CSS 재정의 파일을 비활성화하려면 다음 단계를 따르세요.
- 왼쪽 탐색 창에서 디자인을 선택한 다음 CSS 재정의 탭의 사용 가능한 CSS 재정의에서 비활성화하려는 CSS 파일을 찾습니다.
- CSS 파일 이름에서 비활성화를 선택합니다. 재정의 파일은 라이브 사이트에서 즉시 비활성화됩니다.
팁
CSS 재정의 파일에 대한 추가 옵션에 액세스하려면 CSS 파일 이름 옆에 있는 줄임표(…)를 선택하세요. 다운로드, 이름 바꾸기 및 대체 옵션은 기존 CSS 재정의 파일을 빠르게 변경할 때 유용합니다