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

 

 

tistory 글에 외부 URL을 <iframe> 태그로 삽입할 수 있다.

• 서식을 추가해두면 추후 <iframe> 추가 시 편리하다.
• 삽입한 페이지가 블로그 기본 폭보다 넓어서 화면이 잘리는 경우 스케일링을 적용하여 전체 페이지를 보여줄 수 있다.
  • 블로그 폭보다 넓게 iframe 크기를 늘리는 방법도 있다.

 

 

<iframe> 태그 삽입

1. 상단 메뉴에서 기본모드를 HTML로 변경

 

2. 적절한 위치에 <iframe> 태그 추가

<p><iframe src="https://freeislet.tistory.com/pages/test" width="100%" height="800"></iframe></p>

• src 속성에 URL 설정
• width=100%, height 적당히 설정
• 참고: <iframe> 태그만 추가해도 기본모드로 오면 <p> 태그가 자동으로 추가됨

 

아래와 같이 글 안에 외부 URL이 삽입된다.

 

 

HTML 모드 대신 더보기(⋯) > HTML로 <iframe> 태그를 추가할 수도 있다. 하지만, 이렇게 하면 편집 중에 <iframe> 내용이 보이지 않는 단점이 있다. (상관 없다면 이 방법이 더 좋은 듯...)

 

 

iframe 서식 추가

iframe 서식을 추가하면 추후 <iframe> 태그 삽입이 간편해진다.

 

1. 서식 관리 > 서식 쓰기로 iframe 서식 추가

 

2. HTML 모드로 변경, <iframe> 태그 입력 후 저장

 

3. 글 작성 시, 상단 더보기(⋯) > 서식에서 iframe 서식을 불러오면 <iframe> 태그가 삽입된다.

HTML 모드로 변경하여 src 등의 속성을 원하는 대로 수정해서 사용하면 된다.

 

 

 

<iframe> 스케일링

삽입한 페이지의 폭이 블로그 기본 폭보다 넓으면 화면 오른쪽이 잘리게 되는데, 삽입할 페이지를 축소해서 보여줌으로써 이를 방지할 수 있다.

 

아래 페이지는 원래 width가 약 1060px로 현재 블로그의 800px보다 넓어서, <iframe>으로 삽입하면 화면 일부가 잘려서 보인다.

 

 

<iframe>에 스케일을 적용하면, 아래와 같이 잘리는 부분 없이 전체 페이지를 표시할 수 있다.

<div style="height: 603px;">
  <div style="width: 1068px; transform: scale(0.75); transform-origin: 0 0;">
    <iframe src="https://freeislet.github.io/kebidad/sweetviz/SWEETVIZ_REPORT_breast_cancer_VERTICAL.html" width="1064" height="800"></iframe>
  </div>
</div>

HTML 모드에서 위와 같이 태그를 구성하여 iframe 스케일을 적용한다.

• <iframe> width=1064, height=800: 원문을 기준으로 적절히 설정
• 안 쪽 <div>
  • width: <iframe> width 1064px에 iframe 테두리를 고려해서 4px 추가하여 1068px
    (border: none 설정시 1064px 그대로 사용하면 된다.)
  • scale: 블로그 width / <iframe> div width = 800 / 1068 = 약 0.75
• 최상위 <div>
  • height: <iframe> div height에 scale이 적용된 높이를 적용
    (<iframe> height 800px + iframe 테두리 4px) * scale 0.75 = 804px * 0.75 = 603px

 

 

CSS 변수 적용

CSS 변수를 사용하면 width, height, scale 속성 설정값을 일일이 계산해야 하는 번거로움을 피할 수 있다.

CSS 변수를 사용하도록 변경된 html은 아래와 같다.

<div style="--iframe-width: 1068; --iframe-height: 804; --width: 800; --scale: calc(var(--width) / var(--iframe-width)); height: calc(var(--iframe-height) * var(--scale) * 1px);">
  <div style="width: calc(var(--iframe-width) * 1px); height: calc(var(--iframe-height) * 1px); transform: scale(var(--scale)); transform-origin: 0 0;">
    <iframe src="https://freeislet.github.io/kebidad/sweetviz/SWEETVIZ_REPORT_breast_cancer_VERTICAL.html" width="100%" height="100%"></iframe>
  </div>
</div>

• 최상단 div에 각종 크기 설정
  • --iframe-width: 1068 → 삽입할 페이지 width + 테두리 두께(디폴트 4)
  • --iframe-height: 804 → 삽입할 페이지 height + 테두리 두께(디폴트 4)
  • --width: 800 → 블로그 기본 폭
• div에서 w/h를 설정하고, iframe w/h에는 모두 100%를 넣는 구조로 변경됨

 

위의 설정만으로 아래와 같이 스케일이 적용된 iframe이 표시된다.

 

 

iframe 서식 추가

추후 편리하게 사용하기 위해 다음과 같이 서식을 추가할 수 있다.

<div style="--iframe-width: 1004; --iframe-height: 804; --width: 800; --scale: calc(var(--width) / var(--iframe-width)); height: calc(var(--iframe-height) * var(--scale) * 1px);">
  <div style="width: calc(var(--iframe-width) * 1px); height: calc(var(--iframe-height) * 1px); transform: scale(var(--scale)); transform-origin: 0 0;">
    <iframe src="https://freeislet.tistory.com/pages/test" width="100%" height="100%"></iframe>
  </div>
</div>

서식을 불러오면 아래처럼 스케일이 적용된 iframe이 삽입된다.

 

 

 

<iframe> 펼쳐 보기

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

(2023.09.28 - [기타] - tistory에 삽입한 iframe 넓게 펼치기 참고)