콘텐츠로 건너뛰기

주의:: 이 문서는 사용자의 편의를 위해 제공됩니다. .

페이지 스타일링의 소스 이해하기

마지막 업데이트 날짜: 2026년 1월 30일

명시된 경우를 제외하고 다음 구독 중 어느 것에서나 사용할 수 있습니다.

모든 제품 및 플랜

HubSpot에서는 콘텐츠 스타일을 추가할 수 있는 여러 위치가 있으며, 추가된 위치에 따라 특정 순서로 적용됩니다. 이 문서에서는 스타일 적용 방식, 라이브 페이지에서 스타일 찾기 방법, 디자인 편집 관련 도움 받기 방법을 알아보세요.

스타일 적용 방식 이해하기

스타일은 HubSpot 내 추가 위치에 따라 특정 순서로 적용됩니다. 예를 들어, 글로벌 스타일시트에 추가된 스타일은 특정 페이지에 추가된 스타일보다 우선순위가 낮습니다.

다음 목록을 통해 페이지 스타일링의 출처를 이해하세요. 가장 먼저 적용되는 스타일부터 마지막으로 적용되는 스타일 순으로 정리되어 있습니다.

커스텀 모듈 CSS
- 레이아웃 편집기에서 모듈에 연결된 스타일시트.

- 모듈 편집기에서 모듈의 module.css 섹션에 추가된 CSS.

- require_css 블록 내 모듈의 HubL 마크업 내부 CSS require_css 블록내부에 있는 CSS.
템플릿에 require_css 블록 를 통해 추가된 스타일시트.
디자인 관리자 내의 HubSpot 기본 스타일시트(예: layout.css).
레이아웃 편집기에서 템플릿에 연결된 스타일시트.

페이지 설정 탭에 첨부된 스타일시트.

모든 도메인에 대한 설정에서 첨부된 스타일시트
특정 도메인 설정에 첨부된 스타일시트
<style> 태그 내에 추가된 CSS. 예를 들어 웹사이트 설정, 페이지 설정 또는 템플릿의 HTML head 부분.

페이지 편집기를 통해 추가된 스타일. HubSpot은 이러한 스타일에 !important 태그도 추가합니다. 에서 !important 태그와 스타일링에 미치는 영향에 대해 자세히 알아보세요.

미리보기 또는 라이브 페이지에서 스타일 찾기

브라우저의 개발자 도구를 사용하여 라이브 웹사이트나 미리보기 페이지에 적용된 스타일을 찾으세요. 스타일 문제 해결 방법은 브라우저마다 약간씩 다릅니다. 다음 예시에서는 Google Chrome을 사용합니다.

콘텐츠로 이동:
- HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
- HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
페이지 이름을 클릭하세요.
콘텐츠 편집기에서 오른쪽 상단의 미리 보기를 클릭하세요.
미리 보기 페이지에서 새 탭에서 열기를 클릭하세요.
미리보기에서 확인하려는 요소를 마우스 오른쪽 버튼으로 클릭한 다음'검사'를 선택하세요.
요소 패널에서 페이지의 HTML을 확인할 수 있습니다. 요소를 클릭하면 해당 요소의 스타일을 볼 수 있습니다.
스타일 창에서 해당 요소에 적용된 CSS 규칙을 검토하세요. 각 스타일 옆의 체크박스를 선택하거나 해제하여 스타일을 일시적으로 제거하거나 추가할 수 있습니다. 이렇게 하면 요소에 영향을 미치는 규칙을 식별하는 데 도움이 됩니다.

CSS 규칙 오른쪽에는 해당 스타일링의 소스 이름이 표시됩니다. 이는 스타일링의 소스 위치를 확인해 줍니다. 소스 이름 위에 마우스를 올리면 전체 이름을 볼 수 있습니다:
- 스타일이 CSS 파일에서 오는 경우, CSS 선언 옆에 스타일시트 이름이 표시됩니다. 디자인 관리자로 이동하여 해당 스타일시트를 찾고 필요에 따라 편집하세요.

- 소스 이름이 module로 시작하는 경우, 스타일링은 모듈의 CSS에서 가져온 것입니다. 소스 이름 위에 마우스를 올리면 모듈의 전체 이름을 볼 수 있습니다.

- 소스 이름이 사용자 에이전트 스타일시트 인 경우 , 스타일링은 브라우저의 기본 스타일링의 일부입니다.
  - 일반적으로 브라우저가 요소에 대한 스타일 규칙을 찾을 수 없을 때 HTML 태그 스타일(예: <p>, <h1>, <span> 등)에 대해 이 스타일이 표시됩니다.
  - 해당 요소에 사용자 정의 스타일을 추가하면 사용자 에이전트 스타일시트를 재정의할 수 있습니다.

- 소스 이름이 페이지 URL인 경우, 스타일링은 페이지의 <style> 태그에서 가져온 것입니다. 예를 들어, 스타일링은 페이지 또는 템플릿 헤드의 HTML에서 설정될 수 있습니다.

- 소스 이름이 페이지 URL이고 스타일이 #hs_cos_wrapper_module_number를 대상으로 하는 경우, 스타일은 페이지 편집기의 스타일 탭에 추가됩니다. HubSpot은 !important 태그를 추가합니다. !important 태그와 스타일링에 미치는 영향에 대해 자세히 알아보세요.

- 소스 이름이 <style>인 경우, 해당 스타일은 요소에 자동으로 포함됩니다. 이는 주로 CTA 또는 미팅 위젯과 같은 임베드 가능한 HubSpot 자산의 편집기 내 스타일링 때문입니다.

- 검사기에서 선언 옆에 element.style이 표시되면 CSS가 인라인으로 설정된 것입니다. 인라인 스타일링은 페이지의 HTML 소스 코드나 템플릿의인라인 스타일링 필드에 직접 추가된 스타일링입니다. 예를 들어, 소스 코드 내 인라인 스타일링은 다음과 같이 표시됩니다. <p style="background:purple;">Hello world</p>.

페이지 검사 방법에 대한 자세한 내용은 웹 브라우저의 도움말 문서를 참조하세요:

디자인 편집에 대한 도움 받기

HubSpot 템플릿이나 스타일시트 변경에 대한 최상의 자원은 원본 템플릿 디자이너입니다. 그러나 HTML 및 CSS 문제 해결에 대한 숙련도에 따라 콘텐츠 스타일링에 대한 추가 도움을 받을 수 있는 다양한 자원이 있습니다.

템플릿의 디자인 문제를 해결하기 위해 검사기 도구를 사용하는 데 익숙하다면:

- 커뮤니티의 CMS 개발 포럼에서 검색하고 게시하여 코드 관련 팁, 조언 또는 문제 해결 방법을 얻으세요.
- 튜토리얼, 가이드 및 CMS 프레임워크 개요는 CMS 참조 문서를 참조하십시오.
- CMS 개발자 커뮤니티 Slack에서 HubSpot 제품 팀 및 HubSpot에서 작업하는 다른 개발자들과 교류하세요.

템플릿의 HTML 및 CSS를 읽고 편집하는 데 익숙하지 않다면:

- 템플릿을 사용자 정의하는 데 도움을 줄 수 있는 웹사이트 디자인 전문 지식을 갖춘 인증된 HubSpot 파트너와 연결하세요.
- 테마 템플릿을 사용하여 코드를 작성하지 않고도 페이지 스타일을 편집하세요 .
- Asset Marketplace에서 구매한 템플릿을 사용하는 경우, 페이지 디자인 관련 문의 사항은해당 템플릿 디자이너에게 문의하세요.

이 문서가 도움이 되었나요?

이 양식은 문서 피드백에만 사용됩니다. HubSpot으로 도움을 받는 방법 알아보기.