<div>을 iframe처럼 만들기 > 퍼블리셔팁

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

<div>을 iframe처럼 만들기 정보

<div>을 iframe처럼 만들기

본문

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 내부의 모든 요소를 절대 위치로 배치하고, widthheight 속성을 모두 100%로 설정하여 div 요소와 내부 요소의 크기가 동일하도록 만들어줍니다. iframe 요소는 기본적으로 적용되는 테두리를 제거하기 위해 border: none 속성을 추가해줍니다.

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

추천
9

댓글 4개

전체 1,264
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT