이미지와 하이퍼링크

웹 문서와 이미지

웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에 몇 가지 파일 형식만 사용할 수 있다.

 

<img> 태그

 

src 속성

이미지 파일 경로

웹 문서 파일의 위치를 기준으로 이미지 경로 지정

HTML과 이미지 파일이 같은 폴더에 있다면 src 속성에 파일 이름만 적음

images라는 하위 폴더에 이미지 파일이 있다면 하위 폴더까 지 같이 적음

웹 사이트에 있는 이미지도 주소를 알아내어 src 속성에 사용 할 수 있다.

 

 

alt 속성

 

width, height 속성

이미지 크기 조정하기

이 속성을 사용하지 않으면 원래 이미지 크기대로 표시

이 속성을 이용해 화면에 표시하는 이미지 크기 조정,

but 이미지 파일의 용량은 그대로

 

 

<figure>, <figcaption>  이미지에 설명글 붙이기

<figure>태그 : 설명글을 붙일 대상 지정

웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용

설명 글을 표시할 때 로 먼저 묶어야 함

 

<figcaption>태그 : 이미지를 설명하는 대체 텍스트

이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시

 

 

하이퍼링크

다른 문서, 혹은 다른 사이트로 바로 연결해 주는 기능

외부 사이트나 외부 페이지로도 연결.

메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있다.

 

 

 

<a> 태그, href 속성

반드시 href 속성을 함께 사용해서 어떤 대상으로 연결하는지 알려주어야 한다

 

<a> 태그에서 사용할 수 있는 속성

 

 

 

target 속성 – 새 탭에서 링크 열기

다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 링크 페이지를 표시할 때

현재 페이지는 그대로 유지하면서 새 창이나 새 탭에 표시

 

사용할 수 있는 값

 

한 페이지 안에서 점프하기 - 앵커

앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만듦.

<a> 태그의 href 속성을 사용해 링크함. 단, 앵커 이름 앞에 #을 붙여 앵커 표시.

 

 

 

<area> 태그, usemap 속성 - 이미지맵

 

이미지맵 : 한 이미지 상에 여러 다른 링크를 만드는 것