Image Settings

Hugo - 이미지 위치 설정

Programming, Settings, Hugo

I. Problem

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

  • 아래는 기본적인 img 업로드 방식이다.
![](/img/programming/2020/05/numpy_array_creation/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/programming/2020/05/image_center/your_image.png#center) # floatleft, floatright
  • #center의 예시

Read more…