Do it : HTML, CSS - 15.미디어 쿼리

미디어 쿼리란?

-사이트에 접속하는 장치에 따라 특정한 css스타일 사용하게 한다

-접속하는 기기(PC, 태블릿, 스마트폰)의 화면 크기에 따라 레이아웃이 달라진다

 

미디어 쿼리 구문

@media |not |only| screen |and (min-width: 200px)| { }

 

연산자

and : 조건을 추가한다

only : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건 인식

not : 다음에 나오는 미디어 유형 제외

 , : 동일한 스타일 유형을 사용할 때 쉼표 사용

 

미디어 유형

all : 모든 미디어

print : 인쇄 장치

screen : 컴퓨터, 스마트폰 

tv 

aural : 화면을 읽어 소리로 출력

braille : 점자

tty

embossed 

 

미디어 쿼리 조건

 

1. 웹 문서의 가로 너비, 세로 높이

width | height 

min-width | height : 최소

max-width | height : 최대

 

max-width값에 따라 문서의 배경이미지를 다르게 할 수 있다

 

 

2. 단말기의 가로 너비, 세로 높이

~단말기의 해상도와 실제 브라우저(물리적) 너비는 다르다

~단말기 너비나 높이도 고려해야 한다

 

device-width | device-height

min-device-width | device-height : 최소

max-device-width | device-height : 최대

 

단말기 크기와 뷰포트를 하나로 통일한다 >뷰포트를 width="device-width"로 지정한다

 

3. 화면 회전

~가로 화면, 세로 화면에 따라 달라진다

~orientation 속성 사용한다

orientation : portrait (세로)

orientation : landscape (가로)

 

 

4. (단말기의 물리적) 화면 비율

~너비값 / 높이값 나눈 것이다.

~브라우저 화면 비율

aspect-ratio : 화면 비율

min-aspect-ratio : 최소

max-aspect-ratio : 최대

 

~단말기 화면 비율

device-aspect-ratio : 화면 비율

min-device-aspect-ratio : 최소

max-device-aspect-ratio : 최대

 

화면 비율이 16:9 일 때, 16:9 이하일 때, 16:9 이상일 때로 나누어 미디어 쿼리 정의

 

5. 색상당 비트 수

~단말기에서 최대 색상 비트수 > 미디어 쿼리 조건으로 사용 가능

color : 비트수

min-color

max-color

 

비트수:0 =컬러지원 안함

비트수:3 =8 (2*2*2)비트 색상

 

6. 미디어 쿼리 중단점 만들기

~중단점=기기의 화면 크기

~모바일 기기의 레이아웃을 기본으로 css 만든다

~태블릿, 데스크톱에는 더 많은 기능과 스타일을 추가한다

~부트스트랩, 마젠토 중단점은 정해져 있음

 

 

 

---

미디어 쿼리 적용하기

 

외부 CSS 파일 연결하기

 

1. <link>태그 사용

<link rel="stylesheet" media="screen and (max-width:768px)" href="tablet.css">

 

2. @import 구문 사용

@import url("tablet.css") screen and (min-width:321px) and (max-width:768px);

 

<link>태그를 주로 사용한다

 

 

웹문서에 직접 정의하기

 

1. <style>태그 사용

<style media="screen and (max-width:768px)">

     body { background-color: orange; }

</style>

 

2. @media 구문 사용

@media screen and (max-width:768px) {

     body {

          background-color: orange;

     }

}

 

개발자 도구 > show media query > 파란색(min), 초록색(min max), 주황색(max) 막대 확인

 

 

 

---

미디어 쿼리 사용해서 웹문서 만들기

-브라우저 화면 너비에 따라 레이아웃이 바뀌는 화면 만든다.

-css를 사용해 레이아웃 만드는것에 익숙해져야 함

 

레이아웃 구성하기

-처음부터 레이아웃을 잘 구성 + 옮길 부분 결정

레이아웃

-모바일 > 태블릿 > pc 순서대로 구상

-화면 너비에 따라 가로 | 세로 배치, 이미지와 텍스트도 가로 | 세로 배치

 

미디어 쿼리 중단점 결정

-화면 너비에 따라 카드를 세로 | 가로로 배치 > 너비값만 정하면 중단점 결정

-이미지의 너비값 기준으로 카드 너비값 결정

-모바일 세로 카드 : 300px

-태블릿 가로 카드 : 550px (이미지300 + 텍스트250)

-데스크톱 가로 카드 3개 : 1710px (마진10 + 550 + 마진10 + 마진10 + 550 + 마진10 + 마진10 + 550 + 마진10)

 

768px 미만 = 모바일 

768~1719px 사이 = 태블릿

1720px 이상 = 데스크톱

 

 

태그로 구성

-미디어 쿼리의 영향을 받는 요소를 <div>태그로 묶는다

-텍스트 부분도 <div>태그로 묶는다