마크다운에는 이미지 정렬 문법이 없다.
하지만 {: .align-pattern}이나 html을 사용하면 된다.
github page에서의 이미지 경로는 github page, Jekyll에서의 마크다운 파일에 image(사진) 넣기↗️를 사용한다.
이미지 중앙 정렬
{: .align-center}
-
적용
이미지 왼쪽 정렬
{: .align-left}
-
적용
이미지 왼쪽정렬을 하게 되면 이미지가 있는 단락에 공간이 있을 시 글자가 남은 공간에 입력된다.
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
이미지에 정렬을 주지 않을 경우
텍스트가 이과 같이 이미지 문단 다음으로 적용이된다.
이미지 오른쪽 정렬
{: .align-right}
-
적용
오른쪽도 마찬가지로 이미지 문단에 빈 공간에 텍스트가 입력된다.
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
figure사용 - center
<figure class="align-center">
<img src="이미지경로" alt="">
</figure>
-
적용
이미지크기 설정
width로 이미지 크기를 설정할 수 있다.
<figure style="width: 150px" class="align-left">
<img src="이미지경로" alt="">
</figure>
-
적용
이것도 마찬가지로 문단의 나머지에 텍스트가 입력된다.
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
ㅤ
만약 이미지 문단 밖에서 텍스트가 입력되고 싶으면 <p>태그를 사용하자.
<p align="left">
<img src="이미지경로" alt="" width="150px">
</p>
-
적용
문단 밖에서 텍스트가 입력된다.
오버래핑이 아니라 최대크기가 상위 컨테이너에 딱 맞게 하고 싶다면 <p>태그를 사용하자
-
p
<p> <img src="이미지경로" alt="" width="1200px"> </p>-
적용
-
이미지에 주석 달기
<figcaption> 주석 내용 </figcaption>
-
적용
응용 : 3가지 이미지 한꺼번에 보여주기
-
1 . p 태그 사용
- 2개일 경우
<p align="center"> <img src="이미지경로" align="center" width="49%"> <img src="이미지경로" align="center" width="49%"> <figcaption align="center">2개 이미지 띄우기</figcaption> </p>align="center"는 없어도 된다.-
적용
3개 이미지 띄우기 - 3개일 경우
<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>align="center"는 없어도 된다.-
적용
3개 이미지 띄우기
다음과 같은 방법도 있다.
-
2. figure 태그 사용
-
2개일 경우
<figure class="half">사용<figure class="half"> <a href="link"><img src="이미지경로"></a> <a href="link"><img src="이미지경로"></a> <figcaption>2개이미지.</figcaption> </figure>
2개이미지 -
3개일 경우
<figure class="thrid">사용<figure class="thrid"> <a href="link"><img src="이미지경로"></a> <a href="link"><img src="이미지경로"></a> <figcaption>3개이미지</figcaption> </figure>
3개이미지 -
댓글 쓰기