스타일 가이드
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. 아이콘 및 썸네일로 사용한 이미지/텍스트
•
