[실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷

아주 간단하게 이미지 반응형으로 넣기

 

매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말씀 분량이 많은 경우 팝업 이미지 사이즈도 좀 커지게 되는데요, 이렇게 좀 사이즈가 큰 이미지의 경우 휴대폰에서 볼 때는 모바일 반응형으로 사이즈가 알아서 줄어들어 주면 좋겠죠? 실무에서 자주 사용하는 간단한 팁을 공유해드려봅니다.

 

일단 신년인사용 팝업을 디자인해서 메인 페이지에 게재를 했습니다.

신년인사 팝업을 메인 페이지에 띄운 모습

 

팝업 게재 부분은 <div>로 분리되어 구성되어 있구요, 해당 부분의 코드는 다음과 같습니다.

 

 

 

기본적인 이미지 삽입 방법

 

id나 label 부분에는 popup_20180922_cs라고 되어 있는 걸 보니, 2018년도에 코드를 작성한 이후 필요할 때마다 이미지만 바꿔서 게재하고 있는 형태로 보여집니다.

 

뭐 쿠키라든지, Javascript로 제어하기 위해 부여한 id일테니, 그냥 계속 사용해도 무방합니다. 저 id를 수정하는 경우에는 자바스크립트 코드나 CSS까지 찾아가서 호출하는 부분을 수정해줘야 할테니까요.

<!-- 2023 신년인사 팝업 -->
<div class="layer_popup" id="popup_20180922" style="z-index: 1031; left:10%; top:0px; display:none;">
	<div>
		<img src="/public/img/front/popup/popup_HappyNewYear2023.jpg" alt="" >
		<p class="layer_bottom">
			<span><input type="checkbox" id="popup_20180922_cs" onclick="closeLayerPopupAndSetCookie('popup_20180922'); return false;">
			<label for="popup_20180922_cs">&nbsp; 오늘 하루 열지 않습니다.</label></span>
			<span class="close"><a href="javascript:;" onclick="closeLayerPopup('popup_20180922'); return false;">[닫기]</a></span>
		</p>
	</div>
</div>

 

가장 일반적인 형태로 <img> 태그를 사용해서 이미지를 삽입했습니다. 팝업은 잘 올라갔습니다.

 

그런데 문제가 한 가지 발생합니다.

모바일 사이즈로 브라우저를 줄여보니, 이미지 크기가 줄어들지 않습니다.

브라우저 폭이 작아져도, 이미지가 작아지지 않는 현상

 

팝업 뒤쪽의 본문 컨텐츠는 반응형 동작을 하는데 반해, 팝업 이미지 사이즈는 계속 그대로입니다.

이 부분을 간단하게 반응형으로 수정해보는 게 오늘 팁의 목표입니다.

 

 

반응형 이미지로 동작하게 만들기

 

img 태그의 style 부분에 다음과 같은 코드를 추가로 넣어줬습니다.

style="max-width: 100%; height: auto;"

 

최대 가로폭은 100%이고, 높이는 auto(자동). 이게 핵심인데요, 생각해보자면 브라우저 가로폭이 어떻게 줄어들더라도 이미지의 가로폭은 최대가 100%(가로폭에 꽉차는)인데, 높이는 알아서 조절(auto)하라는 의미니까 뭔가 반응형으로 동작할 것 같은 이미지가 머릿속에 그려지는 것 같죠?^^

 

 

팝업 Division의 코드를 다음과 같은 형태로 변경해주었습니다.

<!-- 2023 신년인사 팝업 -->
<div class="layer_popup" id="popup_20180922" style="z-index: 1031; left:10%; top:0px; display:none;">
	<div>
		<img src="/public/img/front/popup/popup_HappyNewYear2023.jpg" style="max-width: 100%; height: auto;" alt="" >
		<p class="layer_bottom">
			<span><input type="checkbox" id="popup_20180922_cs" onclick="closeLayerPopupAndSetCookie('popup_20180922'); return false;">
			<label for="popup_20180922_cs">&nbsp; 오늘 하루 열지 않습니다.</label></span>
			<span class="close"><a href="javascript:;" onclick="closeLayerPopup('popup_20180922'); return false;">[닫기]</a></span>
		</p>
	</div>
</div>

 

브라우저 가로폭을 다양하게 줄여서 테스트를 해보면, 이미지 가로는 항상 꽉 차면서 세로 높이는 자동으로 조절이 되는 형태를 확인할 수 있게 됩니다. 

HTML 문서에 삽입된 이미지가 반응형으로 잘 동작합니다.

 

 

마치며

 

알고 보면 이 것도 참 간단하죠?

초 간단, 반응형으로 이미지 삽입하는 방법은 바로, max-width: 100%, height: auto 만 기억하면 됩니다. 그냥 외우지 마시고 max-width와 height 두 개의 속성이 동작하는 형태를 이해해두면 외울 필요가 없어집니다.^^

 

참 쉽죠?

 

즐거운 코딩 생활, 즐코딩.

KINcoding