Typora로 포스팅 할 때 이미지 사이즈(Image Resize) 및 정렬(Image Align)을 설정하는 방법

지난번 포스팅에서 Typora를 이용해서 소스코드와 이미지를 포스팅 하는 방법을 소개했다.

Typora 마크다운 편집기를 이용해서 소스코드(Code)와 이미지(Image)를 포스팅에 삽입해보자

지난번에 소개한 방법으로는 <img>태그를 통해 이미지의 사이즈를 설정해서 포스팅할 수 있었다.

그런데 추가로 문제가 있었으니 웹브라우저의 너비에 무관하게 이미지 사이즈가 항상 고정되어 창이 좁아질 경우 이미지가 경계를 넘어 일부만 표시되는 문제가 있었다.

해결 방법은 <img>태그 내부에 style 속성을 통해 이미지가 너비에 따라 자동 조정되도록 수정하면 된다.

img 태그를 이용해서 이미지 크기를 조정하는 방법

아래 코드를 보면 이미지가 화면의 높이와 너비에 90%를 넘지 못하도록 설정하였다.

 <img style="max-height:90%; max-width:90%;" src="https://t1.daumcdn.net/cfile/tistory/99BF19485C514D480F">

상기 html코드에 의해 출력되는 이미지는 다음과 같다.

이미지의 크기가 브라우저의 크기에 따라 자동 조정되는 것을 확인할 수 있다.

div 태그를 이용해서 이미지를 중앙에 배치하는 방법

이미지를 페이지의 중앙에 배치하기 위해서는 위에서 설명한 <img>태그를 <div>태그로 감싸고 <div>태그에 style속성을 주어야 한다.

코드는 아래와 같다.

 <div style="text-align: center;">
     <img style="max-height:90%; max-width:90%;"
          src="https://t1.daumcdn.net/cfile/tistory/99BF19485C514D480F">
 </div>

상기 html코드에 의해 출력되는 이미지는 다음과 같다.

​

​

마치며

이번 포스팅에서는 Typora를 이용해 포스팅할 글에 이미지를 넣을 때 웹브라우저의 너비에 따라 크기가 자동 조절되도록 하는 방법과 이미지를 페이지 중앙으로 배치하는 방법에 대해서 알아보았다.

추가글 - 2019/01/31

상기 포스팅에서 설명한 소스코드 조차 직접 입력하기가 아주 귀찮을 수 있다. 본인이 그랬다. 그래서 삽입할 이미지의 URL만 입력하면 HTML 코드를 자동으로 생성해주는 코드 생성기를 만들어 봤다. 필요하신 분들은 아래의 포스팅을 참고하시길 바란다.

2019/01/31 - [Development/ETC] - 이미지 삽입 코드 생성기(Insert Image Tag Generator)

2019/01/31 - [Development/ETC] - 이미지 삽입 코드 생성기 소스 코드 공개

---

본 포스팅이 도움이 되셨다면 하단의 공감 버튼을 클릭해 주세요

---