IMG Element | Web Image Files

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

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

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

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

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

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

감추기

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을 하지 않고 메뉴에서 이미지 파일 넣기

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

절대 단위와 상대 단위로 이미지 크기를 지정할 때의 차이점

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

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

<IMG src="../images/sea.jpg" width="1280" height="960">
상대 단위로 지정하게되면 창 크기에 따라 width와 height가 변합니다. 즉, 창 크기가 이미지보다 크면 이미지가 따라서 커지고, 작으면 이미지가 창 크기에 따라 작아집니다.

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

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

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

이미지 원본 크기가 작을 경우 주로 절대 단위를
이미지 원본 크기가 클 경우 주로 상대 단위를 사용한다

라고 알면 되겠습니다.

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

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

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