마크다운(Markdown)으로 글을 쓸 때 이미지 정렬하는 방법

1. 마크다운(Markdown)의 이미지 문법

마크다운 문법은 정말 단순하다. 그것이 마크다운의 가장 큰 장점 중 하나지만, 또한 단점이 되기도 한다. 그 중에서 이미지에 관련된 문법은 단순의 극치를 달린다. 마크다운에서 이미지를 삽입하려면 ![대체텍스트](이미지주소 "이미지제목")과 같은 문법을 이용하면 된다. 이 문법을 통해서 이미지에 대한 정보를 추가할 수 있는 것은 “대체텍스트”와 “이미지제목”뿐이다. 즉, 글을 쓰다보면 이미지를 정렬해야 하는 경우가 꽤 있는데, 마크다운 문법만으로는 이미지 정렬을 할 수 없다는 말이다.

그래서 난 이미지를 정렬하려고 할 때는 마크다운 문법 대신에, html 문법을 쓰곤 했었다. 하지만, 워드프레스의 젯팩(Jetpack)에서 지원하는 마크다운 문법이나 현재 내가 쓰고 있는 Mytory Markdown 플러그인에서 쓰는 마크다운 문법이 Markdown Extra에서 비롯된 것임을 알게된 후에 Markdown Extra의 추가 문법1을 통해서 이미지를 정렬하는 방법을 생각해 내게 되었다.2

2. 마크다운(Markdown)으로 이미지 정렬하는 방법

2.1 css에 다음 코드를 추가한다.

img.alignleft{float:left}
img.alignright{float:right}
img.aligncenter{display:block;margin:0 auto}

2.2 이미지를 삽입할 때 어떻게 정렬할 것인지에 따라 다음과 같은 문법으로 써준다.

  • 왼쪽 정렬: ![대체텍스트](이미지주소 "이미지제목") {.alignleft}
  • 오른쪽 정렬: ![대체텍스트](이미지주소 "이미지제목") {.alignright}
  • 가운데 정렬: ![대체텍스트](이미지주소 "이미지제목") {.aligncenter}

3. 예시

  • 왼쪽 정렬
    왼쪽 정렬 예시

 

 

  • 오른쪽 정렬
    오른쪽 정렬 예시

 

 

  • 가운데 정렬
    가운데 정렬 예시

  1. Markdown Extra에는 특정 요소에 클래스나 id를 추가할 수 있는 문법이 있다. 
  2. 사실 Multimarkdown에는 이미지에 속성을 추가하는 문법이 따로 있다. 하지만 대부분의 웹프로그램들이 PHP를 사용하기 때문에, PHP로 구현된 Markdown Extra 문법만을 지원하는 경우가 많다. 워드프레스와 Tumblr도 Markdown Extra만을 지원한다. 반면에 하루패드는 Markdown Extra를 제대로 지원하지 않고, MarkdownPad2는 유료 사용자에게만 Markdown Extra를 쓸 수 있도록 해 놓았다. 

이 글 공유하기:

댓글 남기기

6 댓글 / "마크다운(Markdown)으로 글을 쓸 때 이미지 정렬하는 방법"

댓글 이메일 구독
avatar
정렬:   최신순 | 오래된 순
wpDiscuz