[HTML 기초] <img> 태그 이미지 삽입, <a> 태그 링크 삽입

 

 

이미지 삽입 태그 <img>

	<img src="이미지 URL">

 

1. <img> : 이미지 삽입 태그
2. 속성 src : <img> 태그와 함께 사용하며 이미지의 경로 지정
3. 속성값 : "이미지 URL" (이미지 → 마우스 오른쪽 단추를 클릭 → 이미지 주소 복사)

 

이미지나 배너를 삽입할 때 사용하는 태그입니다. 이 <img> 태그는 티스토리 에디터 기본모드에서 이미지를 삽입하는 것과 동일한 방식이지만, 이 태그를 활용해 이미지 형태를 변경하거나 다른 곳에 삽입할 때 필요하니 기본적으로 알고 있어야 합니다.

 

<img> 속성

• width : 너비
• height : 높이
• titel : 이미지 제목
• alt : 이미지의 대안 ('Alternate-대체하다'의 의미로, 이미지 주소가 잘못 되었거나 해당 서버에 문제가 있을 경우 이미지를 못 읽어올 수 있는데, 이럴 때 이미지를 대체하여 나타남)

 

 

응용 _ 이미지 사이즈 속성 지정 (미입력시 기본값)

	<img src="이미지 URL" width="300" height="200">

 

 

 

 

 

하이퍼링크 삽입 <a>

	<a href="연결할 URL">텍스트입력</a>

 

1. <a></a> : 하이퍼링크를 걸어주는 태그
2. 속성 href : 클릭시 이동하는 링크로 <a> 태그와 함께 사용해야함
3. 속성값 :"연결할 URL" (이동할 링크)

 

이 태그는 기본모드에서 작성시 링크를 삽입하고 싶은 문구를 드래그한 후 상단의 '링크 삽입/수정'을 이용해 링크를 삽입하는 것과 동일한 방식으로, 역시나 이 태그를 활용해 다양한 방식으로 링크를 삽입할 수 있습니다.

 

지난번 <form> 태그로 target 속성 지정했던 것 기억하시나요? 데이터를 제출한 후 받은 응답을 열 때 표시할 위치를 나타내는데, 하이퍼링크 클릭할 때도 마찬가지의 방법이고 <a> 태그 안에 사용합니다.

 

 

<a> 태그 속성

• _self : 현재 브라우저에 표시 (default)
• _blank : 새로운 브라우저에 표시
• _parent : 현재 브라우저의 부모에 표시, 없을 경우 현재 브라우저에 표시
• _top : 최상단 브라우저에 표시

 

 

응용 _ 링크 위치 속성 지정

	<a href="연결할 URL" target="_blank">텍스트입력</a>

 

 

 

 

 

이미지에 하이퍼링크 삽입

이미지에 링크 삽입하는 방법은... 눈치 채셨나요? 위 두 가지를 합치기만 하면 됩니다. 

	<a href="연결할 URL"><img src="이미지 URL"></a>

 

마찬가지로 속성은 원하는대로 지정하시면 됩니다 :)