이미지, 동영상, 지도를 반응형으로 삽입하는 5가지 방법

 

이미지, video나 iframe 형식의 동영상, 지도를 반응형으로 삽입하는 5가지 방법을 공유합니다.

 

반응형 웹사이트를 위해 이미지나 동영상 등의 미디어를 삽입할 때, 너비나 높이가 마음처럼 조절되지 않을 수 있습니다.

 

또한 정렬이 잘못되면 다른 요소에 겹치는 등 엉망이 되기 쉽상이죠. 구글 지도 또한 iframe이라서 뜻대로 안될 수 있습니다.

 

이럴 때 너비와 높이, 비율 등을 기준으로 깔끔하게 삽입할 수 있는 방법들이 있어 공유해보겠습니다.

 

가장 쉬운 방법부터 조금은 까다로운 방법까지, 필요한 상황에 따라 사용해보시기 바랍니다.

 

 

 

 

반응형 이미지

 

먼저 이미지부터 시작해보겠습니다.

 

1. 너비 100%

 

이미지를 반응형으로 만드는 가장 간단한 방법은 이미지의 너비를 100%로 하는 것 입니다. 그냥 width나 max-width나 똑같습니다.

 

 

HTML

 

<div class="div1">
    <img src="./img.jpg" alt="">
</div>

 

CSS

.div1 img{max-width: 100%;}

 

 

2. 배경으로 넣고 패딩탑 조절

 

두번째 방법은 빈 div 박스에 이미지를 배경으로 넣고, 패딩탑으로 이미지 비율에 맞게 높이를 맞추는 방법입니다.

 

 

HTML

 

<div class="div2"></div>

 

CSS

 

.div2{padding-top: 60.5%; background: url(./img.jpg) no-repeat; background-size: cover;}

 

이미지의 비율에 따라 패딩탑 수치가 결정되므로, 개발자 도구에서 요소의 크기를 봐가면서 조절하시면 됩니다.

 

이미지가 배경으로 들어가있어서 패딩탑 수치가 너무 높으면 아래와 같이 이미지가 짤리게 됩니다.

 

 

 

3. 포지션과 패딩탑

 

세번째 방법은 이미지를 div의 자식으로 포지션 absolute한 다음 너비를 100%로 하는 것 입니다.

 

부모인 div에 패딩탑을 주는 이유는, height 0으로 높이를 초기화하고 이미지의 비율에 맞게 높이를 잡아주기 위해서입니다. 

 

패딩탑과 높이 초기화를 하지 않고 그냥 relative-absoulte만 하면 요소의 높이가 잡히지 않아 다른 요소들과 겹칠 수 있습니다.

 

 

HTML

 

<div class="div3">
    <img src="./img.jpg" alt="">
</div>

 

CSS

 

.div3{position:relative; padding-top: 60.5%; height: 0}
.div3 img{position:absolute; left:0; top:0; width: 100%;}

 

이번에도 부모 요소에 패딩탑을 사용했지만, 이전과는 달리 배경이 아니기 때문에 실제 영역을 차지하게 됩니다.

 

무슨 말이냐하면 ~ 아래와 같이 패딩탑 수치가 이미지 비율보다 높게 되면 불필요한 여백이 생길 수 있으니 잘 맞춰야 한다는 것 입니다.

 

 

 

반응형 비디오&지도

 

1. video로 삽입

 

반응형으로 비디오 동영상을 삽입하는 방법은 이미지와 동일합니다. 비디오는 기본적으로 controls를 입력해야 재생 버튼이 나옵니다.

 

 

HTML

 

<div class="div4">
   <video src="./video.mp4" controls></video>   
</div>

 

CSS

 

.div4 video{max-width: 100%;}

 

 

2. iframe으로 삽입

 

이번에는 유튜브 동영상이나 구글 지도 같이 iframe으로 된 것들을 삽입하는 방법입니다.

 

먼저, 유튜브나 구글 지도에서 링크 퍼가기를 통해 iframe코드를 복사해서 HTML 문서에 붙여 넣습니다.

 

 

HTML

 

<div class="div5">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/pt3gaMzvwhU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

 

CSS

 

.div5{position:relative; padding-top: 56.25%; height: 0;}
iframe{position:absolute; left:0; top:0; width: 100%; height: 100%;}

 

 

이번에는 조금 어려울 수 있지만, 차근차근 설명해보면 다음과 같습니다.

 

1. 유튜브 동영상 같은 iframe은 백그라운드로 넣을 수 없어서, 포지션으로 해야합니다.

2. 이 동영상은 560x315크기라서 높이 나누기 너비 하면 0.56이 나옵니다. (16:9비율 동영상)

 

3. 나눈 값에 100을 곱하면 높이에 비해 너비가 56.25%라는 계산이 나옵니다. 

4. 이 값을 부모에 패딩탑으로 넣어서 동영상의 높이를 디바이스 너비에 따라 맞추도록 한 것 입니다.

 

 

여기까지 이미지, 동영상, 지도를 반응형으로 삽입하는 5가지 방법을 정리해보았습니다. 읽어주셔서 감사합니다.