CSS 파일 생성, 편집 및 첨부

CSS(Cascading Stylesheets)는 페이지 요소를 선택하고 스타일을 적용하여 사이트 페이지의 시각적 표현을 제어합니다. 디자인 관리자를 사용하여 새 CSS 파일을 생성하거나 기존 파일을 편집하고, 이를 템플릿, 특정 페이지 또는 전체 도메인에 연결할 수 있습니다.

특정 페이지의 디자인을 간단히 변경하려면 콘텐츠 편집기에서 페이지 콘텐츠를 편집하는 방법에 대해 자세히 알아보세요. 테마 템플릿을 사용하는 경우 테마 설정 편집에 대해 자세히 알아보세요.

새 CSS 파일 만들기

1. HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 디자인 관리자로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 디자인 관리자로 이동하세요.
2. 파인더에서 왼쪽 상단의 ‘파일’ > ‘새 파일’을클릭합니다.
3. 대화 상자에서 드롭다운 메뉴 를 클릭하고 'CSS + HubL'을 선택합니다. 
4. '다음'을 클릭합니다.
5. '파일 이름' 필드에 파일 이름을 입력합니다.
6. 파일 위치를 변경하려면 ‘변경’을 클릭하십시오. 팝업 상자에서 새 파일 위치를 선택하십시오. 
7. 완료되면 ‘만들기’를 클릭합니다.

CSS 파일 편집

CSS 파일을 새로 만들거나 기존 파일을 열면 코드 편집기에서 편집을 진행하세요. 코드 편집기는 표준 CSS 외에도 HubL 변수와 매크로를 지원하여 CSS 유지 관리를 더 쉽게 해줍니다.

HubSpot 템플릿에 사용되는 표준 CSS 선택자 목록을 보려면 Boilerplate CSS를 확인하세요.

1. { local.navDesignManager }}
2. 파인더에서 '파일' > '새 파일'을 클릭하거나 기존 CSS 파일을 엽니다.
3. 코드 편집기에서 CSS를 입력하거나 수정하여 편집하십시오. 

HubL이 어떻게 렌더링될지 미리 보려면 편집기 상단의 ‘출력 표시’ 스위치를 켜세요. 오른쪽에 렌더링된 미리 보기가 포함된 패널이 열립니다.

오류 확인

게시하기 전에 코드에서 HubL 오류가 있는지 확인하세요. 오류는 코드 편집기 하단의 콘솔, 왼쪽의 오류 가터, 그리고 오른쪽의 스크롤 바에 표시됩니다.

게시하는 것을 막는 오류는 빨간색으로, 일반적인 경고는 노란색으로 표시됩니다. 코드 편집기 하단에서 ‘세부 정보 표시’를 클릭하면 오류 콘솔에 표시된 오류에 대한 자세한 정보를 볼 수 있으며, ‘세부 정보 숨기기’를 클릭하면 오류 콘솔을 접을 수 있습니다.

CSS 파일 게시

CSS 파일을 편집한 후 오른쪽 상단의 ‘변경 사항 게시’를 클릭하세요. 다른 코딩된 템플릿에서 이 스타일시트를 호출하려면 파인더의 ‘작업’ 드롭다운 메뉴를 클릭하고 ‘공개 URL 복사’를 선택하세요. 

스타일시트 자산에 연결하기

스타일시트를 템플릿, 개별 페이지 또는 전체 도메인에 연결할 수 있습니다. 스타일시트는 연결된 위치에 따라 특정 순서대로 적용됩니다. 아래 목록은 사이트에서 스타일시트가 적용되는 순서를 나타냅니다:

1. public_common.css (필수): 주로 HubSpot 앱에서 사용되지만, 특정 사이트 기능에도 사용되는 스타일시트입니다.
2. 헤더 HTML: ‘콘텐츠 > 페이지 설정’에서 사이트의 전역 <head> 에 추가된 링크 태그입니다.
3. Layout.css (드래그 앤 드롭 레이아웃에 필수): 모든 드래그 앤 드롭 템플릿 레이아웃에 첨부된 기본 반응형 CSS 파일입니다.
4. 첨부된 스타일시트(페이지): 콘텐츠 > 페이지 설정에서 사이트 전체에 첨부된 스타일시트입니다.
5. 첨부된 스타일시트(블로그): 콘텐츠 > 블로그 설정에서 블로그에 첨부된 스타일시트(사이트의 전역 스타일시트를 재정의함).
6. 링크된 스타일시트(템플릿 레이아웃에 권장): 템플릿 레이아웃에 첨부된 스타일시트입니다.
7. 템플릿의 추가 <head> 마크업: 특정 템플릿 레이아웃의 <head> 에 추가된 링크 태그.
8. 페이지별 스타일시트: 페이지 설정에서 연결된 스타일시트입니다.
9. 페이지 헤더 HTML: 페이지 설정에서 특정 페이지의 <head> 에 추가된 링크 태그.

템플릿에 스타일시트 연결

스타일시트는 디자인 관리자 내 인스펙터에서 드래그 앤 드롭 템플릿에 연결할 수 있습니다. 코딩된 템플릿의 경우, 스타일시트는 코드 편집기에서 직접 추가됩니다.

드래그 앤 드롭 템플릿

1. HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 디자인 관리자로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 디자인 관리자로 이동하세요.
2. 파인더에서 드래그 앤 드롭 템플릿 파일의 이름을 클릭합니다.
3. 인스펙터에서 ‘연결된 스타일시트’ 섹션의 ‘추가’ 드롭다운 메뉴를 클릭하고 스타일시트를 선택합니다. 스타일시트를 제거하려면 X를 클릭합니다.
4. 작업이 끝나면 오른쪽 상단의 ‘변경 사항 게시’를 클릭하여해당 템플릿을 사용하는 라이브 페이지에 변경 사항을 적용하세요.

코딩된 템플릿

코딩된 템플릿의 경우, 파일의 <link> 태그나 내의 HubL <head> 태그를 사용하여 코드 편집기에서 직접 스타일시트를 연결합니다. 코딩된 템플릿에 대한 자세한 내용은 개발자 문서에서 확인하세요.

특정 페이지에 스타일시트 연결

참고: 이옵션은 테마 템플릿에서는 사용할 수 없습니다. 테마 설정 편집 방법을 알아보세요.

콘텐츠 편집기의 설정 섹션에서 페이지별 스타일시트를 연결하려면:

1. 콘텐츠로 이동하세요:

   • 웹사이트 페이지: HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 웹사이트 페이지로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 웹사이트 페이지로 이동하세요.
   • 랜딩 페이지: HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 랜딩 페이지로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 랜딩 페이지로 이동하세요.
2. 페이지 이름을 클릭하십시오.
3. 콘텐츠 편집기에서설정 메뉴를 클릭하고 '고급'을 선택하세요. 
4. 대화 상자의 '스타일시트' 섹션에서 '스타일시트 첨부' 드롭다운 메뉴를 클릭하고 스타일시트를 선택합니다. 스타일시트를 제거하려면 스타일시트 옆의 X를 클릭합니다.
5. 템플릿이나 도메인에서 상속된 스타일시트를 비활성화하려면 스타일시트 옆의 드롭다운 메뉴를 클릭하고'비활성화'를 선택하십시오.

도메인 스타일시트 연결

참고:도메인 수준 스타일시트를 사용하려면테마템플릿에 enableDomainStylesheets: true 어노테이션이 포함되어야 합니다. 템플릿 어노테이션에 대해 자세히 알아보세요.

도메인 전체에 스타일시트를 연결하려면:

1. HubSpot 계정의 상단 탐색 모음에서 설정 아이콘을 클릭합니다.
2. 사이드바 메뉴에서 콘텐츠 > 페이지를 클릭합니다.
3. 드롭다운 메뉴를 클릭하여 설정을 업데이트할 도메인을 선택합니다.
4. '템플릿' 탭의 'CSS 및 스타일시트' 섹션에서 '+ 스타일시트 추가'를 클릭합니다. 스타일시트를 제거하려면 연결된 스타일시트 옆의 X를 클릭합니다.
5. '저장'을 클릭합니다.

참고: HubSpot의 Starter 또는 무료 도구로 다운그레이드할 경우, 연결된 도메인 수준 스타일시트는 사용자가 직접 제거할 때까지 활성화된 상태로 유지됩니다. 모든 스타일시트가 제거되면 더 이상 도메인 수준에서 스타일시트를 연결할 수 없습니다. 구독 다운그레이드에 대해 자세히 알아보기.