다음을 통해 공유

자습서: 사이트에 사용자 지정 CSS 추가

  • 아티클

스타일 지정 작업 영역을 사용하면 글꼴 및 색상과 같은 사이트의 일부 테마 기능을 편집할 수 있지만 사용자 지정 CSS 테마를 적용할 수도 있습니다.

사용자 지정 CSS 파일을 정의하고 사이트에 업로드하여 나만의 테마를 만들 수 있습니다.

이 자습서에서는 다음 작업을 수행하는 방법을 알아봅니다.

  • 사용자 지정 CSS 파일 업로드
  • Visual Studio Code for the Web에서 CSS 편집

전제 조건

노트

생성하는 모든 사용자 지정 테마는 Bootstrap v3와 호환되어야 합니다.

사이트에 사용자 지정 CSS 추가

다음 비디오는 사용자 지정 CSS 코드를 사이트에 적용하는 방법을 보여줍니다.

이 예에서는 웹 사이트의 버튼에 그림자 효과를 추가할 수 있는 몇 가지 사용자 지정 CSS 파일을 추가합니다. 사용자 지정 CSS 파일을 사용하거나 제공된 샘플을 사용할 수 있습니다.

  1. 샘플을 생성하려면 선호하는 CSS 편집기에서 button_shadow.css 사용자 지정 테마 파일을 생성하고 저장합니다.

    .button1 {
box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333;
 }

  2. Power Pages(으)로 이동합니다.

  3. 사용자 지정 테마를 추가할 사이트를 선택하고 편집을 선택합니다.

  4. 스타일 지정 작업 영역을 엽니다.

  5. 테마를 선택하고 ...(줄임표)를 선택한 다음 CSS 관리를 선택합니다.

    스타일 지정 작업 영역에서 CSS 관리 패널을 엽니다.

  6. 사용자 지정 CSS 섹션에서 업로드를 선택하고 사용자 지정 CSS 파일을 선택합니다. 한 번에 하나의 CSS 파일만 업로드할 수 있지만 여러 파일을 업로드할 수 있습니다. 여러 CSS 파일이 동일한 속성을 업데이트하는 경우 목록 맨 아래에 있는 CSS 파일의 속성이 적용됩니다. 사용자 지정 CSS 파일의 순서를 조정할 수 있습니다.

  7. 페이지 캔버스에서 업데이트 결과를 즉시 확인해야 합니다.

    업로드된 CSS 파일의 버튼 그림자 효과.

  8. 사용자 지정 CSS 파일의 순서를 사용 중지하거나 이동할 수 있습니다. 마지막에 나열된 파일이 다른 파일보다 우선합니다.

    CSS 파일의 순서를 사용 중지하거나 이동합니다.

  9. 줄임표(...)를 선택한 다음 코드 편집을 선택하여 CSS 파일을 직접 편집할 수 있습니다. 이 단계에서 웹용 Visual Code 편집기가 열립니다. CTRL-S를 선택하여 변경 내용을 저장합니다.

    웹용 Visual Studio Code에서 CSS 파일 편집.

  10. 디자인 스튜디오에서 동기화를 선택하여 CSS를 업데이트하고 변경 사항을 확인합니다.

  11. 미리 보기를 선택하여 사이트의 사용자 지정 테마를 확인하세요.

노트

사용자 지정 테마를 완전히 제거하려면 포털 관리 앱에서 웹 파일 레코드를 삭제합니다.