[CSS] 미디어 쿼리(Media Query) - 반응형 개발, 가상 요소

1. 미디어 쿼리(Media Query)

- 반응형 개발 : 접속하고 있는 기기들마다 다르게 반응하여 표현되도록 개발하는 것

- 웹 페이지에 접속하고 있는 기기마다 원하는 형태로 스타일을 조정할 수 있는 기술

- 기기의 화면 너비, 높이 등으로 판단

 

- 장점 : 업데이트, 유지관리, 디버깅이 쉬워지며 업데이트 비용이 감소

- 단점 : 구현이 어렵고, 브라우저가 서버에서 다운로드하는 속도(코드)가 느려짐 (사용자에게 보여주는 화면의 로딩이 느려진다.)

 

- 위에서부터 내려오면서 하나하나 적용시키면서 지나가는 것

2. 문법

@media screen and (조건문) { 스타일 적용 }

 

① @media : 미디어 쿼리가 시작됨을 표시 

② screen : 미디어 쿼리의 적용 기기 / all : 모든 기기

③ and : 앞의 기기와 뒤의 조건문을 둘 다 만족해야 성립

④ (조건부) : 스타일을 적용시킬 대상 기기에 대한 조건(보통 화면 너비)

⑤ 스타일 적용문(선언부) : 조건에 따라 적용할 스타일을 지정

3. 가상 요소

- 해당 요소의 앞, 뒤에 가상의 요소가 있다고 가정하고 스타일을 지정

태그명 :: before { 스타일 지정 }

태그명 :: after { 스타일 지정 }

 

content: "넣고 싶은 내용"

- 넣고 싶은 내용을 적는 속성

4. 예시

데스크탑 1025px ~ 1920px

데스트탑, 노트북 961px ~ 1024px

노트북 769px ~ 960px

태블릿 577px ~ 768px

모바일 ~ 576px

기본

데스크탑 1025px ~ 1920px

데스크탑, 노트북 961px ~ 1024px

노트북 769px ~ 960px

태블릿 577px ~ 768px

모바일 ~ 576px