2.4 HTML로 링크와 이미지 넣기

• 링크는 문서와 문서간 연결을 의미하며, 기본적으로 a 태그를 사용한다.
• 사진과 같은 이미지 객체를 삽입할때는 img 태그를 사용한다.

 

1. a 태그

• a태그는 HTML에서 내부나 외부 링크를 생성합니다.
• 대상 경로를 의미하는 href 속성을 필수로 사용해야하고, 그 외에 target, title 속성을 선택 사용할 수 있다.

💡 <a href =”대상경로” target = “연결 링크방식” title =”링크 설명”></a>

 

href 속성

href 속성은 a태그로 생성하는 링크의 대상 경로를 입력할 때 사용한다.

a태그 사용시 필수로 있어야한다.

속성값은 대부분 url이거나 내부 문서의 id 속성값이다.

• 개발 초기에 연결할 대상경로가 불분명할 경우 속성값에 ‘#’을 주로 넣는다.

 

target 속성

• a 태그로 링크가 생성될때 대상이 연결되는 방식을 지정한다.
• 속성값으로 _blank, _parent, _self, _top을 사용할 수 있지만, 새창으로 열리는 _blank를 제외하고 거의 사용하지 않는다.
• href와 달리 생략가능하다.

 

title 속성

• title 태그는 링크에 설명할 수 있는 텍스트를 작성합니다.
• a태그의 콘텐츠만으로 설명하지 못한 설명을 적으면된다.
• target과 마찬가지로 생략가능하다.

<a href="https://libweb.pknu.ac.kr/" target="_blank", title="도서관">도서관 홈페이지</a>

 

 

2. img 태그

HTML에서 이미지를 삽입하고 싶으면 img 태그를 사용합니다.

img 태그는 src 속성과 alt 속성으로 구분된다.

참고로 img태그에서 src와 alt 속성은 필수로 사용이 권고되니 꼭 넣어야한다.

형식

💡 <img src =”이미지 경로” alt=”이미지 설명”>

 

src(source) 속성

• 삽입하려는 이미지의 경로를 입력하는 속성입니다.
• HTML에서 이미지 경로는 항상 웹브라우저에서 실행되는 HTML 파일위치가 기준이다.

src 속성에서 경로 입력시에만 사용할 수 있는 약속된 기호가 있다.

기호 설명

./	현재 폴더
../	상위 폴더

• 만약 HTML파일과 같은 폴더에 있는 images 폴더에 beach.jpg 이미지 파일이 있다면

<img src ="./images/beach.jpg">

현재폴더의 images폴더에 beach.jpg가 경로이다.

참고로 ./는 생략가능하다.

• 만약 HTML파일 상위 폴더에 있는 images 폴더에 있다면

<img src ="../images/beach.jpg">

../을 사용한다.

../ 기호 한번당 하나의 상위폴더를 의미하기에 ../../ 이런씩으로 중복 사용이 가능하다.

이미지 파일이 제대로 나오지 않는다면 경로문제일 경우가 많으니 한번 더 확인해라

 

alt 속성

alt 속성은 삽입된 이미지에 설명을 넣는다.

beach.jpg 이미지에 설명을 넣고 싶다면 img 태그에 alt 속성도 사용한다.

이때 삽입한 설명은 이미지에 마우스를 올려두면 확인 할 수 있다.

<img src ="./images/beach.jpg" alt ="아름다운 여름 해변">

 

 

3. 이미지 링크

a태그 안에는 여러 요소가 올 수 있다.

img 태그를 a 태그안에 사용하면 이미지를 클릭했을때 특정 링크로 이동되게 할 수 있다.

<a href="https://libweb.pknu.ac.kr" target="_blank"> 
	<img src ="./lib_logo.jpg" alt ="도서관로고">
</a>