[3] 미디어쿼리

생활코딩 web2 css-12, 13번째 강좌 미디어 쿼리 쓰기와 써먹기 였다.

@media(max-width:800px){
      #grid{
        display: block;
      }
}

생활코딩 특성상 정확한 개념보다는 이게 어떻게 활용되는지에 더 중점을 두어서(뒤에 있는 강좌에서 설명해주실수도 있지만), 직접 찾아보기로 했다. @는 무슨뜻인지.
mediaquery의 줄임말로 media만 쓰는 것인지.

A.
미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다. 표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다. #

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mystyle.css" />

찾아보니# 위처럼 link태그 안에 속성으로 쓰는 방법과

<style>
@media screen and (max-width: 768px) { body { background-color: lightgreen; } }
</style>

이렇게 스타일 시트 안에서 선택자로 쓰는 방법이 있더라. 즉, @는 . 과 # 처럼 이름없는 명찰 같은 역할은 아니지만 스타일 시트내에서 미디어쿼리를 나타내는 기호 같다.
한편, 스크린의 가로 사이즈가 800px이하일 때

screen width < 800px
= max-width: 800px

와 같은 식으로 설명해주셨는데, 이 개념이 머릿속에서 정리가 잘 안되다가 한국어로 외우기 쉽게 의역한, 좋아요 많이 받은 댓글을 발견했다. 이렇게 외우는 편이 나을듯.

min ~부터는
max ~까지는

# 출처:: 쉬고 싶은 개발자