반응형 iframe 만들기: div로 감싸고 padding-bottom 추가 예시

iframe(예: 지도나 동영상)을 반응형(responsive)으로 만들 때, 고정 height 대신 div로 감싸고 padding-bottom을 사용하면 화면 크기에 따라 자동으로 비율이 유지됩니다. 이는 모바일이나 다양한 기기에서 잘 보이게 해줍니다. 아래에 구체적인 예시 코드를 단계별로 설명하겠습니다. (네이버 지도나 구글 지도 iframe에 적용 가능!)

기본 원리

• div를 컨테이너로 사용해 position: relative로 설정.
• iframe을 absolute로 배치해 div 안에 꽉 채움.
• padding-bottom: (높이 / 너비) * 100%로 비율 계산 (예: 16:9 비율은 56.25%).

구체적인 코드 예시 (네이버 지도 iframe 적용)

1. 기본 iframe 코드 (네이버 지도에서 복사한 예시):

text

<iframe src="https://map.naver.com/v5/?c=14135687.1234567,4519776.1234567,15,0,0,0,dh" width="600" height="450" frameborder="0" allowfullscreen>

</iframe>

2.반응형으로 수정된 코드 (div로 감싸기):

text

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">

  <iframe src="https://map.naver.com/v5/?c=14135687.1234567,4519776.1234567,15,0,0,0,dh" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" frameborder="0" allowfullscreen></iframe>

</div>

설명:

• position: relative;: div를 기준으로 iframe 위치 설정.
• width: 100%;: div가 부모 요소(예: 블로그 포스트)의 전체 너비를 채움.
• height: 0; padding-bottom: 75%;: 높이를 0으로 하고 padding으로 비율 유지 (원본이 600x450이면 450/600=0.75 → 75%. 비율에 따라 조정하세요!).
• iframe의 position: absolute; top:0; left:0; width:100%; height:100%;: div 안에 완벽히 맞춤.

3. 블로그스팟에 삽입하는 방법:

• 블로그스팟 에디터에서 HTML 보기 모드로 전환.
• 위 코드를 원하는 위치에 붙여넣기.
• 미리보기에서 모바일/데스크톱으로 확인 (창 크기 변경 시 지도가 자동 조정됨).

다른 비율 예시 (구글 지도나 유튜브용)

16:9 비율 (예: 동영상):

text

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">

  <iframe src="https://www.google.com/maps/embed?pb=..." style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allowfullscreen></iframe>

</div>

• padding-bottom: 56.25% (9/16=0.5625).

이 방법은 CSS 파일 없이 인라인 스타일로 간단히 적용할 수 있어 블로그스팟에 딱 맞아요. 만약 별도 CSS를 사용한다면 클래스(.responsive-iframe)로 만들어 재사용하세요! 추가 질문 있으신가요? 😊

버튼 텍스트