기타

마크다운 이미지 나란히, 이미지 정렬 하는법

ysk(0soo) 2023. 4. 26. 23:52

이미지 나란히

1. 마크다운 테이블 그리는법 활용

이미지링크 | 이미지링크
---|---|

2. html 태그 사용

<p align="center">
  <img src="이미지경로" align="center" width="32%">
  <img src="이미지경로" align="center" width="32%">
  <img src="이미지경로" align="center" width="32%">
  <figcaption align="center">3개 이미지 띄우기</figcaption>
</p>

3. figure 태그 사용

2개인경우

<figure class="half">

사용

<figure class="half">
  <a href="link"><img src="이미지경로"></a>
  <a href="link"><img src="이미지경로"></a>
  <figcaption>2개이미지.</figcaption>
</figure>

3개 인경우

<figure class="thrid">

사용

<figure class="thrid">
  <a href="link"><img src="이미지경로"></a>
  <a href="link"><img src="이미지경로"></a>
  <figcaption>3개이미지</figcaption>
</figure>

이미지 정렬

  1. 이미지 좌측 정렬
    <img src='./images/box-cox-translation.png' align='left'/>
  1. 이미지 중앙 정렬
    <img src='./images/box-cox-translation.png' align='center'/>
<center><img src="/img/myImg.png" width="300" height="300"></center>
  1. 이미지 우측 정렬
    <img src='./images/box-cox-translation.png' align='right'/>

이미지에 주석달기

<figcaption> 주석 내용 </figcaption>