스타일 가이드

스타일 가이드

1. 주 사용색상

용도
컬러
Main color
#C6252A
Sub color
#293243
Nav color
#191816DE

2. 사용 폰트

  • Noto Sans KR
  • font-weight 참조
    • Normal
    • 400
    • 600

3. 폰트

용도
font-size
fot-weight
color
Body
17px
normal
#191816
용도
Depth
font 크기/두께/줄간격/글자간격
color
Main Menu
1Depth
17px/400//-1
#8E8E8E
2Depth
15px/500//-1
#8E8E8E
용도
font 크기/두께/줄간격/글자간격
color
H1
58px/600//
#ffffff
H2
33px/600//-2
#C6252A
H3
33px/400/1.3/-2
#293243
H4
23px/500//-1
#262626
H5
21px/600//-1
#262626
H6
15px/500//-1
#838B9B

※ 예를 들어 같은 H1이라도 용도에 따라 다른 컬러가 사용되었습니다. (H1~H6 모두 컬러 값이 다를 수 있습니다.)

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

4. HTML 줄바꿈

  • 기본 줄바꿈(모든 화면) : <br>
  • 모바일에서만 줄 바꿈 : <br class=”mobile-enter”/>
  • 태블릿에서만 줄 바꿈 : <br class=”tablet-enter”/>
  • 데스크탑에서만 줄 바꿈 : <br class=”desktop-enter”/>

5. 버튼 스타일

  • 버튼 사이즈 : 매우작음
  • font-family : Noto Sans KR
  • font-size : 17px
  • 굵기 : 400
  • 글자간격 : -1
  • color : #C2652A
  • 테두리 : 없음
    • 둥근모서리 : 5
    • 안쪽여백 : 15-90-15-90