div를 iframe처럼 만들기 > 기타팁(프로그램)

• 목록

• 페이스북 공유
• 트위터 공유

안녕하세요

유토하우스 유토맨입니다

sir 찬사의눈님 글 참고하였습니다

아직 테스트 해보지는 않았지만 다양하게 활용 가능할것 같습니다

Div 요소를 이용하여 iframe과 유사한 동작을 구현할 수 있습니다. 다음은 div 요소를 사용하여 iframe과 같은 동작을 하는 예시 코드입니다.

<!-- HTML 코드 -->

<div class="frame" data-src="https://www.example.com"></div>

<style>

/* CSS 코드 */
.frame {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 비율에 맞게 설정 */
  height: 0;
}

.frame > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.frame > iframe {
  border: none; /* 기본적으로 iframe에 적용되는 테두리 제거 */
}

</style>

<script>

// JavaScript 코드
document.addEventListener("DOMContentLoaded", function () {
  const frames = document.querySelectorAll(".frame");

  frames.forEach((frame) => {
    const src = frame.dataset.src;
    const iframe = document.createElement("iframe");
    iframe.src = src;
    frame.appendChild(iframe);
  });
});

</script>

위 코드에서는 div 요소에 data-src 속성을 추가하여 원하는 URL을 지정합니다. 이후 JavaScript 코드에서는 DOMContentLoaded 이벤트가 발생했을 때 frame 클래스를 가진 모든 div 요소를 선택하고, 각 div 요소에 해당하는 URL을 가져와 iframe 요소를 생성하여 삽입합니다. 이 때, iframe 요소의 속성으로 src를 지정해줍니다.

CSS 코드에서는 padding-bottom 속성을 이용하여 div 요소의 높이를 0으로 설정한 후, 가로 세로 비율을 유지하기 위해 비율에 맞는 padding 값을 지정합니다. 이후 position: absolute 속성을 이용하여 div 내부의 모든 요소를 절대 위치로 배치하고, width와 height 속성을 모두 100%로 설정하여 div 요소와 내부 요소의 크기가 동일하도록 만들어줍니다. iframe 요소는 기본적으로 적용되는 테두리를 제거하기 위해 border: none 속성을 추가해줍니다.

이렇게 구현한 div 요소를 iframe처럼 사용할 수 있습니다.