CSS 반응형 웹사이트를 위한 media queries

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.

developer.mozilla.org

해당 내용에 대한 공식문서

반응형 웹사이트란?

우리가 홈페이지로 만든 레이아웃을 화면사이즈에 따라 변경해주는것이 반응형 웹사이트 디자인입니다.

이와 동시에

여러분들 부트스트랩이나 제이쿼리를 사용하실떄 @media 표시를 보신적 있으실겁니다.

네 바로 media queris 입니다.

형식은

@media screen and (min-width 800px {

.container {

width: 50%;

}

으로 되어있습니다.

이러한 반응형웹사이트 구현을 위해서는

Flex grid, Flex box, %, vw, vh를 알아야 합니다.

개발자 Woo