김코드의 웹디자인 세상

❏Markdown - README.md 속 이미지 크기 변경 및 정렬 방법 본문

⊹⠀ 𝚐𝚒𝚝 , 𝚐𝚒𝚝𝚑𝚞𝚋

❏Markdown - README.md 속 이미지 크기 변경 및 정렬 방법

김_코드 2023. 4. 5. 23:57

 

 

안녕하세요!

오늘은 Markdown작성 중 이미지 크기 변경과 이미지 정렬 방법에 대해서 알아보겠습니다!


 

✎ 이미지크기 변경방법

먼저 이미지 크기를 변경하기 전 변경이 가능한 코드인지 아닌지 확인해야 합니다.

보통 마크다운에서 일반적으로 이미지를 첨부하면 아래와 같이 코드가 뜹니다. 

하지만 이 방식은 이미지 사이즈를 조절하기에는 어려움이 있습니다.

![image](https://user-images.githubusercontent.com/115243471/230114751-
65af8f30-67c0-48ac-833b-70fd1a9d4581.png)

 

 

기존 코드를 변경해주어야 하는데요!

앞을 <img> 태그로 수정 후 뒤에 넣고 싶은 widthheight를 작성하여 크기를 조절합니다.

<img src = "https://user-images.githubusercontent.com/115243471/230114751-
65af8f30-67c0-48ac-833b-70fd1a9d4581.png" width = "400px" height="400px">

단위는 px, % 사용하고 싶은 단위를 넣으신 후 이미지 크기를 조절하시면 됩니다.


✎ 이미지 정렬방법

준비된 <img> 태그 앞에 <p> 태그로 감싸줍니다. 그 후 align속성을 사용하여 정렬하고 싶은 방향으로 정렬합니다.

<p align = "center"> // right 오른쪽, left 왼쪽(기본값)
	<img src = "https://user-images.githubusercontent.com/115243471/230114751-
	65af8f30-67c0-48ac-833b-70fd1a9d4581.png" width = "400px" height="400px">
</p>

가운데로 정렬된 모습


오늘도 좋은 하루 보내세요!!

◖⚆ᴥ⚆◗

Comments