CSS 재정의 파일 작업
이 문서에서는 Cascading 스타일 Sheets(CSS) 재정의 파일을 사용하는 이유, 시기 및 방법에 대해 설명합니다 Microsoft Dynamics 365 Commerce.
영구 사이트 스타일은 일반적으로 사이트의 테마를 통해 처리해야 합니다. 테마는 사이트의 모든 페이지에 있는 모듈에 대한 기본 CSS 및 스타일 설정을 제공합니다. 테마는 SDK(온라인 소프트웨어 개발 키트)를 사용하여 Dynamics 365 Commerce 만들어지며 LCS(Lifecycle Services)를 통해 Microsoft Dynamics 웹 사이트에 배포됩니다. 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 탭을 선택합니다 (아직 선택되지 않은 경우).
Available overrides( 사용 가능한 CSS 재정의)에서 Upload file(파일 업로드 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 재정의 파일을 빠르게 변경하는 데 유용합니다.