HTML img src 태그 이미지를 반응형으로 만드는 코드

CSS 스타일에서 미리 반응형으로 만들거나, 자바스크립트를 통해서 반응형으로 만드는 방법은 많습니다만 가장 원초적인 방법인 HTML 태그를 손보는 방법에 대해서는 검색해도 잘 안나오네요. 그래도 찾았습니다. 이렇게 간단한 방법으로 이미지를 반응형으로 만들 수 있다니! 좋습니다.


이미지 태그는 img src 입니다. 이 태그의 마지막에 스타일을 추가해서 반응형으로 만들 수 있습니다. 우선 태그 형태를 살펴보도록 하겠습니다.


<a target="_blank" href="●"><img src="■" style="max-width:100%; height:auto;"></a>


이렇게 됩니다. 그리고 각 태그별 설명은 이렇습니다.


●a → 링크 태그

●target="_blank" → 새 창에서 열리게 해줌

●href → 인터넷 주소 입력

●img src → 이미지 주소

●style="max-width:100%; height:auto;" → 이것이 바로 반응형 역할을 하게 될 태그 입니다. 가로는 100%, 세로는 자동으로 알아서 맞춰지도록 만드는 태그죠.



이 방법을 사용하면 HTML 태그인 img src 를 활용해서 사진 혹은 이미지를 넣어도 프레임에 딱 맞는 사이즈로 입력됩니다. 그리고 해상도에 따라서도 알아서 딱 맞춰서 들어가게 됩니다. 만약 이미지가 작은데, 그것보다 훨씬 더 넓은 프레임 안에 배치가 된다면 당연히 그만큼 넓어지니까 픽셀이 깨질 수 있음을 명심하시기 바랍니다. 끝.




"친절한효자손 취미생활" 을 검색!


기어베스트 앱

이 글을 공유하기

댓글(0)

Designed by JB FACTORY