CH4- sec3 태그를 표현하는 CSS와 Advanced CSS3

<section 03 : 미디어 쿼리>

미디어쿼리

: 미디어 및 화면의 크게 따라 다른 스타일시트가 적용되도록 지원함

지금까지의 스타일시트들은 모두 미디어의 타입이나 화면크기를 고려하지 않고 작성된 것

그렇다면 미디어 쿼리를 어디에 작성하는 것이 좋은지를 결정하는 미디어 쿼리 작성 위치와 미디어 쿼리 구문을 작성하는 방법을 알고 있어야 함

▶미디어 쿼리를 학습하기 전

첫번째: 미디어 쿼리는 CCS로 구현

두번째 : CSS구문들간의 순서를 알고 있어야 효율적으로 기술 가능

 

▶CSS구문들간의 순서

첫번쨰 : 가장 기본적인 스타일로 태그들에 공통적으로 적용할 내용을 기술

두번째 : 특정 태그에만 적용되는 스타일을 기술

마지막 : 미디어 쿼리를 기술 - 화면의 크기별로 각각 지정

 

▶미디어 쿼리는 작성위치에 따라 html 페이지에 <link> 태그를 사용해서 기술하는 방법과 css파일에 미디어 쿼리를 기술함

 

▶미디어 쿼리에는 미디어 타입에 따라 all, print, screen, speech 등이 있으나 반응형 웹을 구현할 때는 screen을 사용

따라서 화면에 적용되는 미디어 쿼리는 @mediascreen으로 시작