티스토리 Iframe 관련 애로사항 해결법

 

굉장히 주관적인 애로사항임…

 

1. 가운데 정렬 안 됨

대부분의 글을 가운데 정렬로 적는데… Iframe만 좌측정렬되는 짜증스러운…

모 님의 티스토리에서는 <p align="center"></p>를 사용하라고 안내되어 있는데…

글에 너튜브 동영상을 넣을 때마다 위 작업을 하는 게 영 번거로워서…

그냥 jQuery하고 CSS를 만져주었다.

<script>
	$('iframe').wrap('<div class="center"></div>')
</script>

.center{
	text-align: center;
}

 

2. 가로세로 크기 지정 번거로움

너튜브 외에 구글 시트나 구글 내지도 같은 것들을 글에 집어넣는 편인데…

이러한 애들은 iframe의 기본 너비/높이가 매우 작아 보기에 대단히 안 좋다.

너튜브 iframe처럼 width값과 height값을 iframe마다 집어넣는 방법으로 해결할 수 있지만…

너튜브를 제외한 iframe에는 너비/높이를 일괄지정할 생각이라, 아래 방법을 썼다.

 

① 글쓰기의 html모드로 들어가서, 원하는 iframe을 <div class="iframeBox"></div>으로 감싸기

<div class="iframeBox"><iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRqHHN7g7FbW1jEJUCQFxoJmhHuQ3paH5GNAbN-Su9QUJKmyW_VDYxzz6aPNYMKORh1vQQsD9-Z8dXN/pubhtml?gid=901360390&amp;single=true&amp;widget=true&amp;headers=false"></iframe></div>

 

② CSS에 아래 내용 추가

.iframeBox{
	position: relative;
	max-width: 750px;
	width: 100% !important;
}
.iframeBox:before {
    content: "";
    display: block;
    padding-top: 75%; /*가로세로 비율 */
} 
.iframeBox iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

 

내가 만들어 놓고 내가 까먹는 걸 대비하기 위해 쓴 글