HTML 알아보기(2)

이미지 및 앵커 태그

쇼핑몰에는 많은 상품 이미지가 들어갑니다. 따라서 이미지를 표현할 때 사용하는 이미지태그에 대해서는 잘 알아두는 것이 좋으며 하이퍼링크를 걸 때 사용하는 앵커 태그 역시 알아두어야 합니다.

 

이미지 관련 태그

홈페이지 내에 gif, jpg, png 형태의 그림을 표시하고자 할 경우 사용하는 태그입니다.

 

<IMG SRC="URL" ALT="그림의 설명" ALIGN=[TOP|MIDDLE|BOTTOM|LEFT|RIGHT] WIDTH=[픽셀|퍼센트] HEIGHT=[픽셀|퍼센트] BORDER=값>

속성	설명.
SRC="URL"	해당 그림 파일의 위치를 지정합니다.
ALT="그림의 설명"	그림의 설명을 표시합니다.
ALIGN=[TOP|MIDDLE|BOTTOM]	그림 뒤의 글자를 위|중간|아래쪽에 정렬합니다.
ALIGN=[LEFT|RIGHT]	글자 뒤에 그림을 왼쪽|오른쪽에 정렬합니다.
WIDTH=[픽셀|퍼센트]	그림의 너비를 지정합니다.
HEIGHT=[픽셀|퍼센트]	그림의 높이를 지정합니다.
BORDER=값	그림의 테두리를 표시합니다.

 

[따라하기]

쇼핑몰 관리자 페이지에 있는 카페24로고 이미지를 이용하여 이미지 태그에 대해 알아보도록 합시다.

① 쇼핑몰 관리자로 접속한 후 카페24 로고 위에서 마우스 오른쪽 버튼을 클릭한 후 이미지의 URL을 알아보기 위해 속성을 선택합니다.

② 그럼 이미지의 위치인 URL을 알 수 있습니다. 이 부분을 마우스로 쭉 끌어서 선택한 후 복사(Ctrl+C)합니다.

③ 메모장을 실행한 후 다음과 같은 HTML 코드를 입력하여 봅시다.

④ 그럼 결과는 다음과 같이 나타납니다. 이미지 태그는 많이 사용하는 태그이므로 잘 알아두어야 합니다.

첫 번째 그림은 src 태그를 사용하여 위치(URL)을 지정하였으므로 카페24의 로고 이미지가 그대로 나타납니다.

두 번째 그림의 경우 width=200 height=100로 너비 200, 높이 100 픽셀로 설정하였으므로 크기에 맞게 나타나는 것입니다.

세 번째 그림의 경우는 테두리를 5로 지정한 것입니다.

네 번째 그림의 경우 alt 태그를 사용하여 마우스를 그림위에 올렸을 때 나타나는 글자를 지정한 것입니다.

앵커 태그

앵커(Anchor) 태그는 지정한 문서나 파일로 하이퍼링크(Hyperlink) 되도록 지정할 때 사용하는 태그입니다.

<A HREF="URL" TARGET="이동할 곳"]> ~ </A>

 

속성	설명
HREF="URL"	하이퍼링크 되는 URL을 지정합니다.
TARGET="이동할 곳"	마우스로 클릭 했을 경우 이동할 곳을 지정합니다.

TARGET의 속성	설명
_blank	링크된 내용을 새로운 창을 하나 더 열어 보여줍니다.
_parent	링크된 내용을 이전 창에서 보여줍니다.
_self	링크된 내용을 현재 창에 보여줍니다.
_top	링크된 내용을 프레임을 없애고 현재의 전체화면에 보여줍니다.

 

  [따라하기]

다음의 HTML 태그를 입력한 후 결과를 확인하면서 앵커 태그에 대해 알아두도록 합시다.

① 다음의 HTML 코드를 입력합니다.

쇼핑몰관리자페이지</a><br> <a href="mailto:test@test.com">관리자에게 메일보내기</a><br> 네이버 새창 뛰우기</a>

  ② 문서를 저장한 후 실행하면 다음과 같은 그림이 나타납니다.

모두 다 하이퍼링크 되어 있음을 알 수 있으며 첫번째를 클릭하면 echosting.cafe24.com/Shop로 연결이 됩니다. 그리고 두번째를 클릭하면 아웃룩 익스플레스 프로그램이 실행되면서 메일을 보내는 창이 나타납니다. 그리고 세 번째를 클릭하면 네이버로 접속이 되는데 새로운 창이 생기면서 나타나는 것을 확인할 수 있습니다.

 

이미지맵

ImageMap이란 그림의 일부분에 마우스를 클릭 했을 경우 다른 문서나 파일로 하이퍼링크 되도록 하는 것입니다

 

<IMG SRC="URL" USEMAP="#그림이름"> <MAP NAME="그림이름"> <AREA SHAPE="영역모양" COORDS="위치" HREF="URL"> </MAP>

속성	설명
SHAPE="영역모양"	하이퍼링크로 지정된 영역의 모양을 지정합니다.
COORDS="위치"	영역의 위치를 나타내는 것으로 4개의 숫자로 위치를 지정합니다.
HREF="URL"	하이퍼링크 되는 URL을 지정합니다.

SHAPE의 속성	설명
rect	사각형의 영역을 지정합니다.
circle	원형의 영역을 지정합니다.
poly	다각형의 영역을 지정합니다.