이미지

웹에서 사용하는 이미지 형식

웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질이 좋아야 하기 때문에 몇 가지 파일 형식만 사용할 수 있다. 만약 다른 형식으로 된 이미지 파일을 웹에서 사용하려면 다음과 같은 파일 형식으로 변환해야 한다.

img 태그 - 이미지 삽입하기

<img src="경로" [속성="값"]>

이미지를 웹 문서에 넣으려면 src속성에 정확한 파일 경로를 지정해야 한다. ‘경로’란 현재 html문서에서 이미지 파일까지 찾아가기 위한 길로, 길이 정확하지 않다면 웹 문서에 이미지가 표시되지 않는다.

내 컴퓨터에 이미지 파일이 있는 경우와 웹 상의 이미지 링크를 사용하는 경우에 따라 이미지 경로에 들어가는 값도 다르다.

내 컴퓨터의 이미지 파일 경로 지정

• 웹문서 파일과 이미지 파일이 같은 폴더 안에 있다면 src속성에는 간단히 이미지 파일 이름만 적으면 된다. <img src="lotus.jpg">

• 반면 웹 문서가 있는 폴더에 하위 폴더를 만들고 그 폴더에 이미지 파일을 저장했다면 src속성에 하위폴더와 함께 이미지 파일 이름을 적어야 한다. <img src="images/lotus.jpg>"

파일 경로 이해하기

한단계 상위 폴더로 이동하여 하위 폴더에 파일을 사용하는 기호는 ‘..’을 사용한다.

한단계 하위 폴더로 이동하는 기호는 ‘/’를 사용한다.

alt 속성 - 이미지를 설명해 주는 대체 텍스트

웹 문서에 삽입한 이미지는 시각적인 요소이기 때문에 시각장애인들은 그 내용을 알 수 없다. 하지만 alt태그를 사용한다면 이미지에 대한 설명을 넣을 수 있고 화면 낭독기가 시각장애인에게 읽어 줄 수 있다.

또한 연결속도가 느리거나 이미지를 제대로 표시할 수 없는 상황에서 이미지 자리에 alt속성에 쓴 내용이 표시되어 어떤 이미지가 사용되었는지 짐작할 수 있다.

<img src="bulle.gif" alt="">

width, heigh속성 - 이미지 크기 조절

width, heigh속성을 사용하지 않으면 원본 이미지 크기 그대로 브라우저 화면에 표시된다.

figure, figcaption태그 - 이미지에 설명 글 붙이기

figure 태그는 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용한다.

한 단위가 되는 요소를 나타내기 위해서는 figure태그를 사용하고 설명 글을 사용하기 위해서는 figure태그 안에 figcaption태그를 사용해 설명 글을 표시한다.

예를 들어, 이미지만 삽입한다면 figure태그를 사용하지 않아도 되지만 이미지에 설명 글을 넣으려면 이미지를 figure태그를 묶어 주어야 한다.

<figure>
    <img src="images/prod.jpg" alt="예맨 모카 마타리">
    <figcaption>예맨 모카 마타리(예맨 모카 마타리)</figcaption>
</figure>

figure태그로 묶여있는 figcaption태그는 이미지 위치를 옮기면 설명도 함께 옮겨진다.

링크 만들기

링크를 만드는 a태그는 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 된다.

<a href="링크할 주소" [속성="속성 값"]> 텍스트 </a>
<a href="링크할 주소" [속성="속성 값"]><img src="이미지 경로 주소"> </a>

a 태그 안에서 사용할 수 있는 주요 속성은 다음과 같다.

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

target속성에서 사용할 수 있는 값은 다음과 같다.

한 페이지 안에서 점프하는 앵커 만들기

앵커(anchor)라고 불리는 기능은 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와준다.

앵커를 사용하려면 이동하고 싶은 위치마다 id속성을 이용해 앵커를 만들고 각각 다른 이름을 지정해야 한다. 이렇게 붙여 놓은 앵커 이름들은 마치 링크를 만들 때처럼 <a>태그의 ‘href’속성을 사용해 링크한다. 다만, 앵커 이름 앞에 #을 붙여 앵커를 표시한다.

<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>
<a href="#앵커 이름"> 텍스트 또는 이미지 </a>

예시)

<ul id="menu">
        <li><a href="#content1">메뉴1</a></li>
        <li><a href="#content2">메뉴2</a></li>
        <li><a href="#content3">메뉴3</a></li>
    </ul>

    <h2 id="content1">내용1</h2>
    <p>이 기능을 앵커(anchor)라고 합니다. </p>
    <p><a href="#menu">[메뉴로]</a></p>

    <h2 id="content2">내용2</h2>
    <p>이 기능을 앵커(anchor)라고 합니다. </p>
    <p><a href="#menu">[메뉴로]</a></p>

    <h2 id="content3">내용3</h2>
    <p>이 기능을 앵커(anchor)라고 합니다. </p>
    <p><a href="#menu">[메뉴로]</a></p>

map태그, area태그, usemap속성 - 이미지 맵 저장하기

위에서 배운 이미지 링크는 하나의 이미지에 하나의 링크를 걸었다. 그런데 하나의 이미지에 여러 개의 링크를 걸 수도 있다. 즉 한 이미상에서 클릭 위치에 따라 서로 다른 링크가 열리는 것이다. 이것을 이미지 맵이라고 한다. 일반적으로 웹사이트보다 메일 등에서 사용한다.

이미지맵은 이미지에 영역을 만든 후 링크를 추가해야 하기 때문에 map태그를 이용해 이미지맵을 만들고 img태그에서 usemap속성으로 이미지맵을 지정한다.

<map name="맵이름">
	<area>
	</area>
	.....
	</map>
<img src="이미지파일" usemap="#맵이름">

예를 들어 (0,0)에서 (80,100)위치까지 사각 형태의 영역을 클릭했을 때 페이스북으로 연결되게 하려면 다음과 같이 사용한다.

<map name="fb">
	<area shape="rect" coords="0,0,80,100" href="http://www.facebook.com" alt="페이스북">
</map>

SVG이미지

jpg/jpeg/png/gif와 같은 파일을 크게 확대하면 이미지가 울퉁불퉁한 것을 볼 수 있다. 이러한 이미지 형색을 비트맵 이미지(bitmap image)라고 한다.

반면, 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지(vector image)라고 한다. 이러한 이미지 형식을 SVG(Scalable Vector Graphics)라고 한다.