서론

Markdown에서 이미지 태그를 표현하기 위한 표기법을 사용할 때 가장 큰 단점은 아미지 사이즐르 지정할 수 없다는 것이다. 이 포스트에서는 Markdown 문서를 HTML로 변경할 때 Markdown에 포함된 이미지를 HTML로 변환할 때 이미지 사이즈를 지정할 수 있는 방법을 소개한다.

mark2html@0.0.4

mark2html을 0.0.4버전으로 업그레이드 했다. 이번 업데이트에는 Makrdown에서 HTML으로 변환할 때 이미지의 크기 등 style을 적용할 수 있는 기능이 추가 되었다.

mark2html은 현재 개발되고 있는 사이드 프로젝트이다. Markdown을 사용하여 Tistory 블로그에 포스팅을 하기 위해서 시작된 이 프로젝트는 틈틈히 업데이트를 하고 있다. 이전 블로그들은 모두 스타일이 적용된 HTML으로 되어 있기 때문에 Markdown의 속성을 사용할 수도 없고, 다른 곳에 이전할 때도 기존의 HTML으로 작성된 포스팅과 Markdown을 사용하여 포스팅하는 글의 이질감을 느껴야한다. 그래서 시간이 날 때마다 Markdown으로 작성하지 않은 포스팅을 Markdown으로 변환해서 저장하는 작업을 하고 있다.

기존 HTML 문서를 Markdown으로 변환할때 문제점

Markdown을 사용해서 HTML 문서를 만들어내지 않은 기존의 HTML 문서를 가지고 Markdown으로 변환하는데는 몇가지 문제점이 있다.

  1. 기존의 HTML에서 Markdown이 변환할 때의 약속된 HTML태그를 찾기 어렵다. : 예를 들어, ### 제목 이라고 Markdown으로 작성을 하면 이 문자열은 <h3>제목</h3>로 변환이 된다. 하지만 기존 WYSIWYG을 사용해서 제목을 지정하거나 글자 크기를 변경했다면 <p style="font-size:24pt;">제목</p>와 같은 형태로 저장이 되어 있기 때문에 Markdown과 HTML 간의 변환을 위한 약속된 태그를 사용해서 변경할 없다. 그래서 사람이 copy & paste 를 할 수 밖에 없다. ~만약 기존의 문서를 Markdown으로 변환해서 사용하려면 빨리 마이그레이션하길 권한다. 포스팅이 꽤 많아져서 Markdown으로 변환하는데 시간이 많이 걸릴거라 생각된다.~
  2. Markdown은 이미지 사이즈를 정할 수 없다 : Markdown은 이미지의 src,alt,title 속성만 지정할 수 있기 때문에 기존에 포스팅에 이미지가 특별한 사이즈로 지정했을때 이것을 Markdown으로 변경하면 이미지 사이즈를 특별하게 지정할 수 없게 된다. 반대로 Markdonw에서 이미지를 나타낼때 특정 사이즈로 변경하고 싶을 경우 css로 global하게 지정할 수 밖에 없다.

IMG style 지정 필요

Markdown을 사용해서 이미지를 표현하려고 하는데 Markdown이 이미지 사이즈를 지정할 수 없기 때문에 큰 이미지를 그대로 HTML에 나타나서 어려움이 발생했다. Retina MacBook Pro를 사용하고 있는데 레티나에서 스크린 캡쳐를 하게되면 보통 이미지보다 2배가 커진다. 레티나 아이폰도 마찬가지 이다. 320px로 표현하면 충분한데 캡쳐 받은 이미지가 640px이기 때문에 컨텐츠에 엄청 크게 이미지가 나타나버린다. 그래서 Markdown에서 이미지를 표현할 때 Markdown 문법에 틀리지 않으면서 style을 추가하면 좋겠다는 생각이 들었다.

IMG 속성

HTML의 IMG 태그의 속성은 src, alt, title을 가지고 있다. - src : 이미지의 URI 소스 값이다. - alt : 이미지가 나타나지 않는 경우 이미지를 설명하는 텍스트이다. 이미지가 나타나지 않을 때 alt가 나타난다. 이 값은 이미지가 나타나는 경우에 화면에 나타나지 않는다. - title : 이미지에 마우스를 올리면 나타나는 이미지의 타이틀 값이다.

Markdown에서 위의 이미지 속성을 표현하기 위해서는 다음과 같은 문법을 따른다.

![아이폰화면 이미지](http://cfile23.uf.tistory.com/image/222B154153A3916F292543 "아이폰화면")

이 문법은 HTML 코드로 변환되면 다음과 같이 변환이 된다.

<img src="http://cfile23.uf.tistory.com/image/222B154153A3916F292543" alt="아이폰화면 이미지" title="아이폰화면">

아이폰화면 이미지

img 속성중에 alt 값은 이미지가 나타나는한 화면에 나타나지 않고 이미지를 설명하는 값이다. 그래서 Markdown을 작성할 때 alt 값에 style 값을 넣어서 사용하기로 했다.

ALT 값에 style 속성 추가하기

위에 나타나는 이미지는 아이폰5에서 캡쳐한 사진의 실제 크기이다. 그럼 img의 alt값을 넣고 표현해보자. 다음과 같이 Markdown의 이미지의 alt를 표현하는 공간에 {}를 사용해서 style 값을 지정했다.

![아이폰화면 이미지 {max-width:320px;}](http://cfile23.uf.tistory.com/image/222B154153A3916F292543 "아이폰화면")

mark2html@0.0.4 버전에서는 -imageStyle 옵션값이 추가되었다. 명령어 옵션은 -style이다. 다음과 같이 옵션 값에 imageStyle을 추가하거나 command 라인에 -style옵션을 추가하면 ALT에 포함된 스타일 값을 가지고 렌더링을 한다.

var options = {
    imageStyle:true
}

그러면 다음과 같이 HTML 코드로 변환이 된다.

<img src="http://cfile23.uf.tistory.com/image/222B154153A3916F292543" style="width:320px;" alt="아이폰화면 이미지" title="아이폰화면"/>

아이폰화면 이미지 {max-width:320px;}

결론

IMG에서 'alt' 속성은 화면에 이미지가 나타나지 않을 경우 이미지를 설명하는 속성이다. 이 이미지의 속성에 이미지의 style에 관한 설명을 추가하는 것은 의미적으로도 이미지를 더욱 잘 설명하는 것이라 생각했다. 그리고 Markdown에는 이미지에 대한 설명이 있고 HTML으로 변환이 되었을때 이미지에 스타일이 적용되면서 alt는 속성을 제외한 문자열만 나타나도록 했다. Markdown을 HTML으로 변환하는데 크게 불편함은 없지만 현재 Retina Display를 사용하는 경우 이미지의 크기 때문에 문제가 발생해서 mark2html@0.0.4 버전에서는 -imageStyle 옵션을 추가하게 되었다.

연구원 소개