1. Google Fonts (구글 폰트)
적용 순서
① https://fonts.google.com 에서 폰트 선택
예: Roboto, Noto Sans, Montserrat
② <head>에 링크 추가
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
③ CSS에 적용
body {font-family: 'Noto Sans KR', sans-serif;}
2. 눈누폰트
적용 순서
① https://noonnu.cc 접속 → 원하는 폰트 선택
② 제공되는 링크 복사해서 <css> @font-face 붙여넣기
예:
@font-face {
font-family: 'MyFont';
src: url('./fonts/myfont.ttf') format('truetype');
}
body {
font-family: 'MyFont';
}3. 다폰트
적용 순서
① https://www.dafont.com/ 접속 → 원하는 폰트 선택
② 폰트 다운로드
4. @media 개념
@media란?
반응형 웹 디자인을 구현하기 위한 CSS 조건문입니다.
"화면의 크기나 디바이스 조건에 따라 다른 스타일을 적용"할 수 있습니다.
✅ 기본 문법
css
@media (조건) {
/* 조건이 참일 때 적용될 CSS */
}
✅ 예시
css
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}👉 화면 너비가 600px 이하일 때 배경색이 lightblue로 바뀜
👉 즉, 모바일 기기에서만 스타일 적용
✅ 주요 조건들
| 조건 | 의미 |
|---|---|
max-width | 지정된 너비 이하일 때 적용 |
min-width | 지정된 너비 이상일 때 적용 |
max-height | 지정된 높이 이하일 때 |
orientation: landscape | 가로모드일 때 |
orientation: portrait | 세로모드일 때 |
✅ 실무에서 자주 쓰는 패턴
css
/* 데스크탑 기준 기본 스타일 */
body {
font-size: 18px;
}
/* 태블릿 이하 */
@media (max-width: 1000px) {
body {
font-size: 16px;
}
}
/* 모바일 */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}✅ 왜 쓰냐?
❗디바이스 크기가 다양하니까!
→ 데스크탑, 태블릿, 모바일에서 레이아웃이 깨지지 않도록
→ 폰트 크기, 메뉴 배치, 버튼 간격 등을 디바이스에 맞게 조절함
안녕하세요