다음을 통해 공유


CSS 파일 관리

연속 변경 스타일 시트(CSS)를 사용하면 사이트의 형식 및 스타일을 제어할 수 있습니다.

기본적으로 새 Power Pages 사이트에는 사이트 템플릿의 일부로 설치된 bootstrap.min.css, theme.cssportalbasictheme.css 파일이 있습니다.

스타일 지정 작업 영역을 사용하여 스타일을 수정하거나 사용자 지정 CSS 파일을 업로드할 수 있습니다.

새 사용자 지정 CSS 파일을 업로드하면 포털 관리 앱에서 웹 파일로 사용할 수 있습니다.

노트

Power Pages 사이트는 부트스트랩 3.3.x를 사용합니다. Power Pages의 일부 시나리오는 부트스트랩 3.3.x에 종속되므로 사이트 개발자는 부트스트랩 3를 다른 CSS 라이브러리로 교체해서는 안 됩니다. 추가 정보: 부트스트랩 개요.

스타일링 작업 영역에서 사용자 지정 CSS 파일 관리

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

  2. 페이지를 추가하려는 사이트에서 편집을 선택합니다.

  3. 스타일 지정 작업 영역을 선택합니다.

  4. 스타일 지정 작업 영역의 추가 옵션에서 CSS 관리 옵션을 선택합니다.

    디자인 스튜디오를 사용하여 CSS 파일을 관리하세요.

CSS 파일 업로드

CSS 관리 패널에 기본 CSS 파일 목록이 표시됩니다.

  • bootstrapmin.css
  • theme.css
  • portalbasictheme.css

사용자 지정 CSS 파일을 업로드하려면 업로드를 선택하고 사용자 지정 CSS 파일을 선택합니다.

디자인 스튜디오를 사용하여 CSS 파일을 업로드합니다.

노트

  • 최대 1MB 크기의 사용자 지정 CSS 파일을 업로드할 수 있습니다.
  • 사용자 지정 CSS 파일이 업로드되면 프리뷰가 오른쪽에 반영됩니다.
  • 업로드된 사용자 지정 CSS 파일은 모든 테마에 적용됩니다.

추가 옵션

사용자 지정 CSS 파일의 오른쪽에 있는 ...(말줄임표)을 선택합니다. 여기서 파일을 우선 순위를 높이거나 낮추고 사용자 지정 CSS 파일을 사용 중지할 수 있습니다.

노트

하단에 나열된 CSS 파일이 더 높은 우선 순위를 갖습니다. 즉, 두 파일에 동일한 속성의 업데이트가 포함되어 있는 경우 목록에서 더 낮은 파일에 포함된 업데이트가 적용됩니다.

CSS 파일의 우선 순위입니다.

건축

모든 사용자 지정 CSS 파일은 기본 portalbasictheme.css보다 우선 순위가 낮고 theme.css보다 높습니다. 이 우선 순위는 기본 스타일 옵션에 대해 스타일 패널을 사용하여 스타일을 사용자 지정하도록 권장하기 위한 것입니다.

노트

스타일 창에서 기본 제공되지 않는 스타일만 서식 지정하는 데 사용자 지정 CSS를 사용하는 것이 좋습니다.

경고

기본 CSS 파일(bootstrap.min.css, theme.css 또는 portalbasictheme.css)의 표시 순서를 비활성화, 삭제 또는 변경하지 마세요. 디자인 스튜디오에서 오류가 표시됩니다.
포털 관리 앱을 사용하여 CSS 파일을 업데이트합니다.
포털 관리 앱을 열고 기본 상태를 복원하고 기본 CSS 파일의 표시 순서를 지정하여 문제를 해결합니다.

사용자 지정 CSS 파일 삭제

  1. CSS 파일은 웹 파일로 저장됩니다. 사용자 지정 CSS 파일을 제거하려면 포털 관리 앱으로 이동하여 웹 파일을 선택합니다.

  2. 사용자 지정 CSS 파일 레코드를 찾습니다. 올바른 레코드를 찾으려면 이름웹 사이트 값을 필터링해야 할 수 있습니다.

  3. 웹 파일 레코드를 선택한 후 삭제를 선택합니다.

  4. 디자인 스튜디오에서 동기화 구성을 선택하여 사용자 지정 CSS에서 스타일 변경 사항을 지웁니다.

참조