-
[반응형 웹 스터디] width와 max-width의 차이Web 2015. 9. 30. 11:20반응형
width
100%로 설정할 경우 요소의 크기를 감싸고 있는 요소크기에 맞춰 100%로 유지
max-width
100%로 설정할 경우 요소의 기본 크기 이상으로는 조절되지 않음
예를 들어 <div id="wrap">...</div> 내부에 가로(width) 300px 크기의 이미지 두장을 각각 위치 시키고 html, css 속성을 다음과 같이 줄 경우 ...
<!doctype html>
<html>
<head>
<meta charset="UTF-8"><style>
*{margin:0; padding:0;}#wrap{
width:90%;
margin:0 auto;
border:4px solid #000;
}#wrap div{
width:50%;
display:inline-block;
}#wrap div.w img{width:100%;}
#wrap div.mw img{max-widht:100%;}
</style></head>
<body>
<div id="wrap">
<div class="w"><img src="source/img_01.jpg"></div><div class="mw"><img src="source/img_01.jpg"></div>
</div>
</body></html>
결과는 다음 사진처럼 나온다는 말씀!
브라우저 width값의 90%를 차지하는 div 속에 각각 50% width값을 준 div 속 img요소들이 첫 번째 것은 해당 div크기에 맞춰 100%확장된 상태이고,
두번째 것은 img고유 width값인 300px를 넘지 않고 원래의 100%값을 유지하고 있는 것을 볼 수 있습니다.
[ " Do it! 반응형 웹디자인 - 김운아 - " 학습 내용을 중심으로 정리 ]
반응형'Web' 카테고리의 다른 글
[반응형 웹 스터디] 뷰포트 (0) 2015.10.01 [반응형 웹 스터디] 미디어 쿼리 적용 방식 및 주의 사항 (0) 2015.10.01 [반응형 웹 스터디] 미디어 쿼리 기본 문법 (0) 2015.09.30 [반응형 웹 스터디] 기본 개념 이해 (0) 2015.09.24
