Media Query 공부하기

Media Query

반응형 디자인을 생성하기 위한 가장 대표적인 접근법

@media media-type and(논리연산자) (미디어 특성) {
	// 스타일 작성
}

🍉 media-type

• 화면 (screen)
• 티비 (tv)
• 프린터 (print)

🍉 논리연산자

• and : 모든 쿼리가 참이여야 적용
• not : 모든 쿼리가 거짓이여야 적용
• only : 미디어쿼리를 지원하는 브라우저에서만 적용

🍉 미디어 특성

• min-width (최소값) : 요소의 최소 너비를 설정 / 해당 값보다 작아지는 것을 방지
• max-width (최대값) : 요소의 최대 너비를 설정 / 해당 값보다 커지는 것을 방지
• orientation (가로 / 세로)
• width : 뷰포트 너비
• height : 뷰포트 높이
• aspect-ratio : 뷰포트 가로세로비

---

반응형을 나타낼 때 viewport에 대한 메타태그를 기술해줘야한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모든 기기에 폭을 맞춰 호환!

• width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정 (자동맞춤)
• initial-scale=1.0 : 처음 페이지 로딩시에 축소/확대가 되지 않는 원래의 정상 크기를 사용할 수 있도록 하는 설정 (0~10)
  • 페이지 처음 접속 시 보여질 배율 = initial-scale
• user-scalable : 사용자의 축소/확대 허용 여부 (no > 축소/확대 허용X)
• minimum-scale : 뷰포트의 최소 배율값 (0~10)
• maximum-scale : 뷰포트의 최대 배율값 (0~10)

---

🍉 헷갈리는 min-width / max-width

min-width

@media screen and (min-width: 1500px) {
	body { background-color : #a54252 }
}

• 100% 기준으로 화면사이즈를 줄였을 때 최소값 유지
  1500px ~ 100%

max-width

@media screen and (max-width: 1024px) {
	body { background-color : #fdd141 }
}

• 0 기준으로 화면사이즈 최대치
  0 ~ 1024px

---

🍉 Break Point (화면에 대한 분기점)

※ 작성시 높은 순서대로 작성

• 낮은 해상도의 PC, 태블릿 가로 : ~ 1024px
• 테블릿 가로 : 768px ~ 1023px
• 모바일 가로, 태블릿 : 480px ~ 767px
• 모바일 : ~ 480px

/* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { ... }

/* 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { ... }

/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) { ... }

/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) { ... }