[워드프레스 Tis] 구글맵 삽입 시 위치 정렬 방법

막상 알고보면 별것 없는 것처럼 느껴지는 것이 세상사이기는 하죠.

요 요즘 사이 포스팅을 작성하는데 구글맵 이 자꾸 왼쪽으로 나타나 굉장히 거슬렸습니다. 나중에 최종 세팅하면 그때 구글맵 정렬도 제대로 세팅하자고 마음먹기는 했는데 계속 스트레스스 주어서 오늘 방안을 찾아보고야 말았습니다.

알고 보니 정말 간단한 것이드라구요.

아시다시피 구텐베르그에서 구글맵 삽입은 사용자정의 HTML로 삽입됩니다. 그 HTML 코드를 살펴보면 <iframe>을 사용하는 것을 알게 됩니다. 그러면 <iframe> 정렬 방법을 사용하면 되겠죠.

Table of contents 목차 보이기

기본으로 왼쪽 정렬되는 구글맵

구텐베르그에서는 기본으로 왼쪽 정렬을 합니다. 그렇기에 아무런 조처없이 구글맵을 삽입하면 왼쪽으로 정렬되어 테마 세팅에 따라 달라지겠지만 아래 이미지처럼 끔찍한 상황에 처하게 됩니다.

iframe 정렬 방법

위에서 설명했듯이 구글맵 삽입은 <iframe>을 사용하기 때문에 <iframe> 정렬 방법을 적용하면 됩니다.

기본 <iframe> 정렬 방법은 아래와 같습니다. 가운데로 정렬합니다.

<iframe src="/default.asp" width="200" height="200" align="center">
</iframe>

그렇기 때문에 구글맵 삽입 코드에서는 아래와 같은 코드를 사용하게 됩니다.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31401.036609889143!2d103.83479825279767!3d10.331513952900668!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31081f8407e4abe5%3A0x7aa0f6f030e4218!2z67mI7Y6E66as7KGw7Yq4!5e0!3m2!1sen!2skr!4v1574606135877!5m2!1sen!2skr" width="100%" height="600" align="center" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

아래는 실제로 위 코드를 사용해 구글맵을 워드프레스의 구템베르그 편집기에서 삽입한 모습니다.

새롭게 뉴스레터를 시작했습니다.

1️⃣ 주식 등 투자 정보 : 기업 분석, IB 투자의견 등 투자 관련 내용
..... 테슬라 실적 및 IB들의의 테슬라 투자의견
2️⃣ 사례 및 트렌드 : 사례연구와 트렌드 관련 괜찮은 내용
.....유튜브와 경쟁대신 구독 전환한 비디오 플래폼 비메오 사례

서울에 생긴 Vultr 서버 100$ 프로모션

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션입니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.