[CSS]#6 Media Queries

Media query 는 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다. (나의 웹사이트를

보고있는 사용자의 스크린 사이즈)

미디어쿼리는 우리가 조건을 추가할 수 있는 방법이다. 코드의 조건을 적는 것이지요 

만일 이 조건이 true(참)이라면 {} 중괄호 안의 CSS를 실행하라는 조건을 말해주는 것입니다. 

 

미디어 쿼리도 중괄호로 여닫지만 그 안에 element에 CSS를 적용시켜야 합니다. (중괄호 안에 중괄호)

미디어 쿼리는 " and "를 써서 연결됩니다. 

 

※참고: (min-device-width) 와 (max-device-width)는 오직 핸드폰에만 적용된다. 데스크톱은 이해할 수 없겠죠? 

그래서 아래의 코드는 (max-width: 600px)이런식으로 준 것입니다. 

*tip: landscape모드 = 가로모드

media query 예시 코드 600px 

기본형식: style 태그에 

@medai screen and (원하는 범위) {

    적용할 셀렉터 {

           속성: 속성값;

    }

}

미디어 쿼리 600px ~ 750px 사이

미디어 쿼리의 조건으로 가로, 세로 모드도 구분할 수 있음

작성법: @media screen and ~다른조건~ and (orientaion: landscape){ }

가로모드 = landscape 

세로모드 = portrait(디폴트값)

(orientation: landscape)

참고 영어단어: flip v. 탁 돌리다 e.g.) please flip your phone -  휴대폰을 돌려주세요 

 

span 태그 가로모드시 안보이게 하기

참고로 body값에 flexdirection: column;으로 해서 div (옆이 아니라)아래에 span이 있을 수 있게 만들어줬습니당

이 코드의 결과 값으로는 미디어 쿼리에 orientation: landscape 했을 때 span 태그가 안보이게 됩니다

 

미디어 쿼리 코드 중에서 [ @media screen and (어쩌구) ] "screen"으로 작성된 부분이 바로 media type이다.

이 부분에는 print와 같이 다른 종류의 screen도 존재한다. 참고로 print는 프린트할 때 보여지는 화면을 말한다.

다른 미디어 타입들이 존재하지만 많이 사용되지 않기 때문에 궁금할 때 찾아서 적용시키는 것을 추천 

 

@media print 사용 코드예시 

 

@media print

적용 시 옵션에 배경그래픽 체크해야 보인다.

주의: 코드를 가지고 있는 화면을 인쇄할 때, 인쇄 - >옵션에 들어가 [배경 그래픽] 부분에 체크를 해주면 화면처럼 적용된 CSS효과가 보인다. 기본적으로는 적용되지 않아있음 

 

더 많은 정보: CSS media queries mdn