웹 서핑을 하면서 가장 보기 싫은 페이지가 어떤 페이지 일까요? 바로 모든 컨텐츠가 깨알 같은 글로만 이루어진 페이지일 것입니다. 게시판을 읽으면서도 글로만 되어 있는 게시물은 스크롤 다운 ( 그냥 읽지 않고 스크롤을 내려 버림 )의 대상이 되어 버리고 맙니다.  반면에 사진이 첨부되어 있어서 글을 읽느라 피곤해진 웹 서퍼들의 눈을 즐겁게 해주는 페이지의 경우에는 방문객이 좀 더 글에 관심을 주게 마련이지요. 이번에 알아 볼 태그는 바로 이런 사진을 웹 페이지에 담을 수 있게 해주는 이미지 태그입니다.



이미지 태그(img)의  기본 형식


 이미지 태그는 기본적으로 다음과 같은 형식을 갖습니다.

이미지 태그의 기본형식

이미지 태그의 기본형식


 <img src="주소"></img> 라고 쓰셔도 됩니다. 모든 태그는 여는 태그와 닫는 태그로 이루어져 있다고 배웠기 때문에 많은 분들이 이런 방식으로 쓰죠. 하지만 몇몇 특이한 태그들은 하나의 태그로만 존재 할 수 있습니다. 바로 <img /> 태그와 <br /> 태그 같은 것들입니다. 이런 태그들은 여는 태그와 닫는 태그 사이에 중요한 내용이 들어가지 않으며, 그 자체로 내용이기 때문에 간편하게 줄여 쓸 수 있습니다.

 이미지 태그에는 기본적으로 src 속성이 필요합니다. 인터넷에 올라와 있는 이미지를 가져다 쓸 경우에는 이미지의 주소가 필요합니다. ( 이 주소는 이미지를 우클릭해서 속성(R) 혹은 그림 정보 보기를 누르시면 알 수 있습니다. ) 여러분의 컴퓨터 안에 있는 사진을 html 페이지에

※ 이미지 주소에는 상대 경로와 절대 경로가 있는데 이것에 대해서는 나중에 포스팅을 따로 해드리겠습니다.
 



이미지 태그(img)의 속성 < alt : 이미지의 부가 설명 >


 이미지 태그에는 여러가지 속성이 있습니다. 그 중에 가장 중요하다고 할 수 있는 속성이 바로 alt 속성입니다. 이미지 태그는 의미가 있습니다. 예를 들어, 만리장성에 대한 이미지를 img 태그로 웹 문서에 넣었다면, 이 이미지는 만리장성이라는 의미로 사람들에게 보여집니다. 하지만 이미지가 깨졌거나 로드되지 않았을 때, 이 이미지를 설명 할 수 있는 기능이 필요합니다. 또 시각 장애인을 위한 웹 페이지 설명 시스템에서 이미지는 보여지는 것이기 때문에 이미지를 말로 설명 할 수 있는 기능이 필요 합니다.


티스토리의 이미지 태그 alt 옵션

티스토리의 이미지 태그 alt 옵션




 이 때 사용하는 이미지 태그의 옵션이 바로 alt 옵션입니다. 티스토리를 사용하시는 분이라면 텍스트 에디터에서 사진을 클릭 했을 때, 우측에 위와 같은 창이 뜨는 것을 볼 수 있습니다. 이 때, 대체 텍스트가 바로 alt 옵션을 지정해 주고 있습니다. ( 실제로 대체 텍스트에 글을 넣고 html로 본문을 변형해서 보시면 alt 옵션에 들어가 있는 것을 볼 수 있습니다.

 
<img src="www.asldkfasjldkf.com/" alt="대체 텍스트" />

실제로 위와 같은 태그를 HTML 연습장에서 실행을 시켜 보겠습니다. 이 때, src에 들어가는 주소는 임의의 존재하지 않는 주소이기 때문에 사진이 나오지 않습니다.


alt 옵션을 준 이미지 태그

alt 옵션을 주지 않은 이미지 태그

alt 옵션을 준 이미지 태그

alt 옵션을 준 이미지 태그



 alt 옵션을 집어 넣지 않았을 경우엔 그냥 소위 말하는 "엑박"이 뜹니다. ( 파이어 폭스에서는 엑박대신에 왼쪽 그림과 같은 모습으로 나오더군요. ) 하지만 alt 옵션을 준 경우에는 alt 옵션에 해당하는 텍스트가 이미지 태그 자리에 대신 출력이 됩니다.

 alt 옵션은 되도록이면 선택해 주는 것이 좋습니다. 이유는 웹 페이지가 제대로 로드 되지 않아도 본문을 잘 이해 할 수 있게 하며, 시각 장애인이나 다른 단말기에서도 적절하게 해석 될 수 있도록 부가적인 설명을 주는 옵션이기 때문입니다.




이미지 태그(img)의 속성 < title : 이미지의 부가 설명 >

<
 이미지 태그의 부가적인 속성 중에 title 태그가 있습니다. 여러분은 웹 사이트를 돌아다니면서 이미지가 있을 경우 마우스를 이미지 위에 올렸을 때, 네모난 텍스트 상자가 뜨고 그 안에 설명이 들어있는 것을 본 적이 있을 겁니다. 바로 title 옵션이 이런 기능을 담당하는데요.

 이 역시 이미지의 부가적인 설명을 나타내는데 사용됩니다. 시각 장애인용 웹 페이지 리더기에서도 이 title 속성을 읽어 주는 기능이 옵션으로 들어있다고 합니다.

<img src="http://sstatic.naver.com/people/portrait/201001/20100122151943157.jpg" title="소녀시대" />

위와 같은 태그를 태그 연습장에서 실행 시켜 봅시다. 그러면 사진이 하나 뜨게 됩니다. 그 사진 위에 마우스를 올리면..


이미지 태그 title 속성

이미지 태그 title 속성




 title 속성에 주었던 "소녀시대"라는 단어가 마우스 하단에 부가 설명으로 뜨게 됩니다. 사진이 잘 알아보기 힘들거나 좀 더 부가적인 설명을 줄 때 이 속성을 사용하면 좋을 것 같습니다. ( 검색 엔진의 키워드 필터링에 이 속성값이 영향을 미치는 지는 잘 모르겠습니다. 아마 Case by Case 가 아닐까 생각 되네요. )





이미지 태그(img)의 속성 < align : 이미지의 정렬 >


 워드 프로세서를 쓰다보면 정렬 기능을 많이 사용하게 됩니다. 글을 좀더 보기 좋게 나타내기 위해서는 정렬 기능은 꼭 필요합니다. 이미지 태그 역시 정렬을 할 수 있습니다. 이미지 태그의 정렬에는 5가지 옵션이 있습니다. 각 옵션과 설명은 다음과 같습니다.

 옵션 이름
 내용
align="right"
이미지가 오른쪽으로 정렬됩니다. 
 align="left"  이미지가 왼쪽으로 정렬됩니다.
align="top"
주변의 텍스트가 이미지 상단쪽에 표시 됩니다.
 align="middle" 주변의 텍스트가 이미지 중간에 표시 됩니다.
 align="bottom"  주변의 텍스트가 이미지 하단쪽에 표시 됩니다.


 역시 설명으로 하면 알아 듣기 힘들테니 각각 실제로 어떻게 표현되는지 실험해 보겠습니다.







 align 속성을 잘 이용해서 이미지를 본문의 적절한 위치에 배치하면 본문에 대한 방문자의 이해도를 높일 수 있을 겁니다. 솔직히 "top" 속성과 "middle", "bottom" 속성은 어디에 사용해야 할 지 잘 모르겠네요. ^^ 언젠간 사용 될 수 있으니 알아 두도록 하겠습니다. ^^

ps. 그리고 이미지의 align 속성을 지정해주지 않으면 기본적으로 bottom 속성으로 되는것 같습니다. 참고하시기 바랍니다. ^^




이미지 태그(img)의 속성 < width, height : 사진의 크기 조절>


 사진은 규격이 있습니다. 현상을 할 때, 반명함, 증명사진 등등 의 사이즈가 있는 걸 경험으로 알고 있습니다. 웹 페이지에 사용 되는 이미지 태그에도 이렇게 이미지의 크기를 조절 할 수 있는 기능이 있습니다. 바로 height 속성과 width 속성입니다. 영어 사전을 찾아보면 무엇을 의미하는지 알 수 있습니다.

<img src="http://sstatic.naver.net/search/img2/logo_naver_2.gif" width="200" height="200" />

 위 태그를 태그 연습장을 이용해서 실행해 보도록 하겠습니다. 그러면 다음과 같이 실행이 됩니다.



이미지 태그 옵션

이미지 태그 옵션



  평소에 보던 네이버 로고와 많이 다른 모습입니다. 원래는 보기 좋게 NAVER 라는 단어가 가로로 출력이 되는데, 정사각형 모양으로 늘어져서 보이네요. 그 이유는 width 속성과 height 속성을 이용해서 이미지의 크기를 200 * 200 으로 만들었기 때문입니다. 다시 말해서 이 이미지의 높이는 200px ( 픽셀 ) 이고 너비도 200px( 픽셀 )이라는 겁니다.

 원래 이미지를 적절한 크기로 줄이거나 늘리고 싶을 때, 사용하면 좋은 속성입니다. 실제 사용빈도도 굉장히 높은 옵션입니다.





이미지 태그(img)의 속성 < vspace, hspace : 사진의 여백 >

 마지막으로 그림에 여백을 주는 속성인 vspace와 hspace를 알아보도록 하겠습니다. 여백이라는 것은 주변의 텍스트나 다른 그림과 이미지 사이에 적절한 공간을 주는 것을 의미합니다. 다음과 같은 태그를 태그연습장에 실행을 해봅시다.


<img src="http://sstatic.naver.com/people/portrait/201001/20100122151943157.jpg" align="left" vspace="100" hspace="100" />
 똑바로 해 넌 정말 Bad boy 사랑보단 호기심뿐 그 동안 난 너 땜에 깜빡 속아서 넘어간거야 넌 재미없어 매너 없어 넌 Devil Devil 넌 넌 네 핸드폰 수많은 남자 한 글자만 바꾼 여자 내 코까지 역겨운 Perfume 누구 건지 설명해봐 넌 나 몰래 누굴 만나는 끔찍한 그 버릇 못 고쳤니 뛰어 봐도 손바닥 안인걸 You better run run run run run 더는 못 봐 걷어차 줄래 You better run run run run run 날 붙잡아도 관심 꺼둘래 Hey 더 멋진 내가 되는 날 갚아주겠어 잊지 마 You better run run run run run 딱 걸렸어 약 올렸어 Run Devil Devil Run Run 내 곁에서 살며시 흘깃 다른 여잘 꼭 훑어봐 나 없을 땐 넌 Super Playboy 고개 들어 대답해봐 넌 재미없어 매너 없어 넌 Devil Devil 넌 넌 You better run run run run run 더는 못 봐 걷어차 줄래 You better run run run run run 날 붙잡아도 관심 꺼둘래 Hey 더 멋진 내가 되는 날 갚아주겠어 잊지 마 You better run run run run run 딱 걸렸어 약 올렸어 Run Devil Devil Run Run 넌 재미없어 매너 없어 Run Devil Devil Run Run 얘 나 같은 애 어디도 없어 잔머리 굴려서 실망했어 난 걔네들 보다 더 대단해 너 그렇게 커서 뭐 될래 (까불지 말랬지) 널 사랑해 줄 때 잘 하랬지 You better run run run run run 더는 못 봐 걷어차 줄래 You better run run run run run 날 붙잡아도 관심 꺼둘래 Hey 더 멋진 내가 되는 날 갚아주겠어 잊지 마 You better run run run run run 이 넓은 세상 반은 남자 너 하나 빠져봤자 꼭 나만 봐줄 멋진 남자 난 기다릴래 혼자

 
 여백의 의미를 설명하기 위해서 align 속성을 left로 주었습니다. 위 글을 잘 읽어 보신 분이라면 의미를 아시겠죠? 다시 설명하자면, 이미지를 왼쪽 정렬하여 텍스트들이 여러줄에 걸쳐서 이미지를 지나가게 하는 속성입니다. 위 태그의 실행 결과는 다음과 같습니다.


이미지 태그 여백 옵션

이미지 태그 여백 옵션




이미지 주변에 여백이 생긴 것을 볼 수 있습니다. 그 여백 밖으로 텍스트 들이 지나가고 있구요. 이미지 바로 옆에 텍스트가 표시 되면 이미지를 보기도 힘들고 텍스트를 읽기도 어려울 수 있습니다. ( 가독성이 떨어진다고 해야하나요? ) 아무튼 이미지에 적절한 여백을 주는 것도 예쁜 웹 페이지를 만드는 방법 중 하나입니다.


이미지 태그(img)와 링크 태그(a)


 지난 번에 링크 태그에 대해서 알아 봤습니다.

 2010/05/03 - [6. 컴퓨터 공학/a. HTML/CSS] - 링크 태그 걸기

 그 중에 이미지 태그와 링크 태그에 대해서 언급을 했었습니다.

 이미지에 링크걸기

 글자에 링크를 거는 것 뿐만아니라 이미지에도 링크를 걸 수 있으며, 배너와 같은 곳에 적용할 수 있습니다. 이미지 태그와 링크 태그를 적절하게 사용해서 인터넷 게시판에 자신의 명함을 만들 수도 있겠네요.


 웹 페이지를 더욱 풍부하게 해 줬던 것이 바로 멀티미디어 입니다. 그 중에 가장 기본이 되는 것이 이미지 인데요. 이번 시간에 이미지 태그를 배웠으니 여러분의 블로그에 여러분 만의 배너를 만들어서 집어 넣어 보세요 ^^. 티스토리에서 제공하는 배너나 스킨을 자신의 입맛에 맛게 바꿔 나가는 것도 또 다른 재미랍니다. ^^




 요즘 주변을 보면 많은 사람들이 블로그를 하는 걸 볼 수 있습니다. 블로그가 점점 대중화 되어가고 있다는 증거겠지요. 초창기 블로거들은 지금처럼 포털 사이트에서 제공하는 블로그 서비스가 없었기 때문에 스스로 블로그를 설치해서 ( 설치형 블로그 ) 써야 했습니다. 그렇기 때문에 그들은 웹 언어인 HTML을 배우게 되었습니다.

 하지만 요즘은 가입형 블로그 서비스 ( 네이버 블로그, 티스토리, 이글루스 )가 블로거의 대다수를 차지하고 있기 때문에 HTML을 몰라도 블로깅을 하는데에 문제가 없습니다. 그럼에도 불구하고 여전히 블로거가 HTML 태그를 알아야 하는 몇가지 이유가 있습니다.



Girasoles para los amigos  / Sunflowers for the friends
Girasoles para los amigos / Sunflowers for the friends by Claudio.Ar (not too much online) 저작자 표시비영리동일조건 변경허락



1. 표현력

 첫 번째 이유는 바로 표현력입니다.  블로그는 기본적으로 웹에 내용을 배포하는 형태이니다. 모든 내용들이 HTML의 형태로 웹에 발행을 하게 됩니다. 물론 가입형 블로그 서비스에서는 스마트 에디터가 내용을 자동으로 HTML로 바꿔 주기는 합니다. ( 예를 들면 티스토리 글쓰기 화면에서 여러분은 그저 여러가지 버튼을 사용해서 글을 작성합니다. 마치 "워드 프로세서"를 사용하듯이 말이죠. 하지만 궁극적으로 그 내용들은 HTML로 변형되어 발행됩니다. )

 하지만 이렇게 스마트에디터에 기대어 글을 쓰기만 하면, 내가 원하는 것을 정확히 표현 할 수 없을 때가 많이 있습니다. ( 그렇기 때문에 대부분의 에디터가 직접 HTML을 편집 할 수 있는 기능을 제공합니다. 티스토리 에디터 역시 직접 HTML을 조작 할 수 있게 하죠. ) 블로거가 HTML 태그를 모르고 스마트 에디터에만 기댄다면 그 블로거의 표현 능력은 스마트 에디터의 표현 능력보다 못 한 상태가 됩니다. ( 최대한 잘 써봐야 스마트 에디터의 표현 능력까지 겠죠. )

 따라서 자신이 원하는 내용을 좀 더 정확하게 인터넷에 표현하기 위해서 블로거는 HTML 태그를 배울 필요가 있습니다.



Scientific FUTAB
Scientific FUTAB by Samyra Serin 저작자 표시비영리동일조건 변경허락



2. 디자인 편집 능력

 두 번째 이유는 디자인의 편집 능력입니다. 표현 능력의 연장선이라고 할 수 있는데, 가입형 블로그 서비스의 경우 ( 가령 네이버 블로그를 예로 들면 ) 종종 블로그의 디자인을 바꿀 수 없을 때가 많이 있습니다. 혹은 맘에 드는 블로그 스킨을 그냥 적용하는 정도 밖에 되지 않습니다.

 하지만 티스토리와 같이 스킨을 직접 편집 할 수 있는 블로그의 경우에는 HTML 태그를 알아야 수정하기가 편합니다. ( 아니라면 남이 올려놓은 스킨 편집 포스트를 보고 그냥 따라하는 정도 밖에 되지 않겠죠. ) 예를 들면 여러분의 블로그에 애드센스를 설치하려고 할 때, <table> 태그를 알아 두면 좀 더 멋진 디자인으로 설치 할 수가 있습니다. ( 본문 상단에 애드센스를 두개 삽입하는 것 처럼 )

 여러분의 블 로그를 좀 더 편하고 예쁜 디자인으로 바꾸려면 HTML 태그를 배워야 합니다.



Bigui, Beagle
Bigui, Beagle by ¡arturii! 저작자 표시비영리변경 금지



3. 표준의 중요성

 HTML은 표준이 있습니다. 모든 웹브라우저는 이 HTML 표준을 잘 판독하고 화면에 표시 할 수 있어야 합니다. ( 물론 IE를 비롯한 몇몇 웹 브라우저에는 독자적인 HTML 형식이 있을 수 있고, 모든 웹 브라우저가 HTML 표준을 만족하는 것은 아닙니다. ) 게다가 웹에 접속하는 기기가 PC나 노트북에서 모바일 기기로 옮겨 가면서 HTML 페이지가 모바일 기기에서도 읽힐 수 있을 필요성이 생겼습니다.
 
 다시 말하면 웹 표준에 맞추어서 작성된 HTML 문서는 모바일 기기에서도 잘 읽힙니다. 하지만 표준이 아닌 특정 웹 브라우저에서만 동작하는 웹 페이지는 모바일 기기에서는 동작을 안하거나 잘 못 동작 할 수 있다는 것입니다. ( 모바일 웹 브라우저는 표준에 맞게 제작이 될 테니까요 ^^ )

 즉, 모바일 기기를 통해 웹에 접속한 방문자를 위해서라도 HTML 표준에 맞는 글 작성이 필요합 니다.



Horta d'en Rahola
Horta d'en Rahola by . SantiMB . 저작자 표시비영리변경 금지



4. CSS나 javascript 를 배우기 위한 기본적인 지식

 HTML을 아시는 분들도 CSS나 javascript 라는 것에는 생소 할 수 있습니다. 역할을 간단히 말하자면 HTML은 웹 페이지의 구조, 즉, 사람의 몸이라고 할 수 있구요. CSS는 그 위에 입는 옷이라고 할 수 있습니다. javascript는 사람의 근육으로 어떤 동작을 할 수 있을지에 대한 역할을 수행합니다.

 사람이 어떤 동작을 하건, 어떤 옷을 입건 몸이이 없다면 아무것도 아니겠지요. 정확히 말하면 몸이 없으면 입을 수도 동작을 할 수도 없죠. 마찬가지입니다. HTML을 모르고서 CSS를 배울 수 없고 좋은 javascript 프로그래머가 될 수 없습니다.

 블 로그의 운영적인 측면에서 보자면, 블로그를 좀 더 이쁘게 ( CSS를 이용해서 ) 만들고, 좀 더 많은 기능들을 ( javascript를 이용해서 ) 구현하기 위해서는 HTML을 배워야 합니다.


Colours
Colours by Lincolnian (Brian) (family illness - back soon) 저작자 표시동일조건 변경허락


  좋은 블로그를 만들기 위해서 가장 중요한 것은 물론 컨텐츠입니다. 어떤 컨텐츠를 만들어 내느냐가 그 블로그에 가장 중요하고 필요한 요소이지만 HTML을 공부해서 좀 더 이쁜 블로그를 내 맘대로 만들 수 있는 능력도 좋은 블로그를 만들 수 있는 하나의 방법이 아닌가 생각됩니다.


+ Recent posts