CSS(캐스케이딩 스타일 시트) 파일은 페이지의 요소를 선택하고 그 표현을 제어하는 코딩 파일입니다. CSS 파일은 이메일이나 이메일 템플릿에 첨부할 수 없습니다.
이 문서에서는 HubSpot에서 CSS 파일을 만들고, 게시하고, 첨부하는 방법을 안내합니다. 특정 페이지에 간단한 디자인 변경을 하는 방법을 배울 수 있습니다. 테마 템플릿을 사용하는 경우에는 테마 설정을 편집하는 방법을 알아보세요.
새 CSS 파일 만들기
- HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
- 왼쪽 상단의 폴더 아이콘 (folder )을 클릭하여 사이드바 메뉴를 펼칩니다. 그런 다음 파일 > 새 파일을 클릭합니다.
- 대화 상자에서 CSS 스타일시트를 클릭합니다. 그런 다음 CSS 스타일시트의 이름을 입력하고 만들기를 클릭합니다.
CSS 파일 편집
기존 CSS 파일을 만들거나 열었으면 코드 편집기에서 편집하세요. 코드 편집기는 표준 CSS 외에도 HubL 변수와 매크로를 지원하므로 CSS를 더 쉽게 유지 관리할 수 있습니다. HubL이 어떻게 렌더링되는지 미리 보려면 편집기 상단의출력 표시 스위치를 클릭하여 켜세요. 오른쪽에 렌더링된 미리보기가 표시된 패널이 열립니다.
HubSpot 템플릿에 대한 표준 CSS 선택기 목록을 보려면 상용구 CSS를 확인하세요.
게시하기 전에 코드에 HubL 오류가 있는지 확인하세요. 사용자 정의 모듈 또는 코딩된 파일에서 HubL 오류 또는 경고를 찾을 수 있는 위치는 세 군데입니다:
- 코드 편집기 하단의 오류 콘솔에서 오류를 확인합니다.
- 코드 편집기 왼쪽에 있는 오류 홈통에 있습니다.
- 편집기 오른쪽에 있는 스크롤 막대에서.
게시할 수 없는 오류는 빨간색으로 표시되고 일반 경고는 노란색으로 표시됩니다. 코드 편집기 하단에서 세부 정보 표시를 클릭하면 오류 콘솔에서 오류에 대한 자세한 정보를 볼 수 있고 세부 정보 숨기기를 클릭하면 오류 콘솔을 축소할 수 있습니다.
오류 콘솔에는 코드 또는 사용자 정의 모듈에서 HubL 오류나 경고가 있는 모든 위치에 대한 링크가 표시됩니다. 코드 편집기 왼쪽의 빨간색 오류 표시기 위로 마우스를 가져가면 코드의 오류 또는 경고를 확인할 수 있습니다. 오류를 클릭하면 커서가 해당 줄의 모든 오류 또는 경고를 순환합니다. 스크롤바 주석을 클릭하면 파일의 해당 부분으로 이동합니다.
코드 편집기에서 줄 번호를 클릭하면 그에 따라 파일의 URL이 업데이트되도록 할 수도 있습니다. 이렇게 하면 다른 사람들과 코드 링크를 공유하고 파일 내에서 작업 중인 위치로 정확하게 안내할 수 있습니다.
파일을 편집한 후 오른쪽 상단에서 변경 내용 게시를 클릭합니다. 다른 코딩된 템플릿에서 이 스타일시트를 호출하려면 왼쪽 사이드바 메뉴에서 작업 > 공개 URL 복사를 클릭하여 시트의 URL을 복사합니다.
템플릿에 첨부
HubSpot에서는 몇 가지 방법으로 콘텐츠에 스타일시트를 첨부할 수 있습니다. 다음은 첨부된 스타일시트가 사이트에 링크되는 순서입니다:
- public_common.css*: HubSpot 앱에서 주로 사용하지만 특정 사이트 기능에도 사용되는 스타일시트입니다.
- 웹사이트 > 페이지 아래의 설정에서 헤더 HTML: 사이트의 글로벌 <헤드>에 링크 태그가 추가됩니다.
- Layout.css **: 모든 드래그 앤 드롭 템플릿 레이아웃에 첨부된 기본 반응형 CSS 파일입니다.
- 웹사이트 > 페이지 아래의 설정에서 첨부된 스타일시트: 전체 사이트에 첨부된 스타일시트입니다.
- 웹사이트 > 블로그 아래의 설정에서 첨부된 스타일시트: 블로그에 첨부된 스타일시트(사이트 전역 시트보다 우선합니다).
- 링크된 스타일시트***: 템플릿 레이아웃에 첨부된 스타일시트입니다.
- 템플릿의 추가 <헤드> 마크업: 특정 템플릿 레이아웃의 <헤드>에 링크 태그가 추가되었습니다.
- 페이지별 스타일시트: 페이지 설정에 첨부된 스타일시트입니다.
- 페이지 헤드 HTML: 페이지 설정에서 특정 페이지의 <헤드>에 추가되는 링크 태그입니다.
* 필수
** 드래그 앤 드롭 레이아웃에 필요
*** 템플릿 레이아웃에 권장되는 스타일시트 첨부 방법
템플릿에 스타일시트를 첨부하려면 디자인 관리자에서 템플릿을 엽니다. 머리글 및 본문 옵션의 오른쪽 사이드바 메뉴에서 연결된 스타일시트 옆의 추가 드롭다운 메뉴에서 파일을 선택합니다.
이미 첨부된 스타일시트를 마우스로 가리키고 편집을 클릭하여 변경하거나 X를 클릭하여 제거하면 편집하거나 제거할 수 있습니다.
스타일시트를 추가한 후 오른쪽 상단의 변경 사항 게시를 클릭하여 템플릿을 사용하여 변경 사항을 라이브 페이지에 적용합니다.
특정 페이지에 스타일시트 첨부 또는 제거(마케팅 허브 프로페셔널 및 엔터프라이즈만 해당)
참고: 테마 템플릿에는 이 옵션을 사용할 수 없습니다. 테마 설정을 편집하는 방법에 대해 알아보세요.
페이지 편집기의 설정 섹션에서 페이지별 스타일시트를 추가하거나 제거하려면 다음과 같이 하세요:
-
콘텐츠로 이동합니다:
- 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
- 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
- 페이지 이름을 클릭합니다.
- 콘텐츠 편집기에서 설정 메뉴를 클릭하고 고급을 선택합니다.
- 대화 상자의 페이지 스타일시트 섹션에서스타일시트 첨부 드롭다운 메뉴를 클릭하고 스타일시트를 선택합니다. 스타일시트를 제거하려면 해당 스타일시트 옆의X를 클릭합니다 .
- 템플릿 또는 도메인에서 상속된 스타일시트를 끄려면 스타일시트 옆의 드롭다운 메뉴를 클릭하고 사용 안 함을 선택합니다.
도메인 스타일시트 첨부 또는 제거(마케팅 허브 프로페셔널 및 엔터프라이즈만 해당)
참고: 도메인 수준 스타일시트를 사용하려면 테마 템플릿에 enableDomainStylesheets: true 주석을 포함해야 합니다. 템플릿 어노테이션에 대해 자세히 알아보세요.
도메인의 모든 콘텐츠에서 스타일시트를 추가하거나 제거하려면 다음과 같이 하세요:
- HubSpot 계정의 상단 탐색 모음에서 settings 설정 아이콘을 클릭합니다.
- 사이드바 메뉴에서 웹사이트 > 페이지를 클릭합니다.
- 드롭다운 메뉴를 클릭하여 설정을 업데이트할 도메인을 선택합니다.
- 템플릿 탭에서 CSS 및 스타일시트까지 스크롤합니다. 스타일시트를 추가하려면 + 스타일시트 추가를 클릭합니다. 첨부된 스타일시트 옆의 X를 클릭하여 제거합니다.
- 저장을 클릭합니다.
참고: HubSpot의 스타터 또는 무료 도구로 다운그레이드할 때 첨부된 도메인 수준 스타일시트는 제거할 때까지 활성 상태로 유지됩니다. 모든 스타일시트가 제거되면 더 이상 도메인 수준에서 스타일시트를 첨부할 수 없습니다. 구독을 다운그레이드하는 방법에 대해 자세히 알아보세요.
Design Manager
