스타일 사전 설정 작업

아티클
07/30/2024

이 문서에서는 Microsoft Dynamics 365 Commerce 사이트 빌더에서 사이트 스타일 사전 설정을 사용하는 방법을 설명합니다.

스타일 사전 설정은 사이트 테마 전반에 걸쳐 제작 가능한 모든 스타일 값의 저장된 세트입니다. 사이트 빌더에서 사이트의 모양을 즉시 변경하는 데 사용할 수 있습니다. 스타일 사전 설정을 사용하면 상거래 사이트 빌더 작성자가 계단식 스타일 시트(CSS)를 사용하거나 테마를 배포할 필요 없이 사이트 전체에서 스타일 값 세트를 신속하게 변경하고 미리 보고 활성화할 수 있습니다. 글꼴 스타일, 버튼 스타일, 사이트 색상은 스타일 사전 설정을 통해 관리할 수 있는 스타일 변수의 일반적인 예입니다.

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

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

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

스타일 사전 설정 미리 보기

사이트 빌더에서 사이트의 스타일 사전 설정을 미리 보려면 다음 단계를 따르세요.

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

현재 사용 가능한 사전 설정 목록에 사전 설정이 없는 경우 사용자 정의 스타일 사전 설정 만들기 를 참조하여 방법을 알아보세요. 사용자 정의 스타일 사전 설정을 생성합니다.

메모

테마에 포함된 사전 설정은 내장 배지로 표시됩니다. 이러한 내장 사전 설정은 읽기 전용입니다. 내장된 사전 설정을 새로운 사용자 정의 가능한 사전 설정으로 복사하려면 사전 설정에 대한 줄임표 버튼(...)을 선택한 다음 를 선택합니다. 로 저장하세요.
명령 모음에서 미리보기를 선택합니다.
스타일 사전 설정을 미리 보는 데 사용할 사이트의 URL을 선택한 다음 확인을 선택합니다.
변형 이름을 선택하여 미리 볼 채널별 및 로케일별 URL 변형을 선택하세요. 선택한 스타일 사전 설정이 지정된 페이지에 적용되는 새 미리보기 브라우저 창이 열립니다.

메모

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

팁

스타일 사전 설정을 편집하는 동안 미리 보기 브라우저 창을 별도의 브라우저 창에 열어두면 변경 사항을 신속하게 확인할 수 있어 도움이 될 수 있습니다. 변경 사항을 사전 설정에 저장한 후 열려 있는 미리 보기 브라우저 창을 새로 고쳐 사용자 경험을 확인하세요.

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

사이트 빌더에서 사용자 정의 스타일 사전 설정을 만들려면 다음 단계를 따르세요.

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

메모

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

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

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

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

메모

사이트의 스타일 값 계층 구조는 다음과 같은 방식으로 작동합니다. 오른쪽에 더 멀리 나타나는 스타일 값은 왼쪽에 있는 스타일 값을 재정의합니다.

테마 기본값 < 전역 스타일 값 < 모듈 유형 스타일 값 < CSS 우세하다

사이트 빌더에서 스타일 사전 설정의 전역 또는 모듈 유형 값을 변경하려면 다음 단계를 따르세요.

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

메모

사이트에서 현재 활성화된 스타일 사전 설정을 편집하는 경우 편집기에 파란색 활성 배지가 표시됩니다. 이 배지는 사전 설정이 현재 귀하의 웹 사이트에 활성화되어 있음을 나타냅니다. 활성 사전 설정을 변경하는 경우 게시 를 선택하여 해당 변경 사항을 라이브 사이트에 푸시하세요.