주 사용 색상 | ||
---|---|---|
용도 | 컬러코드 | 예시 |
main color | #5abea9 | #5abea9 |
sub color | #fdd000 | #fdd000 |
BG color | #fbf7ea | #fbf7ea |
태그 | font-size | font-weight | line-height | color | 예시 |
---|---|---|---|---|---|
테마설정 폰트 : Noto Sans KR h1만 style.css 나눔손글씨붓 폰트 선언하여 사용 | |||||
h1 (나눔손글씨붓) | 80px | 테마설정 굵기(500) | 120px | #313131 class="themecolor" | 가나다라마바사 |
h2 | 30px | 테마설정 굵기(500) | 45px | #313131 | 가나다라마바사 |
h3 | 25px | 테마설정 굵기(400) | 40px | #313131 | 가나다라마바사 |
h4 | 16px | 테마설정 굵기(400) | 22px | #ffffff / #3f3f3f / class="themecolor" | 가나다라마바사 |
h5 | 18px | 테마설정 굵기(300) | 28px | #ffffff /#313131 | 가나다라마바사 |
h6 | 15px | 테마설정 굵기(100) | 24px | #616262 | 가나다라마바사 |
body(Content) | 15px | 테마설정 굵기(100) | 24px | #616262 | 가나다라마바사 가나다라마바사 |
테마옵션에 설정된 폰트 굵기 이외 다른 굵기를 지정해주고 싶을때 사용하는 class <h1 class="fw-100" >{font-weight:100;}</h1> <h2 class="fw-200" >{font-weight:300;}</h2> <h6 class="fw-400" >{font-weight:400;}</h6> <h6 class="fw-500" >{font-weight:500;}</h6>
HTML 표준 줄바꿈 태그(모든 화면에서 줄바꿈) <br/> 모바일에서만 줄바꿈 : <br class="m-enter"/> 태블릿에서만 줄바꿈: <br class="tablet-enter"/> 데스크탑에서만 줄바꿈: <br class="desktop-enter/>