HTML 이미지, 링크 삽입하기

이미지를 삽입할 때에는 이미지가 저장된 경로를 알고 있어야 한다.

<img src = "경로"> 태그로 이미지를 삽입할 수 있다.

이 때 이 이미지는 글자로 취급하므로 줄바꿈태그인 <br>을 넣지않으면

위와같이 그림 바로 옆에 글자가 들어가는 것을 볼 수 있다.

따라서 그림을 넣은 후에 <br>태그를 넣어주는 것이 깔끔하다.

 

그림의 위치는 align 속성으로 조절 할 수 있다.

align = right : 텍스트 오른쪽에 정렬

align = left : 텍스트 왼쪽에 정렬

위 속성은 텍스트 기준으로 배치하는 것이므로 그림의 왼쪽 또는 오른쪽에 텍스트가 위치하게 된다.

 

width 속성과 height 속성으로 가로 크기와 세로 크기를 지정할 수 있다.

border속성은 테두리 두께를 픽셀 단위로 지정하는 속성이다.

링크를 가진 이미지의 경우 자동으로 테두리가 나타나는데 이를 border = "0" 의 방식으로 테두리를 없애는 데에 사용할 수도 있다.

vspace 속성으로는 이미지 상하의 여백을 설정할 수 있고

hspace 속성으로는 이미지 좌우의 여백을 설정할 수 있다.

 

 

링크는 <a href = ""> ~ </a> 방식으로 삽입할 수 있다.

이 때 target = "_blank" 속성을 설정해주면 새 창에서 링크를 열 수 있다.

이미지, 링크 삽입 예시

결과