파이널 프로젝트
👉 완성본 보기
👉 실습 프로젝트 다운받기
style.css
웹사이트 전반 설정
1. 웹 폰트 로드
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap');
2. 변수 설정
/* ===== 변수 구간 ===== */
:root {
--color-main: #FF4200;
--color-sub: #00A200;
--color-dark: #2F4858;
--color-emph: #F10F5F;
--color-text: #281812;
--color-lighter: #DC9C86;
--color-light-bd: #FFE6D6;
--color-light-bg: #FFF5ED;
--font-code: 'Nanum Gothic Coding', monospace;;
--font-size-title: 44px;
--font-size-subtitle: 32px;
--font-size-tag: 26px;
--font-size-larger: 20px;
--font-size-text: 18px;
--height-toolbar: 72px;
}
3. 초기화 설정
/* ===== 리셋 구간 ===== */
body {
margin: 0;
font-family: 'Noto Sans KR', sans-serif;
/* 개발용 설정 */
min-height: 150vh;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: normal;
margin: 0;
}
p {
margin: 0;
}
strong, em {
font-weight: inherit;
font-style: normal;
}
ul, ol {
margin: 0;
padding: 0;
list-style-type: none;
}
dl { margin: 0; }
dd {
margin: 0;
display: inline;
}
figure { margin: 0; }
a {
text-decoration: none;
color: inherit;
}
th { font-weight: normal; }
address { font-style: inherit; }
4. 스크린리더용
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}