개발야옹

[ Web - CSS media queries ] 반응형 웹 본문

WEB/CSS

[ Web - CSS media queries ] 반응형 웹

kitez 2021. 11. 17. 13:11

CSS media queries

media queries 는 단말기의 유형과 어떡 특성이나 수치 ( 화면 해상도, view port, 너비 등 ) 에 따라 웹 사이트나 앱의 스타일을 수정할 때 사용.

media queries는 CSS3에 포함되어 있으며, media type ( screen, tv, print ... ) 와 하나 이상의 expression으로 구성된다

 

ex) 

아래 예시의 경우 width (너비) 가 500px 이하 일 때의 배경색상을 white로 적용한다는 의미이다. 

@media ( max-width : 500px ) {
	background : white;
}

 

 

 

 

출처 :https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

 

728x90

'WEB > CSS' 카테고리의 다른 글

[SCSS] SCSS 문법 정리  (0) 2024.06.27
[ Web : CSS ] positon  (0) 2022.07.27
[ Web : CSS ] flexbox  (0) 2021.11.29
[ Web - SCSS ] & Ampersand  (0) 2021.11.16