콘텐츠로 건너뛰기
HubSpot 기술 자료
주의:: 이 문서는 사용자의 편의를 위해 제공됩니다. 이 문서는 번역 소프트웨어를 사용하여 자동으로 번역되었으며 교정을 거치지 않았을 수 있습니다. 이 문서의 영어 버전이 가장 최신의 정보를 확인할 수 있는 공식 버전으로 간주해야 합니다. 여기에서 액세스할 수 있습니다..

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

마지막 업데이트 날짜: 2월 12, 2025

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

모든 제품 및 플랜

HubSpot에서 콘텐츠 스타일링을 추가할 수 있는 위치는 여러 곳이며, 추가되는 위치에 따라 특정 순서로 적용됩니다. 아래에서 스타일이 적용되는 방법, 라이브 페이지에서 스타일링을 찾는 방법 및 디자인 편집에 대한 도움을 받는 방법에 대해 알아보세요.

스타일이 적용되는 방식 이해하기

HubSpot의 CSS 스타일링은 아래 나열된 대로 HubSpot에서 설정된 위치에 따라 순서대로 적용됩니다. 예를 들어 글로벌 스타일시트에 설정된 스타일링은 특정 페이지에 설정된 스타일링에 의해 재정의됩니다.

  1. 사용자 정의 모듈 CSS
    1. 모듈에 첨부된 스타일시트입니다.
    2. 모듈의 CSS 섹션에 추가된 CSS.
    3. require_css 블록 내 모듈의 HubL 마크업 내부의 CSS
  2. require_css 블록을 통해 템플릿에 추가된 스타일시트
  3. HubSpot 기본 스타일시트(예: layout.css)
  4. 템플릿에 첨부된 스타일시트



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



  6. 모든 도메인의 설정에 첨부된 스타일시트
  7. 특정 도메인에 대한 설정에 첨부된 스타일시트
  8. <스타일> 태그 내에 추가된 CSS. 예를 들어 웹사이트 설정, 페이지 설정 또는 템플릿의 헤드 HTML입니다.



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

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

브라우저의 개발자 도구를 사용하여 라이브 웹사이트 또는 미리 보기 페이지에 적용된 스타일을 검사할 수 있습니다. 브라우저마다 스타일링 문제를 해결하는 방법이 조금씩 다릅니다.

Google 크롬에서 스타일을 찾으려면 다음과 같이 하세요:

  • 미리 보기 또는 라이브 페이지에서 검사하려는 요소를 마우스 오른쪽 버튼으로 클릭한 다음 검사를 선택합니다.
  • 왼쪽의 요소 창에 페이지의 HTML이 표시됩니다. 요소를 클릭하여 스타일을 보거나 창 왼쪽 상단의 커서 아이콘을 사용하여 페이지에 있는 요소를 클릭할 수 있습니다.

  • 오른쪽의 스타일 창에서 해당 요소에 적용된 모든 스타일을 볼 수 있습니다. 각 스타일 옆의 확인란을 선택하고 선택을 취소하여 스타일을 제거하고 적용할 수 있습니다. 이렇게 하면 변경할 스타일 규칙의 범위를 좁히는 데 도움이 됩니다.



  • CSS 규칙 오른쪽에 해당 스타일링의 소스 이름이 표시되어 스타일링의 출처를 알 수 있습니다. 소스 이름 위로 마우스를 가져가면 전체 이름을 볼 수 있습니다:
    • 스타일시트에서 스타일링이 제공되는 경우 스타일시트 이름이 인스펙터의 CSS 선언 옆에 표시됩니다. 그런 다음 디자인 관리자로 이동하여 스타일시트를 찾아 필요에 따라 편집할 수 있습니다.



    • 소스 이름이 모듈로 시작하면 해당 스타일은 모듈의 CSS에서 가져온 것일 가능성이 높습니다. 소스 이름 위에 마우스를 올리면 모듈의 전체 이름을 볼 수 있습니다.



    • 소스 이름이 사용자 상담원 스타일시트인 경우 CSS는 브라우저의 기본 스타일링의 일부입니다. <p>, <h1>, <h2>, <span>, <div> 등과 같은 일반적인 HTML 태그 스타일링에서 가장 자주 볼 수 있습니다. 이 스타일링은 브라우저가 해당 요소에 대한 일반적인 스타일링 규칙을 찾을 수 없을 때 적용되지만, 해당 요소에 고유한 스타일을 추가하여 덮어쓸 수 있습니다.



    • 소스 이름이 페이지 URL인 경우 CSS는 페이지의 <스타일> 태그 내에서 제공됩니다. 예를 들어 스타일은 페이지 또는 템플릿 헤드 HTML에서 설정할 수 있습니다.



    • 소스 이름이 페이지 URL이고 스타일이 #hs_cos_wrapper_module_number를 대상으로 하는 경우 페이지 편집기의 스타일 탭에서 스타일이 설정되었을 가능성이 높습니다. HubSpot은 이러한 스타일에 !important 태그를 추가합니다. 중요 태그와 이 태그가 스타일에 미치는 영향에 대해 자세히 알아보세요.


    • 소스 이름이 <스타일>인 경우 스타일이 요소에 자동으로 포함되었을 가능성이 높습니다. 이는 종종 CTA 또는 미팅 위젯과 같이 임베드 가능한 HubSpot 자산의 편집기에서 설정한 스타일 때문인 경우가 많습니다.



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

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

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

HubSpot 템플릿 또는 스타일시트를 변경하는 데 가장 좋은 리소스는 원래 템플릿 디자이너입니다. 그러나 HTML 및 CSS 문제 해결 수준에 따라 콘텐츠 스타일링에 대한 추가 도움을 받을 수 있는 다양한 리소스가 있습니다.

  • 템플릿의 디자인 문제를 해결하는 데 인스펙터 도구를 사용하는 데 익숙한 경우 템플릿의 디자인 문제를 해결하세요:
  • 템플릿에서 HTML 및 CSS를 읽거나 편집하는 데 익숙하지 않은 경우:
    • 웹사이트 디자인 전문 지식을 갖춘 인증된 HubSpot 파트너와 연결하여 템플릿을 사용자 지정하는 데 도움을 받으세요.
    • 테마 템플릿을 사용하여 코드를 작성하지 않고도 페이지 스타일을 편집할 수 있습니다.
    • 자산 마켓플레이스에서 구매한 템플릿을 사용하는 경우 페이지 디자인에 대한 질문이 있으면 해당 템플릿의 디자이너에게 문의하세요.
이 문서가 도움이 되었나요?
이 양식은 문서 피드백에만 사용됩니다. HubSpot으로 도움을 받는 방법 알아보기.

관련 콘텐츠