[CSS] 반응형에서 css width 작성법(max-width)

안녕하세요 반응형웹에 width 작성법 소개드립니다.

 

보통 반응형일때 width값을 %로 지정을 해주는데요.

 

메인 비주얼 값을 적용할때도 이미지가 꽉 들어 차야하므로 width:100%; 를 주게됩니다.

 

그런데 창을 너무 크게 하면 이미지가 계속 커져서 이미지로 가득해지는 화면을 보실수 있으실겁니다.

 

그때 max-width를 같이 넣어주면 됩니다.

 

일반적인 메인 비주얼 구조

 

css

.visual{width:100%;margin:0 auto; max-width:1200px;}
.visual img{width:100%;}

 

html

<div class="visual">
	<img src="image/visual.jpg">
</div>

 

visual 클래스에 max-width:1200px; 을 작성해 주면서 최대 넓이는 1200px로 지정이 됩니다.

1200px 이상으로 커질시에는 width:1200px; 해준값과 동일해집니다.