스타일 가이드

색상

웹사이트의 기본 색상과 회색 음영은 웹플로우의 가변 기능을 통해 관리됩니다.

블랙

회색 1

회색 2

흰색

버튼

웹사이트 전체에서 다양한 버튼 스타일을 사용할 수 있습니다.

HTML 제목

HTML 제목 태그의 스타일(H1-H6).

H1
모든 상반기 제목

제목 - H1

H2
모든 H2 제목

제목 - H2

H3
모든 H3 제목

제목 - H3

H4
모든 H4 제목

제목 - H4

H5
모든 H5 제목
제목 - H5
H6
모든 H6 제목
제목 - H6
H1
제목 H1
제목 H1
H2
제목 H2
제목 H2
H3
제목 H3
제목 H3
H4
제목 H4
제목 H4
H5
제목 H5
제목 H5
H6
제목 H6
제목 H6
단락

다양한 크기의 단락과 텍스트 스타일을 사용할 수 있습니다.

P
모든 단락

로렘 입섬 돌로르 시트 아멧, 컨설턴트 아디피싱 엘리트. 에로스 엘리멘툼 트리스티크에 서스펜디스 바리우스 에님. 듀이스 커서스, 마이 퀴스 비베라 오르나레, 에로스 도러 인터덤 눌라, 우트 코모도 디암 리베로 비타 에랏. 아이네안 포시부스 니브 에 저토 커서스 아이디 루트룸 로렘 임페디트. 넌크 우트 셈 비타 리수스 트리스티크 포세레.

P
텍스트 리드

로렘 입섬 돌로르 시트 아멧, 컨설턴트 아디피싱 엘리트. 에로스 엘리멘툼 트리스티크에 서스펜디스 바리우스 에님. 듀이스 커서스, 마이 퀴스 비베라 오르나레, 에로스 도러 인터덤 눌라, 우트 코모도 디암 리베로 비타 에랏. 아이네안 포시부스 니브 에 저토 커서스 아이디 루트룸 로렘 임페디트. 넌크 우트 셈 비타 리수스 트리스티크 포세레.

P
작은 텍스트

로렘 입섬 돌로르 시트 아멧, 컨설턴트 아디피싱 엘리트. 에로스 엘리멘툼 트리스티크에 서스펜디스 바리우스 에님. 듀이스 커서스, 마이 퀴스 비베라 오르나레, 에로스 도러 인터덤 눌라, 우트 코모도 디암 리베로 비타 에랏. 아이네안 포시부스 니브 에 저토 커서스 아이디 루트룸 로렘 임페디트. 넌크 우트 셈 비타 리수스 트리스티크 포세레.

인라인 텍스트 요소

일반적인 인라인 요소에 대한 스타일링.

P
텍스트 마크

하이라이트 에로스 엘리멘텀 트리스틱의 서스펜디스 바리우스 에님.

D
텍스트 삭제

하이라이트 에로스 엘리멘텀 트리스틱의 서스펜디스 바리우스 에님.

U
텍스트 밑줄

하이라이트 에로스 엘리멘텀 트리스틱의 서스펜디스 바리우스 에님.

B
텍스트 굵게

하이라이트 에로스 엘리멘텀 트리스틱의 서스펜디스 바리우스 에님.

I
텍스트 이탤릭체

하이라이트에로스 엘리멘텀 트리스틱의 서스펜디스 바리우스 에님.

텍스트 정렬

텍스트 정렬 스타일을 사용하여 텍스트를 컴포넌트에 맞게 정렬할 수 있습니다.

왼쪽 텍스트

왼쪽 텍스트: 로렘 입섬 돌로르 시트 아멧, 컨설턴트 아디피싱 엘리트.

텍스트 센터

텍스트 센터: 로렘 입섬 돌로르 시트 아멧, 컨설턴트 아디피싱 엘리트.

텍스트 오른쪽

텍스트 오른쪽: 로렘 입섬 돌로르 시트 아멧, 컨설턴트 아디피싱 엘리트.

블록따옴표

따옴표 스타일링.

이것은 블록 인용문입니다. 로렘의 편안함은 아마도 게이에게 도달했을 것입니다. 달빛 신문은 그 즐거움에 따라 다릅니다. 시끄러운 목소리 공유는 그를 시끄러운 젊은이를 넓히게했습니다. 결혼식에서는 웃는다고 믿었는데 예의 바르게 앉아서 받아들이지 않는 것은 놀랍게도 초대장입니다.
목록 스타일

정렬된 목록, 정렬되지 않은 목록 및 스타일이 지정되지 않은 목록에 대한 스타일링.

  1. 다음은 정렬된 목록입니다.
  2. 정렬된 목록 내의 목록 항목입니다.
  3. 원하는 대로 각 목록 항목의 스타일을 지정합니다.
  • 정렬되지 않은 목록입니다.
  • 정렬되지 않은 목록 내의 목록 항목입니다.
  • 원하는 대로 각 목록 항목의 스타일을 지정합니다.
  • 스타일이 지정되지 않은 목록입니다.
  • 스타일 지정되지 않은 목록 내의 목록 항목입니다.
  • 스타일이 지정되지 않은 목록이므로 스타일을 지정할 필요가 없습니다.
서식 있는 텍스트

서식 있는 텍스트 요소(RTE)는 긴 형식의 콘텐츠를 만드는 데 사용됩니다. 고급 스타일링에 대해서는 여기에서 자세히 알아보세요.

이것은 서식 있는 텍스트 제목입니다.

서식 있는 텍스트 요소를 사용하면 제목, 단락, 따옴표, 이미지, 동영상을 개별적으로 추가하고 서식을 지정할 필요 없이 한곳에서 모두 만들고 서식을 지정할 수 있습니다. 두 번 클릭하기만 하면 쉽게 콘텐츠를 만들 수 있습니다.

  • 정렬되지 않은 목록입니다.
  • 정렬되지 않은 목록 내의 목록 항목입니다.
  • 원하는 대로 각 목록 항목의 스타일을 지정합니다.
정적 및 동적 콘텐츠 편집

서식 있는 텍스트 요소는 정적 또는 동적 콘텐츠에 사용할 수 있습니다. 정적 콘텐츠의 경우 아무 페이지에나 끌어다 놓기만 하면 편집을 시작할 수 있습니다. 동적 콘텐츠의 경우 컬렉션에 서식 있는 텍스트 필드를 추가한 다음 설정 패널에서 서식 있는 텍스트 요소를 해당 필드에 연결합니다. 짜잔!

각 서식 있는 텍스트의 서식을 사용자 지정하는 방법

제목, 단락, 따옴표, 그림, 이미지 및 그림 캡션은 모두 중첩된 선택기 시스템을 사용하여 클래스를 서식 있는 텍스트 요소에 추가한 후에 스타일을 지정할 수 있습니다.

제목, 단락, 따옴표, 그림, 이미지 및 그림 캡션은 모두 중첩된 선택기 시스템을 사용하여 클래스를 서식 있는 텍스트 요소에 추가한 후에 스타일을 지정할 수 있습니다.
양식

양식 요소의 일반적인 스타일입니다.

입력
텍스트 영역
라디오
체크박스
선택
감사합니다! 제출이 접수되었습니다!
죄송합니다! 양식을 제출하는 동안 문제가 발생했습니다.
컨테이너

다양한 유형의 컨테이너 너비.

컨테이너 가득 찼습니다.
컨테이너가 가득 찼습니다.
컨테이너
1460px 컨테이너
컨테이너 매체
1200px 컨테이너 중형
컨테이너 소형
900px 컨테이너 소형
내부 컨테이너
800px 내부 컨테이너
내부 컨테이너 소형
600px 내부 컨테이너 소형
내부 컨테이너
왼쪽
800px 내부 컨테이너 왼쪽
섹션 간격

섹션이 숨 쉴 수 있는 공간을 더 많이 확보하고 모든 섹션의 간격을 동일하게 유지합니다. 반응형에서는 간격이 줄어듭니다.

섹션 간격
패딩 상단 하단 150px
섹션 간격 상단
패딩 상단 150px
섹션 간격 하단
패딩 하단 150px
여백

헬퍼 여백 클래스를 사용하면 요소 사이에 여백을 추가하고 사이트 전체에서 일관되고 통일된 간격 값을 유지할 수 있습니다.

하단 여백 0px
마진 없음
하단 여백 4px
여백 하단 4
하단 여백 8px
여백 하단 8
하단 여백 12px
여백 하단 12
하단 여백 16px
여백 하단 16
하단 여백 20px
여백 하단 20
하단 여백 24px
여백 하단 24
하단 여백 28px
여백 하단 28
하단 여백 32px
여백 하단 32
하단 여백 36px
여백 하단 36
하단 여백 40px
여백 하단 40
하단 여백 44px
여백 하단 44
하단 여백 48px
여백 하단 48
하단 여백 54px
여백 하단 54
하단 여백 60px
여백 하단 60
하단 여백 70px
여백 하단 70
하단 여백 80px
하단 여백 80%