TIL 09 | Media Query

Saemsol Yoo·2020년 12월 13일
0

html / css

목록 보기
9/12
post-thumbnail

Media Query

Responsive Web 을 위해서 반드시 알아둬야 하는 필수적인 기능이다.


HTML <head> 태그에 meta 태그를 이용해서 유저가 현재 보고있는 디바이스의 width를 맞추는 작업이 필요하다.

<head>
	<meata name="viewport" content="width=device-width">
</head>



CSS에 media query 작성하기

	@media screen and (min-width: 768px) {
    		/* css 스타일 선언 */
        }
	@media screen and (min-width: 576) and (max-width: 767px) {
    		/* css 스타일 선언 */
        }

☁️ screen 자리에는 speech | print | all 이 들어갈 수 있다.
☁️ and 자리에는 not | only | ,(comma) 가 들어갈 수 있다.



디바이스 별 사이즈 (참고)

  • mobile 320px ~ 480px
  • tablet 768px ~ 1024px
  • desktop 1024px ~
profile
Becoming a front-end developer 🌱

1개의 댓글