HTML

화면 크기에 따른 블로그 이미지 비율 조정

본 블로그는 PC에서 접속하는 환경을 대상으로 작성되었다. 최근 스마트폰을 통해 블로그를 확인해보니, 이미지들의 비율이 블로그 작성시에 고려한 형태와 다른 것을 깨달았다. 웹페이지가 PC에서는 가로가 긴 화면을 통해 보이고, 스마트폰에서는 세로가 긴 화면을 통해 보이는 것이 위 문제의 원인이다. 다양한 디바이스의 화면 크기를 고려해서 웹페이지를 구성하는 것을 [반응형 웹 디자인]이라 한다. 필자는 반응형 웹 디자인까지는 아니더라도, 최소한 블로그에 들어가는 이미지가 화면 크기에 대해 비율적으로 삽입되게 하고자 했다. 확인 과정에서, 다음과 같은 이유로 테마의 short code를 일부 추가했다. [Hugo]에서는 기본적으로 md 서식을 통한 블로그 작성이 가능하다. [md 기반 이미지 사이즈 조절]이 가능했던 것으로 보이나, 필자의 블로그에는 적용되지 않았다. md 기반으로 이미지를 삽입하면, 이미지 크기가 최대로(화면 가로 크기 기준) 설정된다. [Hugo Refresh 테마]에서는 HTML 서식 기반의 블로그 작성을(short code) 제공한다. Hugo Refresh 테마의 figure 태그는 고정 크기로 이미지를 삽입하도록 한다. Hugo는 Static Site Generator로, 화면 크기를 동적으로 얻는 것은 불가하다. Hugo Refresh 테마의 short code (themes/hugo-refresh/layouts/shortcodes 폴더 내부 파일 참조) 중 figure.html은 다음과 같이 작성되어 있다. {{- $original := (.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "src")) -}} {{- $width := printf "%s" (.Get "width" ) -}} {{- $height := printf "%s" (.Get "height") -}} {{- $size := printf "%sx%s" $width $height -}} ... {{- with $original -}} {{- $image := .Resize $size -}} ... {{- end -}} 이 중, figure 태그의 width 또는 height에 “…%“를 할당하지 못하도록 하는 코드는 ‘$image := .Resize $size’이다. 따라서, figure.html을 복사한 figure_per.html 파일을 만들고, 다음과 같이 수정했다. {{- $original := (.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "src")) -}} {{- $width := printf "%s" (.Get "width" ) -}} {{- $height := printf "%s" (.Get "height") -}} {{- $caption := printf "%s" (.Get "caption") -}} {{- $alt := printf "%s" (.Get "alt") -}} {{- with $original -}} {{- $image := . -}} <div class="columns is-centered container"> <div class="column is-full"> <figure> {{- if $caption -}} <img class="rounded-corners" src="{{- $image.RelPermalink -}}" width="{{- $width -}}" height="{{- $height -}}" alt="{{- $alt -}}" > {{- else -}} <img class="rounded-corners" src="{{- $image.RelPermalink -}}" width="{{- $width -}}" height="{{- $height -}}" > {{- end -}} {{- if $caption -}} <figcaption>{{- $caption -}}</figcaption> {{- end -}} </figure> </div> </div> {{- end -}}