반응형 작업(1) - 미디어 쿼리

 

 

 

1. 미디어 쿼리

: 미디어 쿼리는 반응형을 위한 기본이자 핵심!

 

- 특정 브라우저 폭을 지정해서 css 구문을 입력하면 해당 브라우저 폭에서는

미디어쿼리 안쪽의 구문이 기존 css구문을 덮어씀

- 속성값이 같다면 생략가능

- 속성 추가 가능

- 미디어쿼리 구간 안에서 전체 너비값(width)은 총합이 100%가 되도록 작성

(고정 px을 %로 바꾼다.)

 

 

 

 

미디어쿼리 적용

CSS 파일 내에 직접 작성

.title {
  font-size: 60px;
}

@media screen and (max-width: 600px) {
  .title {font-size: 20px;}
}

 

타이틀의 텍스트 크기를 60px로 화되, 600px보다 작은 화면에서는 20px로 줄인다는 내용입니다!

작성순서 : 원본 css -> 브라우저 큰 폭 -> 작은폭 순서

 

 

@media screen and (max-width:1179px) {}
/* 최대 너비가 1179px 이하일 때 */

@media all and (min-width:768px) and (max-width:1080px) {}
/* '모든 디바이스 & 최소 너비가 768 이상 & 최대 너비가 1080 이하'라는 조건을 모두 만족할 때 */

 

 

 

모바일과 데스크탑, 누가 먼저?

모바일 퍼스트 : min-width

데스크탑 퍼스트 : max

 

 

모바일 퍼스트는 말 그대로 모바일 우선입니다.

따라서 모바일에 대한 스타일이 우선 적용되도록, 분기점(beak poink)가 낮은 순대로 작성해 나갑니다.

 

 

/* mobile First */

.title { font-size: 12px; }

@media screen and (min-width: 640px) {
  .title { font-size: 14px; }
}

@media screen and (min-width: 768px) {
  .title { font-size: 16px; }
}

@media screen and (min-width: 1024px) {
  .title { font-size: 18px; }
}

 

 

반면에 데스크탑 퍼스트는 분기점(break poink)를 높은 순서부터 작성합니다.

이 경우에는 뷰포트 값이 작아질수록 스타일을 덮어쓰는 방식으로 적용이 되겠죠!

 

 

/* Desktop First */

.title { font-size: 18px; }

@media screen and (max-width: 1023px) {
  .title { font-size: 16px; }
}

@media screen and (max-width: 767px) {
  .title { font-size: 14px; }
}

@media screen and (max-width: 639px) {
  .title { font-size: 12px; }
}

 

보여지는 결과물은 똑같기에 크게 상관은 없으며, 작성 방식에만 차이가 있어요.