스타일 가이드

1. 주 사용 색상

용도
컬러코드
Main Color
#0054a6
Footer BG Color
#151515
Text Color
#000000
#444444
#ffffff
#555555
#777777

2. 사용 폰트

  • Noto Sans KR
  • Raleway
  • Montserrat

3. 폰트

tag(용도)
font-family
font-size
font-weight
line-height
Body(default)
Noto Sans KR
14px = 1.4rem
400
1.5
tag(용도)
font-family
font-size
font-weight
line-height
Main Menu id : main-menu
1 Depth
Noto Sans KR
PC : 30px -> 20px
Tablet : 23px -> 18px
Mobile: 20px -> 16px
400
PC : 1.5
Tablet : 1.3
Mobile: 1.3
2 Depth
Montserrat
PC : 24px -> 18px
Tablet : 17px -> 16px
Mobile: 15px -> 14px
400
2
tag(용도)
font-family
font-size
font-weight
line-height
메인 큰 제목 텍스트
tag: h1
Noto Sans KR
class name : heading-h1-type1
PC : 30px = 3rem
Tablet : 28px = 2.8rem
Mobile: 26px =2.6rem
500
1.3
Montserrat
class name : heading-h1-type2
PC : 35px = 3.5rem
Tablet : 33px =3.3rem
Mobile: 31px = 3.1rem
bold
1.6
Noto Sans KR
class name : heading-h1-type3
PC : 35px = 3.5rem
Tablet : 33px= 3.3rem
Mobile: 31px =3.1rem
bold
1.6
메인 설명 텍스트
class name : main-desc-text
Noto Sans KR
PC : 16px = 1.6rem
Tablet :16px = 1.6rem
Mobile: 15px = 1.5rem
400
PC : 2
Tablet : 1.8
Mobile: 1.8

heading-h1-type1

heading-h1-type2

heading-h1-type3

main-desc-text

tag(용도)
font-family
font-size
font-weight
line-height
tag: h2
Noto Sans KR
class name : heading-h2-type1
PC : 26px = 2.6rem
Tablet : 24px = 2.4rem
Mobile: 22px = 2.2rem
500
1.3
tag: h3
Noto Sans KR
class name : heading-h3-type1
PC : 22px = 2.2rem
Tablet : 22px = 2.2rem
Mobile: 20px = 2rem
bold
1.6
tag: h4
Noto Sans KR
class name : heading-h4-type1
PC : 20px = 2em
Tablet : 20px = 2rem
Mobile: 18px = 1.8rem
bold
1.6
tag: h5
Noto Sans KR
class name : heading-h5-type1
PC : 18px = 1.8rem
Tablet : 18px = 1.8rem
Mobile: 16px = 1.6rem
bold
1.6
tag: h6
Noto Sans KR
class name : heading-h5-type1
PC : 15px = 1.5rem
Tablet : 15px = 1.5rem
Mobile: 14px = 1.4rem
bold
1.6

heading-h2-type1

heading-h3-type1

heading-h4-type1

heading-h5-type1
heading-h6-type1

4. HTML 줄바꿈 태그

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

5. Button Style

  • font-family : Raleway
  • button size : small
  • font-family : Raleway
  • button size : medium
  • font-size: 1.5rem
  • transform : Uppercase

6. 아이콘 및 썸네일로 사용한 이미지/텍스트