1. 주 사용 색상
용도 | 컬러코드 |
---|---|
Main color | #d12127 |
background color | #000000(검정색) |
#fffff(하얀색) | |
#151515 | |
#F2F2F2 |
2. 사용 폰트 : Noto Sans KR
Noto Sans KR
font-weight 참조
- Thin(100)
- Light(300)
- Regular(400)
- Medium(500)
- Bold(700)
- Black(900)
3. 폰트
tag(용도) | font-size | font-weight | line-height | color |
---|---|---|---|---|
body | PC :17px = 1.7rem Tablet :15px = 1.5rem Mobile: 15px = 1.5rem | 400 | 1.5(단위없음) = font-size * 1.5 | #858585 |
tag(용도) | font-size | font-weight | line-height | color |
---|---|---|---|---|
h1 | PC :45px = 4.5rem Tablet : 37px = 3.7rem Mobile: 30px = 3rem | 500 | 1.3(단위없음) = font-szie * 1.3 | 개별 설정 |
h2 | PC :37px = 3.7rem Tablet : 2.8px = 2.8rem Mobile: 28px = 2.8rem | 400 | ||
h3 | PC :25px = 2.5rem Tablet : 20px = 2rem Mobile: 20px = 2rem | 500 | ||
h4 | PC :20px = 2rem Tablet : 17px = 1.7rem Mobile: 17px = 1.7rem | |||
h5 | PC :25px = 2.5rem Tablet : 20px = 2rem Mobile: 20px = 2rem | |||
h6 | PC :20px = 2rem Tablet : 17px = 1.7rem Mobile: 17px = 1.7rem |
4. HTML 줄바꿈 태그
기본 줄바꿈(모든 화면에서 줄바꿈) : <br/>
모바일에서만 줄바꿈 : <br class="mobile-enter"/>
태블릿에서만 줄바꿈: <br class="tablet-enter"/>
데스크탑에서만 줄바꿈: <br class="desktop-enter"/>
5. Button Style
- font-family : Noto Sans KR
- button size : Small
- padding: 17px 70px
- font-size: 20px = 2rem(tablet/mobile : 1.7rem)
- font-weight:500
- color: #FFFFFF
- background-color: #d12127
- Hover Animation : none