- 각 이미지는 width : 100% 로 지정 되어있습니다.
- 하지만 max-width 의 영향을 받아서 너비가 제한되었습니다.
- 반대 성격의 min-width 도 있습니다.
- 마지막 이미지는 기본상태 입니다.
- 설정을 해제할때는 max-width : none 을 사용합니다.
max-width
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
max-width 는 너비의 최대값을 제한합니다.
너비가 지정된 수치 이상으로 커질 수 없습니다.
예제 1
max-width 개요
보기
이미지는 가로 100% 로 지정되어 있습니다.
max-width : 200px
max-width : 300px
max-width : 400px
지정하지 않음
max-width : 200px
max-width : 300px
max-width : 400px
지정하지 않음소스
<style type="text/css">
.css_test {
border-radius : 5px;
border : 5px solid gray;
box-shadow : 0 0 5px silver;
margin : 0 auto;
padding : 5px;
}
.css_test img {
width : 100%;
margin-top : 10px;
}
</style>
이미지는 가로 100% 로 지정되어 있습니다.
<div class="css_test">
<img src="http://cfile1.uf.tistory.com/image/265BB53654DABF75175E9C" style="max-width:200px;" /><br>
max-width : 200px<br>
<img src="http://cfile1.uf.tistory.com/image/265BB53654DABF75175E9C" style="max-width:300px;" /><br>
max-width : 300px<br>
<img src="http://cfile1.uf.tistory.com/image/265BB53654DABF75175E9C" style="max-width:400px;" /><br>
max-width : 400px<br>
<img src="http://cfile1.uf.tistory.com/image/265BB53654DABF75175E9C" />
지정하지 않음<br>
</div>
.css_test {
border-radius : 5px;
border : 5px solid gray;
box-shadow : 0 0 5px silver;
margin : 0 auto;
padding : 5px;
}
.css_test img {
width : 100%;
margin-top : 10px;
}
</style>
이미지는 가로 100% 로 지정되어 있습니다.
<div class="css_test">
<img src="http://cfile1.uf.tistory.com/image/265BB53654DABF75175E9C" style="max-width:200px;" /><br>
max-width : 200px<br>
<img src="http://cfile1.uf.tistory.com/image/265BB53654DABF75175E9C" style="max-width:300px;" /><br>
max-width : 300px<br>
<img src="http://cfile1.uf.tistory.com/image/265BB53654DABF75175E9C" style="max-width:400px;" /><br>
max-width : 400px<br>
<img src="http://cfile1.uf.tistory.com/image/265BB53654DABF75175E9C" />
지정하지 않음<br>
</div>
설명
예제 2
실습 - 직접 해 봅시다
보기
max-width 가 각각 다르게 설정된 이미지
max-width : 200px
max-width : 300px
max-width : 400px
지정하지 않은 이미지
설명
- 각 이미지는 가로 100% 로 지정 되어있습니다.
- 슬라이더를 움직이면 이미지를 싸고 있는 div 의 너비를 조절할 수 있습니다.
- 이미지 max-width 는 순서대로 200px, 300px, 400px 으로 지정되어있습니다.
- 이미지가 max-width 수치이상 커지지 않는것을 확인할 수 있습니다.
- 슬라이더를 움직이면 이미지를 싸고 있는 div 의 너비를 조절할 수 있습니다.
- 이미지 max-width 는 순서대로 200px, 300px, 400px 으로 지정되어있습니다.
- 이미지가 max-width 수치이상 커지지 않는것을 확인할 수 있습니다.
+ 관련 CSS +