마크다운(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
정렬:   최신순 | 오래된 순
열매맺는나무
방문자

안녕하세요~
CSS에 코드를 넣으라고 하셨는데, CSS어디에 넣어야 하는지, 또 티스토리 블로그라면 어디에서 할 수 있는지 궁금합니다. ‘html /css 편집’에서 하는 건가요?

한량_Halryang
방문자

좋은 포스팅 감사합니다. 이 블로그에서 많이 배워갑니다. 특히나 마크다운으로 글을 쓸 때 이미지 정렬이 마음대로 되지 않아 1단 형식의 블로그를 생각할 때 늘 보기에 안좋았는데, 이 팁으로 매우 흡족한 정렬을 볼 수 있었습니다. 🙂

**무슨 말인지 모르겠다**
방문자
**무슨 말인지 모르겠다**

이번에 처음 마크다운에 대해 알게 되서 , 배우고 있는 중입니다
근데.. IT의 세계가 너무 복잡한듯 ㅠㅠ 무슨 말인지 당췌 하나도 모르는 초보라 슬픕니다

wpDiscuz