Hugo - 이미지 위치 설정

Settings, Hugo
Page content

I. Problem

Hugo에서 이미지를 업로드하면 자동적으로 왼쪽(Left) 정렬이 된다. 기본적으로 마크다운 내에서 html 적용은 되지 않는 문제점이 있다.

  • 아래는 기본적인 img 업로드 방식이다.
![](/img/python/basic_syntax/numpy.png)

  • 위 그림처럼 왼쪽으로 치우친 것을 볼 수 있다. 이럴 경우 어떻게 해결해야 할까? 간단하게 해결 방법을 정리하여 공유한다.

II. CSS 파일 찾기

  • 기본적으로 이미지를 핸들링 하는 것은 CSS 파일에서 해결한다. 문제는 어떤 CSS 파일을 열어야 하는지 처음에는 어려울 것이다.
  • 첫째, 대부분 hugo 개발자들이 테마를 사용하기 때문에 테마에서 css 파일을 찾는다.
    • 강사의 테마는 mainroad이며, 위 기준으로 말씀드리면 파일 경로는 아래와 .
themes/mainroad/assets/css/style.css
  • style.css 파일을 열면, 테마에 적용된 각종 css 태그들을 확인할 수 있다.

III. CSS 파일에 소스 추가

  • 다른 소스 코드는 만지지 않는다.
  • 맨 마지막에서 아래와 같은 소스코드를 입력한다.
img[src$='#center']
{
    display: block;
    margin: 0.7rem auto; /* you can replace the vertical '0.7rem' by
                            whatever floats your boat, but keep the
                            horizontal 'auto' for this to work */
    /* whatever else styles you fancy here */
}

img[src$='#floatleft']
{
    float:left;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}

img[src$='#floatright']
{
    float:right;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}
  • 위 코드에서 각 스타일에 맞게 margin, float 등을 css 코드에 맞게 수정 변환하면 된다.
  • 수정하였다면 이제 저장한뒤, 작성중인 마크다운으로 다시 돌아간다.

IV. Markdown 파일에의 적용.

  • 이제 적용해보자. 적용하는 것은 어렵지 않다. 이미지 경로 마지막에 #center, #floatleft, #floatright 등을 입력하면 된다.
![](/img/your_image_folder/your_image.png#center) # floatleft, floatright
  • #center의 예시

V. 결론

  • 막상 알고보면 매우 쉽지만, 알아가는 과정은 조금 시간이 걸렸다.
  • 참조했던 래퍼런스를 확인하면, 보다 더 많은 옵션을 각 블로그에 추가할 수 있다.

Always. Happy To Code

VI. Reference

Solo. “Centering Images in Hugo.” Centering Images in Hugo, Oct. 2016, www.ebadf.net/2016/10/19/centering-images-in-hugo/. luckrill. “How to set image center?” in Hugo, Aug. 2019, https://discourse.gohugo.io/t/how-to-set-image-center/20103