반응형 웹(미디어 쿼리)

반응형 웹 디자인이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.

@media

다양한 미디어 유형이나 장치에 따라 서로 다른 스타일 규칙을 적용

@media 미디어타입 and (미디어 특성){
    css코드
   }

@media screen and (max-width:1200px){
    body {
        color: red
    }

미디어 타입

all : 모든 미디어 타입에 적용 (기본값)

screen : 컴퓨터 화면 태블릿 스마트폰 등 (자주 씀)

print : 인쇄 전용 (잘 안씀)

// 작성시 미디어 타입은 생략이 가능함

미디어 특성

width : 뷰포트 가로 너비

max-width : 뷰포트 최대 가로 너비(이하)

min-width : 뷰포트 최소 가로 너비(이상)

height : 뷰포트 세로 너비

max-height : 뷰포트 최대 세로 너비(이하)

min-height : 뷰포트 최대 세로 너비(이상)

orientation : 뷰포트 방향(portrait, landscape)

미디어 옵션

종류 디바이스 단위(px)

Large Devices Desktops 1024px 이상

Medium Devices Tablets 1024px 이하

Small Devices Tablets + Phones 768px 이하

예제 1

뷰포트가 1024px이하로 내려가면 크기와 색상이 변하는 코드

<div class ='box'><div>

.box {
	background:tomato;
	width:100px;
	height:100px
}

@media screen and (max-width:1024px) {
	.box { 
		background:blue;
		height:300px
	}
}

뷰포트가 작아짐에 따라 100X100 토마토색의 상자가 100X300 파란색의 상자로 변경됨

예제2

뷰포트가 1024px이상로 올라가면 크기와 색상이 변하는 코드

.box {
	background:yellow;
	width:100px;
	height:100px
}

@media screen and (min-width:1024px) {
	.box { 
		background:green;
		height:300px
	}
}

뷰포트가 커짐에 따라 100X100 노란색의 상자가 100X300 초록색의 상자로 변경됨

예제3

orientation:portrait 사용 해보기

.box {
	background:red;
	width:100px;
	height:100px
}

@media screen and (orientation:portrait) {
	.box { 
		background:gray;
		height:300px
	}
}

뷰포트 가로의 길이보다 세로의 길이가 더 길어지면 박스 색상이 변경됨

예제4

orientation:landscape 사용 해보기

.box {
	background:pink;
	width:100px;
	height:100px
}

@media screen and (orientation:landscape) {
	.box { 
		background:brown;
		height:300px
	}
}

뷰포트 세로의 길이보다 가로의 길이가 더 길어지면 박스 색상이 변경됨

중요한지는 모르겠지만 html 추가적으로 메타태그로 이걸 넣어주는거 같다

<meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"
    />