CSS 미디어 쿼리(media query) - 반응형 코딩

미디어 쿼리 사용하기

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries

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

/*브라우저의 뷰포트 너비가 1300px 이상인 경우*/

@media screen and (max-width:1299px) {
	/*브라우저의 뷰포트 너비가 1299px 이하인 경우*/
}

@media screen and (max-width:767px) {
	/*브라우저의 뷰포트 너비가 767px 이하인 경우*/
}

 

미디어 쿼리사용시 HTML에 필수로 선언되어야하는 Viewport meta

<meta name="viewport" content="width=device-width, initial-scale=1">

 

가로 특정 사이즈 제외 auto

width:calc(100% - 148px);

 

CSS 라이브러리 - Bootstrap

https://getbootstrap.kr/

Bootstrap