Tech Stock logo Tech Stock

구글맵 주소를 퍼다가 md파일에 그대로 복사 붙혀넣기로 넣고 싶다. 그런데 반응형으로도 하고 싶다. 그럴 경우에 이렇게 하자.

■ Markdown에는 이렇게 입력해주자


{{< googlemap >}}
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7477985333417!2d139.7432442159418!3d35.65858483881974!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1580566749040!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
{{< /googlemap >}}


■ layouts/shortcodes/googlemap.html

Markdown에서는 googlemap.html파일을 읽어들인다

<div class="gmap">
    {{ .Inner }}
</div>


■ style.css

기본으로 쓰고 있는 css에 추가해준다

.gmap {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}

.gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100;
}