1. 주 사용색상
용도 | 컬러 |
---|---|
포인트 | #467EFF |
포인트2 | #02CDCC |
기본 | #122244 |
보조 | #535D64 |
텍스트 | #7B7B7B |
2. 사용폰트
- Noto Sans KR
용도 | 크기 + 두께 + 줄간격 + 글자간격 |
---|---|
기본 | 15px + 500 + 1.4em + -0.5 |
보조 | 15px + 400 + 1.5em + -1 |
h1 | 52px + 400 + 1.2em + -2 |
h2 | 30px + 500 + 1.3em + -1 |
h3 | 21px + 600 + 1.4em + -1 |
h4 | 25px + 600 + 1.2em + -2 |
h5 | 25px + 500 + 1.4em + -1 |
h6 | 20px + 500 + 1.4em + -1 |
기본 Heading
보조 Heading
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
3. HTML 줄바꿈
-
기본 줄바꿈(모든 화면) :
- 모바일에서만 줄 바꿈 : [br class="mobile-enter"]
- 타블렛에서만 줄 바꿈 : [br class="tablet-enter"]
- 데스크탑에서만 줄 바꿈 : [br class="desktop-enter"]
* 사용시 [ ] 괄호를 < > 변경하여 사용 / 예) <br class="mobile-enter">
4. 버튼 스타일
- 사용폰트 : 기본
- 배경컬러 : 포인트1
- 마우스오버 배경컬러 : 포인트2
- 폰트컬러 : 컬러1
- 둥근 모서리 : 왼쪽 5 - 오른쪽 5 - 아래쪽 5 - 왼쪽 5 (단위 : px)
- 안쪽 여백 : 위쪽 20 - 오른쪽 100 - 아래쪽 20 - 왼쪽 100 (단위 : px)