[HTML] 이미지 태그 - <img></img>

   이미지 태그

 

HTML에 사진(이미지)를 삽입할 수 있다. 이미지를 웹에 있는 이미지 또는 서버에 있는 이미지를 불러와 내가 원하는 곳에 삽입할 수 있다.

 

 

 

<img> 태그 속성

 

src : 이미지의 URL 또는 파일 경로를 입력한다. 

 

alt : 이미지의 설명을 설정한다.

 

height : 이미지의 세로 높이를 설정한다.

 

width : 이미지의 가로 너비를 설정한다.

 

align : 이미지의 정렬 또는 이미지 기준으로 텍스트 정렬을 설정한다. - (left, right, top, middle, bottom)

 

border : 이미지 테두리 두께를 설정한다.

 

hspace : 이미지의 좌우 여백을 설정한다.

 

vspace : 이미지의 상하 여백을 설정한다.

 

title : 이미지의 말풍선을 설정한다.

 

 

 

 

  기본 이미지 삽입.

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2"/><br> src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" <br>  기본 이미지 삽입.

 src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" 
  기본 이미지 삽입.

 

 

  width 속성 사용 - 가로 길이 설정

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px"/><br> src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px"<br> width 속성 사용 - 가로 길이 설정

 src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px"
 width 속성 사용 - 가로 길이 설정

 

 

  height 속성 사용 - 세로 길이 설정

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" height="200px"/><br> src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" height="200px"<br> height 속성 사용 - 세로 길이 설정

 src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" height="200px"
 height 속성 사용 - 세로 길이 설정

 

 

 

  width, height 속성 사용 - 가로, 세로 길이 설정

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px"/><br> src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px"<br> width, height 속성 사용 - 가로, 세로 길이 설정

 src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px"
 width, height 속성 사용 - 가로, 세로 길이 설정

 

 

 

  border 속성 사용 - 이미지 테두리 두께 설정

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2"/><br> src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2"<br> border 속성 사용 - 이미지 테두리 두께 설정

 src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2"
 border 속성 사용 - 이미지 테두리 두께 설정

 

 

 

  alt 속성 사용 - 이미지 출력 오류시 설명하는 텍스트

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다."/><br> src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다."<br> alt 속성 사용 - 이미지 출력 오류시 설명하는 텍스트

 src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2zzz" width="200px" height="200px" border="2" alt="이미지 설명입니다."
 alt 속성 사용 - 이미지 출력 오류시 설명하는 텍스트

 

 

 

  align="left" 설정 - 이미지를 왼쪽에 정렬, 텍스트를 오른쪽에 위치시킨다.

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="left"/>  src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="left" <br> align="left" 설정 - 이미지를 왼쪽에 정렬, 텍스트를 오른쪽에 위치시킨다.

  src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="left" 
 align="left" 설정 - 이미지를 왼쪽에 정렬, 텍스트를 오른쪽에 위치시킨다.

 

 

 

  align="right" 설정 - 이미지를 오른족에 정렬, 텍스트를 왼쪽에 위치시킨다.

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="right"/>  src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="right" <br> align="right" 설정 - 이미지를 오른족에 정렬, 텍스트를 왼쪽에 위치시킨다.	

  src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="right" 
 align="right" 설정 - 이미지를 오른족에 정렬, 텍스트를 왼쪽에 위치시킨다.

 

 

 

  align="top" 설정 - 이미지 옆에 텍스트를 이미지 상단에 맞춰 정렬한다.

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="top"/>  src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="top" <br> align="top" 설정 - 이미지 옆에 텍스트를 이미지 상단에 맞춰 정렬한다.

  src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="top" 
 align="top" 설정 - 이미지 옆에 텍스트를 이미지 상단에 맞춰 정렬한다.

 

 

 

  align="middle" 설정 - 이미지 옆에 텍스트를 이미지 중앙에 맞춰 정렬한다.

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="middle"/>  src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="middle" <br> align="middle" 설정 - 이미지 옆에 텍스트를 이미지 중앙에 맞춰 정렬한다.

  src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="middle" 
 align="middle" 설정 - 이미지 옆에 텍스트를 이미지 중앙에 맞춰 정렬한다.

 

 

 

  align="bottom" 설정 - 이미지 옆에 텍스트를 이미지 하단에 맞춰 정렬한다.

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="bottom"/>  src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="bottom" <br> <br clear=both> align="bottom" 설정 - 이미지 옆에 텍스트를 이미지 하단에 맞춰 정렬한다.

  src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." align="bottom" 
 
 align="bottom" 설정 - 이미지 옆에 텍스트를 이미지 하단에 맞춰 정렬한다.

 

 

 

  hspace 속성 사용 - 이미지 좌우 여백을 성정한다.

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." hspace="100"/> src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." hspace="100"<br> hspace 속성 사용 - 이미지 좌우 여백을 성정한다.

 src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." hspace="100"
 hspace 속성 사용 - 이미지 좌우 여백을 성정한다.

 

 

 

  vspace 속성 사용 - 이미지 상하 여백을 설정한다.

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." vspace="100"/> src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." vspace="100"<br> vspace 속성 사용 - 이미지 상하 여백을 설정한다.

 src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." vspace="100"
 vspace 속성 사용 - 이미지 상하 여백을 설정한다.

 

 

 

  title 속성 사용 - 이미지 설명 말풍선을 설정한다

<img src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." title="이미지 말풍선 입니다."/><br> src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." title="이미지 말풍선 입니다."<br> title 속성 사용 - 이미지 설명 말풍선을 설정한다

 src="http://postfiles6.naver.net/MjAxNzA3MjBfMTU3/MDAxNTAwNTQzNjgwNDU5.Ce6yxJVid15OmYwiB49GTUH-2f8ZYruk-Wi51P_OenEg.qQkvdvaz2IcilAFKrRVzE83fsAkpKGm2KaebeUso97gg.JPEG.sharp57/%EC%97%B0%EC%8A%B502.jpg?type=w2" width="200px" height="200px" border="2" alt="이미지 설명입니다." title="이미지 말풍선 입니다."
 title 속성 사용 - 이미지 설명 말풍선을 설정한다

 

 

 

위에 align 속성 예제 중에 이미지 URL이 너무 길어 제대로 출력이 안되었다. 아래 이미지를 참고 하기.