tistory에 삽입한 iframe 넓게 펼치기

참고: https://stackoverflow.com/questions/5581034/is-there-a-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css
https://css-tricks.com/full-width-containers-limited-width-parents/

 

 

 

2023.09.25 - [기타] - tistory에 iframe 삽입 (+ iframe 스케일링)

tistory에 iframe 삽입 (+ iframe 스케일링)

 

블로그에 iframe을 추가할 때, 블로그 기본 폭보다 삽입한 페이지가 더 넓으면 화면이 잘리게 되는데, 위 글에서 스케일링을 통해 이를 해결하는 방법을 소개했었다. iframe에 스케일링을 사용한 모습은 아래와 같다.

 

 

그런데, iframe을 블로그 폭에 맞춰 축소하기 보다는, 아래 모습처럼 블로그 폭보다 넓게, 브라우저 폭에 맞춰서 표시하는 것이 더 좋을 수 있다.

 

그럴 때에는, margin-left와 margin-right 속성을 음수로 설정하면 부모 DIV보다 넓게 만들 수 있다.

만약 부모 DIV가 화면 한 가운데에 위치한다면, style="margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);" 로 설정하면 브라우저에 꽉 차게 된다.

margin-left / margin-right 대신 "width: 100vw; left: calc(50% - 50vw);"도 가능하다.

 

 

다음은 iframe이 브라우저 폭의 80% 만큼 차지하도록 설정한 모습이다.

<div style="margin-left: calc(50% - 40vw); margin-right: calc(50% - 40vw); position: relative; z-index: 9999;">
  <iframe src="https://freeislet.github.io/kebidad/sweetviz/SWEETVIZ_REPORT_breast_cancer_VERTICAL.html" width="100%" height="600px"></iframe>
</div>

• margin-left / margin-right: -40vw 씩 설정하여 브라우저 80% 폭 설정
• position: relative, z-index: 9999 → 블로그의 다른 엘리먼트(사이드 바)와 겹칠 때 위에 렌더링되도록 z-index 설정