[3] 미디어쿼리

unu·2020년 12월 19일
0

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

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


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



A.
**<span style="font-size:21px">미디어 쿼리</span>**는 화면(screen), 티비(tv), 프린터(print)와 같은 **미디어 타입(media type)**과 적어도 하나 이상의 **표현식(expression)**으로 구성됩니다. 표현식은 **_width, height, color_**와 같은 **미디어 특성(media feature)**들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다. <a href="https://offbyone.tistory.com/121" title="쉬고 싶은 개발자">#</a>
```

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

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

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

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

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

min ~부터는
max ~까지는

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

0개의 댓글