스타일 사전 설정 작업

아티클
12/11/2024

이 문서에서는 사이트 작성기에서 Microsoft Dynamics 365 Commerce 사이트 스타일 사전 설정을 사용하는 방법에 대해 설명합니다.

스타일 사전 설정은 사이트 테마 전체에 걸쳐 제작 가능한 모든 스타일 값의 저장된 집합입니다. 사이트 작성기에서 사이트의 모양을 즉시 변경하는 데 사용할 수 있습니다. 스타일 사전 설정을 사용하면 Commerce 사이트 작성기 작성자가 Cascading 스타일 Sheets(CSS)를 사용하거나 테마를 배포하지 않고도 사이트 전체에서 스타일 값 세트를 빠르게 변경, 프리뷰 및 활성화할 수 있습니다. 글꼴 스타일, 버튼 스타일 및 사이트 색은 스타일 사전 설정을 통해 관리할 수 있는 스타일 변수의 일반적인 예입니다.

사이트에서 사용할 수 있는 스타일 변수 집합은 사이트의 테넌트에 배포되는 테마 및 모듈 라이브러리에 따라 결정됩니다. 온라인 소프트웨어 개발 키트(SDK)를 Dynamics 365 Commerce 사용하면 개발자가 지정된 테마에 필요한 만큼(또는 적은) 작성 가능한 스타일 변수를 구현할 수 있습니다. 더 많은 스타일 변수를 활성화함으로써 테마 개발자는 사이트 스타일에 대한 최종 선택을 사이트 작성기 작성자에게 맡길 수 있습니다. 따라서 개발자가 아닌 사용자도 도구 집합을 사용하여 사이트 스타일을 업데이트하고 프리뷰할 수 있습니다. 이 기능은 테마를 직접 변경하거나 CSS 불필요한 오버헤드가 발생하는 모든 시나리오에도 유용합니다.

작성 가능한 스타일 변수를 사용할 수 있는 테마에는 기본 스타일 사전 설정이 필요합니다. 선택적으로 배포된 테마 패키지의 일부로 추가 사전 설정 옵션을 포함할 수 있습니다. 예를 들어 단일 기본 "모던 라이트" 스타일 사전 설정이 있는 테마를 배포할 수 있습니다. 또는 기본 사전 설정 외에 "모던 어두움", "빈티지 라이트" 또는 "빈티지 어두움"과 같은 추가 스타일 사전 설정 옵션이 포함될 수 있습니다. 이러한 기본 제공 테마 사전 설정은 개발자가 만들며 새 사이트 디자인의 시작점으로 사용할 수 있습니다.

작성자는 사이트 작성기에서 테마의 기본 제공 사전 설정 중에서 선택하거나 활성화된 스타일 변수를 사용하여 고유한 스타일 사전 설정 및 사용자 정의를 만들 수 있습니다. 스타일 사전 설정은 라이브 사이트에서 활성화되기 전에 사이트 작성기에서 미리 볼 수 있습니다. 작성자의 스타일 변경 내용을 검토한 후 라이브 사이트에 대해 스타일 사전 설정을 "활성"으로 설정할 수 있습니다.

스타일 사전 설정 프리뷰

사이트 작성기에서 사이트의 스타일 사전 설정을 프리뷰하려면 다음 단계를 따라와 보세요.

사이트의 왼쪽 탐색 창에서 사이트 설정 디자인으로 > 이동합니다.
디자인 편집기 맨 위에 있는 스타일 사전 설정 탭의 사용 가능한 사전 설정 목록에서 사전 설정을 선택한 다음 보기를 선택하여 사전 설정 편집기로 이동합니다.

현재 사용 가능한 사전 설정 목록에 사전 설정이 없는 경우 사용자 정의 스타일 사전 설정을 만드는 방법에 대한 자세한 내용은 사용자 정의 스타일 사전 설정 만들기를 참조하십시오 .

메모

테마에 포함된 사전 설정은 기본 제공 배지로 표시됩니다. 이러한 기본 제공 사전 설정은 읽기 전용입니다. 기본 제공 사전 설정을 사용자 지정 가능한 새 사전 설정으로 복사하려면 사전 설정에 대한 줄임표 버튼(...)을 선택한 다음 다른 이름으로 저장을 선택합니다.
명령 모음에서 프리뷰 를 선택합니다.
사이트에서 스타일 사전 설정을 프리뷰 데 사용할 URL을 선택한 다음 확인 를 선택합니다.
변형 이름을 선택하여 프리뷰할 채널별 및 언어별 URL 변형을 선택합니다. 새 프리뷰 브라우저 창이 열리고 선택한 스타일 사전 설정이 지정된 페이지에 적용됩니다.

메모

프리뷰 URL은 영구적이고 인증됩니다. 따라서 라이브 사이트에서 "활성"으로 설정하기 전에 복사하고 붙여넣은 다음 검토를 위해 인증된 다른 동료에게 보낼 수 있습니다. 프리뷰 URL은 다른 장치, 다른 브라우저 및 다른 화면에서 스타일을 확인하는 데에도 유용합니다.

팁

스타일 사전 설정을 편집하는 동안 변경 내용의 유효성을 빠르게 검사할 수 있도록 해당 프리뷰 브라우저 창을 별도의 브라우저 창에 열어 두는 것이 도움이 될 수 있습니다. 사전 설정에 대한 변경 내용을 저장한 후 열려 있는 프리뷰 브라우저 창을 새로 고쳐 사용자 환경의 유효성을 검사합니다.

사용자 정의 스타일 사전 설정 만들기

사이트 작성기에서 사용자 정의 스타일 사전 설정을 만들려면 다음 단계를 따라와 수행합니다.

사이트의 왼쪽 탐색 창에서 사이트 설정 디자인으로 > 이동합니다.
디자인 편집기 맨 위에 있는 스타일 사전 설정 탭의 명령 모음에서 새 사전 설정을 선택합니다.
새 사전 설정의 이름과 설명을 입력하고 저장 을 선택합니다. 테마의 기본값을 시작점으로 사용하는 새로운 사용자화 가능한 사전 설정이 가리키다.

메모

또한 해당 사전 설정에 대한 줄임표 버튼(...)을 선택한 다음 다른 이름으로 저장을 선택하여기존 사전 설정에서 새 사용자 지정 스타일 사전 설정을 만들 수도 있습니다. 또는 사전 설정 편집기의 명령 모음에서 다른 이름으로 저장을 선택합니다 .

전역 및 모듈 형식 스타일 값 수정

테마의 스타일 변수 중 일부는 여러 모듈 유형 간에 공유됩니다. 이러한 스타일 변수를 전역 스타일 변수라고 합니다. 예를 들어 기본 사이트 색, 기본 글꼴 스타일 및 버튼 스타일이 있습니다. 전역 변수를 설정하면 다양한 모듈 유형에서 모양을 변경할 수 있습니다.

일부 스타일 값은 모듈 유형에 고유하거나 선택적으로 기본 전역 값을 재정의해야 할 수 있습니다. 사이트 테마에 모듈 유형 스타일 변수가 구현된 경우 사이트 작성기 작성자는 전역 설정과 독립적으로 모듈 유형의 스타일을 사용자 정의할 수 있습니다. 모듈 유형 변수는 테마의 전역 스타일 변수를 보강하거나 재정의할 수 있습니다.

메모

사이트의 스타일 값 계층 구조는 다음과 같은 방식으로 동작합니다. 오른쪽에 표시되는 스타일 값은 왼쪽에 있는 스타일 값보다 우선합니다.

테마 기본값 < 전역 스타일 값 < 모듈 형식 스타일 값 < CSS 재정의

사이트 작성기에서 스타일 사전 설정의 전역 또는 모듈 유형 값을 변경하려면 다음 단계를 따라와 수행합니다.

사이트의 왼쪽 탐색 창에서 사이트 설정 디자인으로 > 이동합니다.
디자인 편집기 맨 위에 있는 스타일 사전 설정 탭에서 모든 스타일 사전 설정에 대해 보기를 선택하여 사전 설정 편집기로 이동합니다.
프리뷰 를 선택한 다음 URL 선택 단계를 따라와 사전 설정에 대한 전체 브라우저 창 프리뷰를 엽니다. 이 프리뷰 브라우저 창을 열어 둡니다.
사전 설정 편집기의 오른쪽 상단에서 편집 을 선택합니다 .
편집기의 스타일 변수 컨트롤을 사용하여 일부 전역 스타일 값을 변경할 수 있습니다.
편집기 상단의 전역 탭 오른쪽 에 있는 모듈 탭에서 스타일을 지정해야 하는 모듈 유형을 선택합니다.
스타일 컨트롤을 사용하여 모듈 유형에 대한 일부 값을 변경할 수 있습니다.
변경 내용을 프리뷰할 준비가 되면 명령 모음에서 저장 을 선택합니다 .
열려 있는 프리뷰 브라우저 창으로 돌아가서 새로 고칩니다. 전체 브라우저 창 프리뷰는 서로 다른 보기 중단점, 다른 브라우저 및 다른 장치 플랫폼에서 스타일 변경 사항을 확인하는 데 유용합니다.
모든 변경 내용이 완료되고 유효성이 검사되면 편집기의 오른쪽 위에 있는 편집 완료를 선택합니다 .