[Markdown] 이미지 크기 조절, 정렬

gozero·2021년 8월 17일
17
![](https://images.velog.io/images/baekmoon1230/post/e4a447f1-0a3a-4344-9dc2-
02aa82b70a96/P20210607_231651348_AE14BA4E-57AE-4A83-9D57-B56C48FD1E53.JPG)

마크다운에서 일반적인 이미지를 첨부하는 간단한 방식은 위 코드와 같다.
하지만 이 방식을 사용할 경우 이미지 크기 조절과 정렬에 어려움이 있으니 다른 방식으로 접근하여 이미지를 첨부하여야 한다.


이미지 크기 조절하기

<img src="https://images.velog.io/images/baekmoon1230/post/e4a447f1-0a3a-4344-
9dc2-02aa82b70a96/P20210607_231651348_AE14BA4E-57AE-4A83-9D57-
B56C48FD1E53.JPG" height="100px" width="300px">

기존 코드 앞단을 img 태그로 수정하고, 뒷단에 height, width를 작성하여 이미지 크기를 조정한다.


이미지 정렬하기

가운데 정렬

<p align="center"><img src="https://images.velog.io/images/baekmoon1230/post/e4a447f1-0a3a-4344-
9dc2-02aa82b70a96/P20210607_231651348_AE14BA4E-57AE-4A83-9D57-
B56C48FD1E53.JPG" height="100px" width="300px"></p>

기존 코드 앞단을 img 태그로 수정하고, 이미지 태그를 p 태그로 감쌉니다.

오른쪽, 왼쪽 정렬

<img src="https://images.velog.io/images/baekmoon1230/post/e4a447f1-0a3a-
4344-9dc2-02aa82b70a96/P20210607_231651348_AE14BA4E-57AE-4A83-9D57-
B56C48FD1E53.JPG" align="right">

정렬의 기본값은 왼쪽이며 기존 코드 앞단을 img 태그로 수정하고, 뒷단에 align="right 또는 left"를 작성하여 이미지를 정렬합니다.




profile
Flutter를 제일 좋아하는 앱 프론트엔드 개발자입니다!

4개의 댓글

comment-user-thumbnail
2022년 5월 1일

감사합니다!! 도움 많이 받았어요 ㅎㅎ

답글 달기
comment-user-thumbnail
2022년 7월 27일

덕분에 사이즈 조절하면서 벨로그합니다! 감사합니다!

1개의 답글