IMG Element | Web Image Files
Home > Document > HTML > 중급 과정 > Web images

페이지 목차

IMG

처음으로 다루어보는 멀티미디어(Multi-Media)가 되시겠습니다. 우리가 일반적으로 얘기하는 Multi-Media(다중매체) 라고 하면 여기서 다루려고 하는 이미지를 비롯해서 사운드, 동영상이 대표적인 멀티미디어라고 할 수 있겠죠. 특히 이미지 파일은 그 종류가 매우 많은데 원칙적으로 모든 종류의 파일이 사용가능합니다. 그러나 종류에 따라서는 그 파일크기가 워낙 커서 웹에서 사용하기 곤란한 종류의 파일이 많이 있습니다. 한 가지만 예를 들자면 확장자가 .BMP(Bit MaP) 인 파일의 경우 1024 X 768 해상도를 사용해서 저장할 경우 대략 2 ~ 3 Mega Byte 정도의 크기를 차지하기 때문에 통신선을 이용한 웹에서 이런 파일을 사용하면 아무리 초고속 통신을 이용하는 현재라고 해도 Page가 Load되는 시간이 한참 걸립니다. 이런 크기의 파일을 웹에서 사용한다는 것... 참으로 미련한 짓이죠. 무료 홈페이지 계정을 제공하는 사이트에서 이런 파일을 썼다가는 대여섯개 업로드하고나면 공간부족현상이 곧 바로 일어나져... 모뎀에서 초고속 인터넷 통신망으로 바뀌면서 인터넷을 이용하는 사람들의 참을성이 점점 없어지게 되어 대략 3초 정도가 지나도 별 반응이 없으면 다른 사이트로 이동하거나 브라우저를 닫아버린다는군요. 그러므로 과도한 이미지 파일 사용은 자제하는게 좋습니다. 그래서 전문가들은 웹에서 사용하기 좋은(주로 용량이 작고 이미지에 별 손상이 없는 파일을 좋다고 표현하겠습니다.)형식의 파일을 연구한 결과 현재 대략 3가지 정도의 웹에서 주로 사용하는 형식의 이미지 파일을 만들어내게 되는데 아래와 같습니다. 웹 디자인에 없어서는 안될 중요한 요소이므로 잘 익혀 둬야겠죠...

  1. .GIF(Graphic Interchange File)
    256 color를 사용하기 때문에 용량이 매우작고, Icon 이미지에 주로 사용하며, 투명한 배경색을 사용할 수 있습니다. 아래의 JPG형식에 비해서는 화질이 약간 떨어집니다.

  2. .JPG 또는 .JPEG(Joint Picture Expert Group)
    파일형식의 약자에서도 느낄 수 있듯이 이미지 파일 전문가들이 모여서 개발한 형식의 파일입니다. GIF가 화질이 약간 떨어진다는 점을 보완했는데, 용량은 약간 커집니다. 또한 투명한 배경색을 사용하지 못한다는 단점이 있죠. 하나가 좋아지니까 다른 하나는 단점이 되는군요. 하지만 이 형식의 이미지 파일은 원본 이미지에 거의 손상이 없기 때문에 원본에 가까운 그림을 보여줄 때 좋습니다. 이 방식은 .BMP 파일처럼 화소하나 하나를 일일이 저장하는 방식이 아니라 주변에 같은 색끼리 면적으로 처리하는 방식이기 때문에 화질은 원본에 비해 손색이 없져... 요즘 디지털 카메라에 찍혀서 저장되는 형식입니다.

  3. .PNG(Portable Network Graphic)
    한 마디로 쥑이는 포맷의 그래픽 파일이져... 약자를 봐도 알 수 있듯이 통신에 적합한 그래픽이라는 말이죠. 하지만 성능에 비해서 별로 보급이 안 되어 있습니다. 구미쪽의 사이트에서도 거의 본적이 없구요. 저도 정혹히는 모르지만, Flash로 잘 알려진 Macromedia의 FireWorks라는 제품에만 지원되는 걸로 알고 있는데 혹시 아니면 좀 가르쳐 주시져... 또 사용자들이 이미 GIF와 JPG 형식에 익숙해 있는 것도 보급이 안된 이유중에 하나 아닐까요? 이 포맷은 원본이미지는 .JPG에 비해 손색이 없을 뿐더러 투명한 배경을 지원하고 .JPG 보다는 쩜 크긴 하지만 용량도 많이 줄였습니다. 또 Flash와 마찬가지로 Vector Graphic 이기 때문에 수정하기도 좋습니다. 이 사이트에 대 부분 파일이 .PNG 포맷입니다. Dreamweaver 나 Flash와 같이 쓰면 정말 끝내주져...

Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD  [표 보는 방법]
ElementStart tagEnd tagEmptyDeprecatedDTD
IMG FE  


IMG element
src
source라는 뜻으로 끼워넣을 이미지 파일이 있는 곳의 uri를 넣습니다.
예) <IMG src="../images/logo.gif">
align
top | bottom | middle | left | right. 그림이 container(테이블이나 DIV 등의 Box Element)속에 들어 갔을 때의 정렬위치 기본값은 middle-left
예) <IMG src="../images/logo.gif" align="top">
alt
alternate Text 라는 뜻으로 마우스를 그림 위에 올렸놓았을 때 나오는 짧은 설명글입니다. 검색엔진에서 검색Robot이 웹 상의 문서를 검색할 때 이 text들에 대한 정보를 가져갑니다.반드시 써주는게 좋죠. 또 그림 파일의 링크가 깨져서 그림이 안 보일 때는 이 설명글이 대신 나옵니다.
예) <IMG src="../images/logo.gif" alt="로고 이미지">
border
절대값, 그림의 테두리 두께
예) <IMG src="../images/logo.gif" border="2">
name
scripting할 때 호출할 이름. JavaScript나 Visual Basic Script로 스크립트를 작성할 때 사용하기 위해 붙이는 이름 입니다. 한글은 사용하면 안됩니다.
예) <IMG name="logo" src="../images/logo.gif">
width
이미지 파일의 가로 길이, 사용하지 않으면 원본크기입니다. 백분율이나 Pixel 단위 모두 사용가능합니다.
예1)Pixel <IMG src="../images/logo.gif" width=640">
예2)백분율 <IMG src="../images/logo.gif" width="100%">
height
이미지 파일의 세로 길이, 사용하지 않으면 원본크기입니다. 백분율이나 Pixel 단위 모두 사용가능합니다.
예1)Pixel <IMG src="../images/logo.gif" height="480">
예2)백분율 <IMG src="../images/logo.gif" height="50%">
GalleryImg
*IE only
Image Toolbar()의 on(Default), off 대소문자 구분 없음
예1) on <IMG src="../images/logo.gif" GalleryImg="yes">
예2) off <IMG src="../images/logo.gif" GalleryImg="no">
공통 속성 공통 속성표 참고





폴더 만들기

앞으로 예제를 실습하는데 몇 가지 통일 시켜야 될 것들이 있군요. 그 중에 하나가 여러분 컴퓨터 하드 디스크에 폴더를 만드는 일입니다. 파워유저에게는 해당사항이 아니지만 초보에게는 반드시 필요한 세팅이라고 할 수 있습니다. 우선 탐색기를 열고 C-Drive에 아래와 같이 이름을 Myfolder 라고 주고 폴더를 만듭니다. 이 번에는 Myfolder 에 각각 html과 images라는 이름으로 2개의 sub-folder 를 만듭니다. 그럼 아래의 그림과 같은 식으로 탐색기에서 보이겠군요. 꼭 이렇게 보이도록 만들어 보시져... 제대로 만들어 졌으면 아래의 이미지 파일 저장하는 방법으로...


폴더 만들기
root - c:\
Myfolder
html
image.html
images
saveas_image.png




웹에서 원하는 이미지 파일 얻기
웹 페이지를 다니다 보면 마음에 드는 그림 파일들을 보게 되는데 이 때 마음에 드는 그림을 보면 저장을 해 두는게 좋겠죠. 대 부분 알고 있겠지만 그래도... 초보를 위해서...

1. 우선 저장하고 싶은 그림 위에 마우스를 올리고 마우스 오른쪽 버튼을 클릭합니다.

다른 이름으로 그림저장

2. 위의 context menu에서 다른 이름으로 그림 저장을 선택하고 저장할 경로/위치를 지정합니다. 앞에서 만들어 두었던 'images' 폴더에 저장... 아래의 그림도 .PNG형식의 파일이니까 우클릭한 다음 저장해 보시져... 아래의 예제로 바로 쓸거니까 그냥 한 번 해 보세요. file이름은 saveas_image.png 로 되어 있습니다.




위에서 저장한 saveas_image.png를 사용해서 이미지를 HTML 문서에 링크해 보겠습니다.

1. 우선 새 문서를 하나 시작하고 시작하자 마자 앞에서 만들어 두었던 'html' folder에 image.html로 저장합니다. 이제 위의 폴더 만들기와 똑같은 상대가 되겠져... Anchor Element 에서 상대 경로를 사용하기 위해 저장을 한 것 처럼, IMG등의 src 속성을 가진 Element들도 상대 경로를 사용하기 위해 반드시 저장되어야 합니다. 경로에 익숙치 않은 사람은 절대경로와 상대경로 부분 참고.

2. 아래와 같이 <body>와 </body> 사이에 입력하고 미리보기를 합니다.

입력
<HTML>
    <HEAD>
        <TITLE>이미지 넣기</TITLE>
    </HEAD>
    <BODY>
        <IMG src="../images/saveas_image.png" alt="다른 이름으로 그림 저장">
    </BODY>
</HTML>
출력결과
다른 이름으로 그림 저장

위의 그림 크기는 width="213" height="342" 입니다.



HTML-Kit 사용자



감추기


Workspace에 폴더 등록하기

마우스 커저를 오른쪽의 Workspace 위에 놓고 우클릭 / 밑에서 위로 세번째의 'Add/Remove Ftp/Folder' 선택 / 'Add Local folder' 선택 하면 아래의 그림이 나옵니다. 'Folder Path' 입력란의 오른쪽에 있는 경로찾기 아이콘을 눌러서 앞에서 만들어 두었던 'Myfolder' 를 찾아서 '확인'을 하고, 아래의 'Display name' 입력란에는 각자 알아보기 쉬운 이름을 줍니다. 기본적으로 Folder Path와 같은 이름으로 등록됩니다. OK 단추를 눌러서 과정을 마치면 이제 'Myfolder'가 오른쪽 Workspace에 등록됩니다. 폴더를 확장시키고 축소시키는 방법은 탐색이 사용법과 같습니다. 이름 왼쪽의 (+)표시를 클릭하면 펼쳐지면서 (-)표시로 바뀌고 그 안에 있는 파일이나 subfolder들이 보입니다. 이미 무료 홈페이지 계정을 사용하는 사람들은 Ftp Folder를 등록하면 되겠습니다.




drag & drop으로 이미지 파일 링크하기

Workspace에 등록된 Myfolder/images/saveas_image.png 파일이 보이도록 폴더를 확장시키고, 'saveas_image.png' 파일을 끌어다(drag)가 image.html의 body Tag속에 커저를 위치시킨 다음에 마우스를 놓으면(drop) 아래와 같이 자동으로 경로와 파일이름, width, height, alt등을 입력해 줍니다.

입력
<HTML>
    <HEAD>
        <TITLE>이미지 넣기</TITLE>
    <HEAD>
    <BODY>
        <IMG src="../images/saveas_image.png" width="446" height="432"
        alt="saveas_image.png">
    </BODY>
</HTML>


drag & drop을 하지 않고 메뉴에서 이미지 파일 넣기

  1. 에디터 창의 body Tag 사이에 커저를 위치시킨다.
  2. Workspace 에서 'saveas_image.png' 파일위에 마우스로 우클릭한다.
  3. 아래의 그림에서 처럼 Extra / Insert as Image 를 선택한다.




절대 단위와 상대 단위로 이미지 크기를 지정할 때의 차이점
  1. 절대 단위로 지정하게되면 창 크기에 관계없이 지정한 width와 height를 유지 합니다. 즉, 창 크기가 이미지보다 크면 여백이 보이고, 작으면 이미지가 가로나 세로로 스크롤 됩니다.

    여기를 클릭하고 창이 뜨면 창 크기를 크게, 작게 늘이고 줄여 보시져... 이미지 크기는 변화가 없습니다. 아래와 같이 width와 height를 모두 지정했습니다.

    <IMG src="../images/sea.jpg" width="1280" height="960">

  2. 상대 단위로 지정하게되면 창 크기에 따라 width와 height가 변합니다. 즉, 창 크기가 이미지보다 크면 이미지가 따라서 커지고, 작으면 이미지가 창 크기에 따라 작아집니다.

    여기를 클릭하고 창이 뜨면 창 크기를 크게, 작게 늘이고 줄여 보시져... 이미지 크기가 변화합니다. 아래와 같이 width 만 100%로 지정해습니다. height는 같은 비율을 유지하게 때문에 지정하지 않아도 됩니다.

    <IMG src="../images/sea.jpg" width="100%">

상대 단위가 좋으냐 절대 단위가 좋으냐는 경우에 따라 달라지겠죠. 예를 들어서 클릭하면 원본 이미지가 나오는 손톱그림(작은 그림)의 경우는 절대단위가 좋을거고, 게시판에 이미지를 링크할 경우라면 상대 단위가 좋겠군요. 가로 스크롤을 안해도 되니까 말이져... 저는 개인적으로 상대단위를 즐겨 쓰는 편입니다만... 원본 이미지 자체가 크지 않을 경우는 상대 단위를 쓸 경우 해상도가 떨어지게 되니까 이럴 때는 절대 단위를 쓰는게 좋겠죠. 정리하면,

  • 이미지 원본 크기가 작을 경우 주로 절대 단위를
  • 이미지 원본 크기가 클 경우 주로 상대 단위를 사용한다
라고 알면 되겠습니다.





문서에 배경 이미지 넣기

준비 : 우선 위의 절대, 상대 단위에서 보았던 그림(sea.jpg)를 앞에서 배운 방법으로 images 폴더에 저장하고 새 문서를 시작하여 bg_image.html이라고 이름을 주고 html folder에 저장합니다.

입력
<HTML>
    <HEAD>
        <TITLE>배경 이미지 넣기</TITLE>
    </HEAD>
    <BODY background="../images/sea.jpg" bgproperties="fixed">
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    </BODY>
</HTML>


background 속성은 Body Element와 뒤에 나오는 Table, Td Element에만 있는 속성입니다. 미리 보기를 하여 배경 그림으로 제대로 들어 갔는지 확인해 보시져... <BR>을 많이 넣었기 때문에 스크롤이 되죠? 스크롤이 되어도 배경 그림이 움직이지 않고 고정되어 있습니다. 바로 bgproperties 라는 Attribute(속성) 때문인데, 이 속성은 배경 그림을 고정 시키는 속성입니다. 속성값은 fixed 밖에 없습니다. 사용하지 않으면 배경그림이 스크롤 합니다. 한 번 확인해 보시길...

배경 그림을 사용할 때 주의 할 점은 배경 그림 때문에 문서의 내용이 잘 안 보일 수 있다는 점인데, 사실 sea.jpg 와 같은 파일은 문서의 배경그림으로 사용하지 않습니다. 주로 단순하고 문서에 사용하는 글씨 색이 잘 보이는 배경그림을 사용합니다. 용량도 가급적이면 작은 이미지를 사용하져... 여기를 우클릭한 다음 다른 이름으로 대상 저장 메뉴를 선택해서 images folder에 저장하시져... 파일 이름은 bg_hor_line.gif 되시겠습니다. 그럼 다음 예제 입력...

입력
<HTML>
    <HEAD>
        <TITLE>배경 이미지 넣기</TITLE>
    </HEAD>
    <BODY background="../images/bg_hor_line.gif" bgproperties="fixed">
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    </BODY>
</HTML>


출력결과

이번에는 문서 전체의 배경이 진한 회색줄로 꽉차 보이죠? 이 파일은 원래 32 X 32 (Pixel)짜리의 아주 작은 파일이지만 background 속성은 배경그림을 가로, 세로로 반복시키기 때문에 문서 전체에 꽉 차 보이게 되는 겁니다. 따라서 배경그림으로 일정한 Pattern을 반복 사용하고 싶을 때 큰 그림을 사용하는 것은 낭비라고할 수 있겠죠. 한 패턴만 만들면 되니까요. bgproperties 속성값을 fixed로 했기 때문에 배경그림은 역시 스크롤 되지 않습니다.



이미지에 링크걸기

앞 페이지에서 배운 A Element를 이용해서 이미지 파일에 링크거는 방법입니다. 왼쪽 그림은 Java Language를 만든 Sun & Microsystem의 Java 홈페이지에 있는 Java LOGO입니다. 이 그림을 우클릭후 '다른 이름으로 그림 저장' 해서 여러분들의 images Folder에 저장하세요. 파일 이름은 javalogo52x88.gif 입니다. 이미지 파일에 링크거는 방법은 A(Anchor) Tag을 잘 이해하고 있다면 매우 간단한 문제져. <A> 와 </A> 사이에 들어가는 링크글자가 대신에 IMG Tag이 들어가면 됩니다. 즉, 아래와 같이

<A href="url 또는 uri"><IMG src="그림파일의 uri"></A>

이게 이미지 파일에 링크거는 포맷입니다.

입력
<HTML>
    <HEAD>
        <TITLE>이미지 파일에 링크걸기</TITLE>
    </HEAD>
    <BODY>
        <CENTER>
            <A href="http://java.sun.com" target="_blank">
                <IMG src="../images/javalogo52x88.gif">
            </A>
        </CENTER>
    </BODY>
</HTML>
출력결과

위와 같이 그림에 링크가 걸립니다. A Tag속에 들어간 이미지는 IMG Tag을 써서 집어넣은 그림과 차이가 있져. 보다시피 그림 테두리에 파란색 경계선이 생깁니다. 링크걸린 글자가 파란색으로 보이는거 아시져? 마찬가지로 링크걸린 이미지는 파란색의 테두리가 생깁니다. 또 그림을 클릭해서 링크된 url이나 uri를 방문하고 나면 자주색으로 변합니다. 그리고 <CENTER></CENTER>는 처음 나오는 내용인데 이 CENTER Element는 A, IMG, FONT 등 Center align 속성이 없는 Element를 Center로 정렬시키는 역할을 하는 Element 입니다. 혹시 링크걸린 이미지에 테두리가 생기는게 싫으면 아래와 같이 border를 '0'으로 하면 됩니다. 반대로 테두리가 없는 이미지에 테두리를 주려면 border를 원하는 숫자만큼 주면 되겠군요.

<HTML>
    <HEAD>
        <TITLE>이미지 파일에 링크걸기</TITLE>
    </HEAD>
    <BODY>
        <CENTER>
            <A href="http://java.sun.com" target="_blank">
                <IMG src="../images/javalogo52x88.gif" border="0">
            </A>
        </CENTER>
    </BODY>
</HTML>
출력결과





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색