[Blog Github.io] Image 사용법

---

1. 이미지 추가.

![설명글](이미지주소)
![sleep](https://user-images.githubusercontent.com/96651722/221404568-36804ae4-5d8a-4a05-b5d3-01218c3ef12b.jpg)

---

2.이미지 크기

픽셀지정 : {: width=”30px”, height=”100px”}
비율지정 : {: width=”50%”, height=”50%”}

![sleep](https://user-images.githubusercontent.com/96651722/221404568-36804ae4-5d8a-4a05-b5d3-01218c3ef12b.jpg){: width="100px" height="100px"}  
![sleep](https://user-images.githubusercontent.com/96651722/221404568-36804ae4-5d8a-4a05-b5d3-01218c3ef12b.jpg){: width="40%" height="40%"}

---

3.이미지 위치

{: .align-center}을 뒤에 붙여주면 가운데 정렬
{: .align-left}을 뒤에 붙여주면 왼쪽 정렬
{: .align-right}을 뒤에 붙여주면 오른쪽 정렬

![sleep](https://user-images.githubusercontent.com/96651722/221404568-36804ae4-5d8a-4a05-b5d3-01218c3ef12b.jpg){: .align-left}{: width="20%" height="20%"}
![sleep](https://user-images.githubusercontent.com/96651722/221404568-36804ae4-5d8a-4a05-b5d3-01218c3ef12b.jpg){: .align-right}{: width="25%" height="25%"}
![sleep](https://user-images.githubusercontent.com/96651722/221404568-36804ae4-5d8a-4a05-b5d3-01218c3ef12b.jpg){: .align-center}{: width="30%" height="30%"}

---

4.이미지 테두리

border:굻기 0px 
Solid : 실선으로 표시, dashed : 점선으로 표시
#eaeaea -> 테두리 색, border-radius : 꼭짓점 둥글게 
{:style="border:1px solid #eaeaea; border-radius: 7px;"}

글을 쓰다가 Notice에도 테두리를 추가할 수 있었다.

Notice 테두리?? 신기하다    dahsed:점선, #ff0000 -> 빨강
{:style="border:1px dashed #ff0000; border-radius: 5px; padding: 0px;"}
{: .notice} 

Notice 테두리?? 신기하다 dahsed:점선, #ff0000 -> 빨강

---

5. 이미지 간단하게 추가 하는법

1. 추가할 이미지를 복사한다.

이미지 자체 복사 ( 주소복사 X)

2. 아무 github repository에 issue 창을 연다.

Bug Report의 Expected behavior에 붙여넣기 하면
image.png에서 ->![image](주소.png)의 코드가 생성된다.

생성된 코드를 사용해 주면 된다.

TOP

---