[CSS] 미디어 쿼리를 이용한 반응형 웹 만들기

 

웹페이지에서 우클릭 후 검사를 클릭하면 개발자 도구가 열립니다. 개발자 도구 상단의 두번째 아이콘인 'Toggle device toolbar'를 클릭하면 위와 같이 모바일, pc 등 다양한 기기, 다양한 크기의 화면에서 웹페이지가 어떻게 보이는지 확인해볼 수 있습니다. 미디어 쿼리를 이용하면 위 예시와 같이 뷰포트(화면 상의 표시 영역)의 넓이가 500px 이상일 때, 이하일 때 등 특정 조건을 만족했을 때의 웹페이지의 디자인을 다르게 설정할 수 있습니다.

---

미디어 쿼리의 기본 형태

@media mediatype and (expressions) {
  CSS-Code;
}

• mediatype은 웹 페이지가 보여지는 장치를 의미합니다.

• expressions의 조건들이 모두 참이면 css-code의 내용을 웹 페이지에 적용합니다.

---

미디어 타입

all	모든 미디어 장치에 사용
print	프린터에 사용
screen	컴퓨터 스크린, 태블릿, 스마트폰 등에 사용
speech	페이지를 읽어주는 스크린 리더에 사용

mediatype은 생략할 수 있으며, 생략된 경우에는 기본값으로 all이 적용됩니다.

 

@media all and (expressions) {
  CSS-Code;
}

@media (expressions) {
  CSS-Code;
}

---

조건

미디어 쿼리에 적용되는 조건은 주로 다음과 같습니다.

• 뷰포트의 높이와 너비

• 장치 스크린의 높이와 너비

• 가로 모드/세로 모드

 

1. width / height

 

뷰포트의 넓이는 웹 브라우저에서 툴바 등을 제외한 웹 페이지의 내용이 표시되는 영역입니다.

 

'뷰포트의 너비가 500px일 때'라는 조건을 적용하려면 다음과 같이 입력합니다.

@media all and (width: 500px) {
  body {
    background-color: green;
  }
}

 

 

'뷰포트의 너비가 500px 이상일 때'라는 조건을 적용하기 위해서는 최소 너비가 500px일 때부터 참이 되므로,

@media all and (min-width: 500px) {
  body {
  	background-color: green;
  }
}

위와 같이 min-width를 사용합니다. 

 

 

반대로 '뷰포트의 너비가 500px 이하일 때'라는 조건을 적용하기 위해서는 최대 너비가 500px일 때까지 참이 되므로,

@media all and (max-width: 500px) {
  body {
  	background-color: green;
  }
}

위와 같이 max-width를 사용합니다.

 

 

2. device-width / device-height

 

스크린은 실제 장치의 디스플레이 영역을 말합니다.

 

조건을 입력하는 방식은 width/height와 같습니다.

@media all and (device-height : 500px) {
	display: none;
}

@media all and (min-device-height : 500px) {
	display: none;
}

@media all and (max-device-height : 500px) {
	display: none;
}

 

 

3. orientation

 

뷰포트의 가로, 세로 비율로 장치의 방향을 판단합니다.

 

@media all and (orientation: portrait) {
	#main {margin-left: 216px;}
}

장치가 세로 모드일 때 실행됩니다.

 

@media all and (orientation: landscape) {
	#main {margin-left: 216px;}
}

장치가 가로 모드일 때 실행됩니다.

 

 

4. and 연산자

 

여러 개의 조건을 동시에 만족할 때 사용합니다.

@media all and (min-width: 500px) and (max-width: 1000px){
	#main {margin-left: 216px;}
}

 

뷰포트의 너비가 최소 500px 이상, 그리고 최대 1000px 이하일 때 실행됩니다.

 

 

5. 쉼표 연산자

 

여러 개의 조건 중 하나 이상을 만족할 때 사용합니다.

@media all and (min-width: 500px), (max-width: 1000px){
	#main {margin-left: 216px;}
}

 

뷰포트의 너비가 최소 500px 이상, 또는 최대 1000px 이하일 때 실행됩니다.

 

 

6. not 연산자

 

조건의 의미를 반대로 적용합니다.

@media not all and (orientation: portrait){
	#main {margin-left: 216px;}
}

장치가 가로 모드일 때 실행됩니다.

 

 

 

 

-2020/07/13 수정