[쉽게 배우는 H.C.J] Chapter 4 - 미디어 쿼리

1. 미디어 쿼리 : 미디어 및 화면의 크기에 따라 다른 스타일시트가 적용되도록 지원

• 화면의 크기가 다르면 보이는 내용도 화면 크기에 맞게 보여야 함
• 웹 사이트를 1개만 만들고 화면 크기에 따라 알맞게 자동으로 배치되거나 글자크기나 콘텐츠 크기 등을 자동으로 변환시킬 수 있도록 함 ==> "N스크린 대응"

※ 반응형 웹 사이트 : 미디어 쿼리를 이용해 유동형 레이아웃을 구현한 것 사이트.

---

2. 미디어 쿼리 사용법

• 미디어 쿼리는 CSS로 구현된다.
• 작성 순서는 태그에 공통적으로 적용할 내용, 특정 태그에만 적용할 내용, 그리고 마지막으로 미디어 쿼리를 기술함

1) 작성 위치 : HTML 파일 속에 <link> 태그로 기술하거나, CSS 파일에 추가한다. 

• 외부/내부 모두 여러 화면 크기에 대응해서 여러 개의 미디어 쿼리를 설정해준다. 외부 미디어 쿼리는 @media 키워드 사용.

2) 작성 방법 : 미디어 타입에 따라 여러가지 존재하지만, 반응형 웹 구현에는 "screen" 사용

@media screen and (조건 추가) ..

□  조건 추가 시 and 사용

@media screen and (min-width : 320px) and (max-width : 550px) {}

□ widtth가 아닌 min-width, max-width 사용.

□ 미디어 쿼리 작성 시 작은 화면 -> 큰 화면 순으로 작성