- max-width
max-width는 이 안에 지정한 속성들이 max-width 로 지정해놓은 최대 넓이보다 커진다면 적용되는 것이다.
- index.html
<body>
<div class="container">
<div class="box">
<h2>Card Heading or Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda
deserunt vel nostrum tempore exercitationem dicta ipsum pariatur,
cupiditate architecto. Totam nostrum natus in tempora ipsa
perspiciatis, quos eaque quas quo!
</p>
</div>
</div>
</body>- style.css
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: rgb(234, 234, 234);
}
h2{
margin-top: 0;
}
.img{
width: 300px;
height: 300px;
}
.container{
background-color: ivory;
}
@media (max-width:1200px){
.container{
background-color: aquamarine;
}
}위의 코드를 보면, 원래 컨테이너의 색깔은 ivory 이지만, max-width로 지정해놓은 사이즈보다 작아졌을때 아쿠아마린 색깔로 변하는것이다.
즉, 0px ~ 1200px 까지는 아쿠아마린색깔, 그 후 max-width를 넘어간다면 아이보리 색깔로 변하는것이다.
- min-width
min-width 는 브라우저 기준으로, min-width 로 지정해놓은 사이즈보다 커진다면 적용될 사이즈다.
@media (min-width:1200px){
.container{
background-color: aquamarine;
}
}위의 예시와는 반대로, 브라우저 창을 켰을때는 아쿠아마린 색깔이 적용된다.
min-width, 즉 속성이 적용될 최소 넓이 ~~ 전체 브라우저 넓이 라는 뜻이기 때문이다.
하지만 1200px 이하부터는 다시 아이보리색깔이 적용된다 .
- 요약
max-width : 0px ~ max-width로 지정해놓은 위치까지 적용될 속성, 그 후에는 기본 속성값
min-width : 0px ~ min-width 전까지는 기본 속성값, min-width~ 브라우저 창 끝까지는 min-width 로 적용될 속성값
min-width 는, 스마트폰 같은 작은 사이즈의 기기에서의 레이아웃을 기본으로 해놓고, 점점 확장해가는 형태로 CSS 를 구성하고
max-width 는 데스크탑 같은 큰 사이즈의 기기에서 레이아웃을 기본으로 해놓고 점점 작아지는 형태의 CSS 로 구성한다.
https://brgndy.me/ 로 옮기는 중입니다 :)