반응형 웹, min-width vs max-width 정리해보며...

반응형 웹, 혹은 웹앱을 만드는 요소에서 가장 중요한 CSS 미디어 쿼리가 있고 속성중에 min-width, max-width를 이용해서 모바일 부터 pc에 조건에 맞춰 UI를 처리할수 있습니다. 

 

min-width - 즉 1000px 이상인 경우에 적용되는 코드 

@media (min-width: 1000px) {
	body {
		background: gold;
	}
}

max-width - 즉 1000px 이하인 경우에 적용되는 코드

@media (max-width: 1000px) {
	body {
		background: gold;
	}
}

min-width를 사용하는 경우

스마트폰등 모바일 사이즈에서의 레이아웃을 기본으로 점차 pc사이즈로 확장되어가는 형태에 적합

 

max-width를 사용하는경우 

pc에서 모바일로 축소해가면서 레이아웃을 구축하는 형태

 

https://studiomeal.com/archives/1004

이번에 min-width 와 max-width에 대해서 정리하면서 상황상황마다 정확한 의도로 전략적으로 사용하는것을 배웠습니다. 

 

 

 

 

참고자료

https://studiomeal.com/archives/1004