스타일 가이드

이 스타일 가이드 페이지에는 웹 사이트 전체에서 사용할 스타일 및 구성요소가 포함되어 있습니다. 스타일 가이드의 수정은 모든 페이지에 적용될 수 있습니다.

타이포그래피

사이트 전체에서 사용되는 다양한 텍스트 크기와 텍스트 스타일입니다.

h1

H1 제목글 예시입니다.

h2

H2 제목글 예시입니다.

h3

H3 제목글 예시입니다.

h4

H4 제목글 예시입니다.

h5

H5 제목글 예시입니다.

h6

H6 제목글 예시입니다.

Body - 24px / 1.5

추가 커스텀 텍스트 스타일 예시입니다. (바디, 타이틀 등)

Body - 20px / 1.5

추가 커스텀 텍스트 스타일 예시입니다. (바디, 타이틀 등)

Body - 16px / 1.5

추가 커스텀 텍스트 스타일 예시입니다. (바디, 타이틀 등)

Body - 14px / 1.75

추가 커스텀 텍스트 스타일 예시입니다. (바디, 타이틀 등)

Body - 12Px / 1.75

추가 커스텀 텍스트 스타일 예시입니다. (바디, 타이틀 등)

text style bold

텍스트 스타일 예시입니다.

text style ColorEd green

텍스트 스타일 예시입니다.

text style Colored Green Light

텍스트 스타일 예시입니다.

text style Colored Pupple

텍스트 스타일 예시입니다.

text style Colored Gray2

텍스트 스타일 예시입니다.

text style Colored Gray3

텍스트 스타일 예시입니다.

text style Colored Black

텍스트 스타일 예시입니다.
Large Paragraph

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

Paragraph

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

Small Paragraph

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

Quote
로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.
List
  • 리스트 텍스트의 예시입니다.
  • 리스트 텍스트의 예시입니다.
  • 리스트 텍스트의 예시입니다.
Link
링크(Link) 텍스트의 예시입니다.

사이트 전체의 모든 제목 및 텍스트 요소에 대한 기본 스타일을 설정합니다.

루트 HTML 태그의 스타일을 설정하려면 각 요소 유형에 대한 Selector드롭다운을 열고 해당 HTML 태그 옵션을 선택합니다. (분홍색 태그가 전체 적용)

Select the base HTML tag from the selector menu options.

레이아웃

페이지 전반에서 사용되는 주요 레이아웃입니다.

section - padding large - 120px
section - padding Medium - 80px
section - padding Small - 40px
section - padding 0 - 0px
Container 1280px
Container 1200px
Container 1040px
Container Blog - 720px

프리셋

패딩, 마진값 프리셋입니다.

padding 0
Hide on pc
Hide on Mobile

리치 텍스트

블로그 게시물과 같은 페이지에서 사용되는 긴 섹션의 텍스트 디자인 입니다.

Blog Richtext

H2 제목글 예시입니다.

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

H3 제목글 예시입니다.

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

H4 제목글 예시입니다.

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

H5 제목글 예시입니다.

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

  • 리치 텍스트 불렛 리스트 입니다.
  • 리치 텍스트 불렛 리스트 입니다.
  • 리치 텍스트 불렛 리스트 입니다.
  1. 리치 텍스트 넘버링 리스트입니다.
  2. 리치 텍스트 넘버링 리스트입니다.
  3. 리치 텍스트 넘버링 리스트입니다
캡션은 이렇게 나온답니다

리치 텍스트 링크 예시입니다.

리치 텍스트 볼드 예시입니다.

Rich Text - White

H2 제목글 예시입니다.

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

H3 제목글 예시입니다.

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

H4 제목글 예시입니다.

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

H5 제목글 예시입니다.

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

  • 리치 텍스트 불렛 리스트 입니다.
  • 리치 텍스트 불렛 리스트 입니다.
  • 리치 텍스트 불렛 리스트 입니다.
  1. 리치 텍스트 넘버링 리스트입니다.
  2. 리치 텍스트 넘버링 리스트입니다.
  3. 리치 텍스트 넘버링 리스트입니다
캡션은 이렇게 나온답니다

리치 텍스트 링크 예시입니다.

리치 텍스트 볼드 예시입니다.

FAQ Rich Text

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

  • 리치 텍스트 불렛 리스트입니다.
  • 리치 텍스트 불렛 리스트입니다.
  • 리치 텍스트 불렛 리스트입니다.
  1. 리치 텍스트 넘버링 리스트 입니다.
  2. 리치 텍스트 넘버링 리스트 입니다.
  3. 리치 텍스트 넘버링 리스트 입니다.

리치 텍스트 링크입니다.

리치 텍스트 볼드입니다.

리치 텍스트 이미지 캡션입니다

리치 텍스트 요소의 스타일은 다른 요소와 약간 다르게 작동합니다. 리치 텍스트 요소에 대한 기본 태그는 없지만 상위 리치 텍스트 요소에 클래스가 있는 경우 리치 텍스트 요소에 대한 기본 태그를 사용자 정의할 수 있습니다.
‍
Webflow University에서 더 자세한 내용을 확인해보세요.
리치 텍스트 요소 디자인하기

Give the rich text block a class, then style base tags for elements within that rich text block class.

컬러 스와치

웹사이트 전체에서 사용되는 주요 색상입니다.

Primary Colors

Primary 1

#7756FF

Secondary Colors

Secondary 1

#FF623E

Secondary 2

#FF481F

Gradation Colors

Purple Back

#FF623E

Purple Back

#FF623E

Green Purple

#FF623E

Green Purple

#FF623E

Neutral Colors

Black Dark

#181818

Purple Dark

#160D3A

Black

#1F1F24

Gray3

#828282

Gray2

#BDBDBD

Gray

#EAEAEA

White

#FFFFFF

사이트 전체에서 반복되는 색상을 일관되게 유지하기 위해 사이트에 대한 컬러 스와치를 만들 수 있습니다.

예를 들어 요소 텍스트, 배경 및 테두리에 동일한 "중립 회색"을 사용할 수 있습니다. 회색에 대한 글로벌 스왓치를 생성하면 한 번 변경하고 사이트 전체에서 해당 스왓치가 적용되는 모든 인스턴스를 업데이트할 수 있습니다.
‍
Webflow University에서 더 자세한 내용을 확인해보세요.
글로벌 컬러 스와치 만들기

Create a global swatch to use across your site.

버튼

웹사이트 전체에서 사용되는 주요 버튼 디자인입니다.

Minimal OutLined

버튼 텍스트

Minimal No background

버튼 텍스트

크기별 버튼 클래스와 콤보 클래스를 조합하여 다양한 버튼 세트를 미리 만들 수 있습니다.

Webflow University에서 더 자세한 내용을 확인해보세요.
버튼 스타일링하기

이미지

다양한 규격의 이미지 세트를 미리 만들어 적용할 수 있습니다.

Image 1:1

Image 4:3

Image 3:2

Image 16:9

각각의 비율에 맞는 이미지 Wrapper를 미리 제작할 수 있습니다.

미리 설정한 이미지를 비율을 만들기 위해서는 Image Wrapper의 상단 패딩 비율을 조정하면 됩니다. 예를들어 2:1 비율의 이미지 Wrapper를 만들고 싶은 경우 1/2 으로 50%를 설정하면 됩니다.

아이콘

웹사이트에서 사용되는 아이콘입니다. 기본적인 아이콘 사이즈는 24 x 24 입니다.

아이콘

아이콘은 Feather Icon 팩을 사용했습니다. 흑백 아이콘의 기본 세트는 Asset에 미리 업로드해두었습니다.

폼 (Forms)

웹 사이트에서 이용되는 폼 인풋필드와 라벨, 그리고 기본적인 체크박스, 라디오 버튼 입니다.

Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.

웹사이트에서 이용될 폼의 스타일을 일관되게 유지하는 것은 큰 도움이 됩니다.

Webflow University에서 더 자세한 내용을 확인해보세요.
폼 스타일링하기

탭

기본적으로 제공되는 탭 기능의 커스텀 디자인 템플릿입니다.

탭1
탭2
탭3

탭 엘리먼트에서 공통적으로 사용할 수 있는 스타일을 만들 수 있습니다.

Tab link의 디자인을 통해 전체적인 탭의 스타일을 잡을 수 있으며 Current State 스타일을 변경하여 현재 보여지는 탭의 디자인을 할 수 있습니다.

Webflow University에서 더 자세한 내용을 확인해보세요.
‍탭 스타일링하기

와이어프레임

웹플로우 페이지의 페이지 구조를 잡기위해 사용할 수 있는 와이어 프레임 입니다.

Wire - example

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다.

기본적인 Div의 속성은 색과 사이즈가 없어 와이어 프레임을 잡기 어렵습니다.

이때 와이어프레임 글로벌스타일을 이용하면 보다 쉽게 페이지의 구조를 잡을 수 있습니다.