파프리 블로그

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

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

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 by Samyra Serin

2. 디자인 편집 능력

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

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

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

Bigui, Beagle by ¡arturii!

3. 표준의 중요성

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

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

Horta d'en Rahola by . SantiMB .

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

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

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

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

Colours by Lincolnian (Brian) (family illness - back soon)

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

꼬마낙타 태그 연습장

 HTML의 가장 기본이라고 할 수 있는 요소가 바로 링크입니다. 하이퍼 텍스트( Hyper Text ) 라는 말에서 알 수 있듯이 웹에서 모든 문서는 서로 링크라는 것으로 연결이 되어 있습니다. 그러면 링크란 무엇이며 링크 태그는 어떻게 사용하는 것일까요? 먼저 링크 태그는 HTML 페이지를 구성 할 때, 링크를 넣어 주는 역할을 하는 태그를 의미 합니다.

 링크란 무엇일까요? 이것이 링크입니다.  --> http://plusblog.tistory.com/
 화살표 오른편에 있는 주소를 클릭하면 여러분은 저의 블로그로 돌아 올 수가 있습니다. ( 비슷한 예로 네이버 주소를 클릭해서 들어가게 만들 수도 있지요. 링크는 사전적으로 연결이란 뜻을 가지고 있는데, 웹 페이지에선 클릭을 해서 다른 페이지로 혹은 자기 자신의 특별한 곳으로 갈 수 있는 기능을 의미합니다.

 링크를 걸 수 있는 방법은 여러가지가 있습니다. 첫 번째로 블로그의 스마트 에디터가 있는데요. 티스토리를 예로 들면 글을 쓸 때, 쇠사슬 모양의 링크 버튼이 있습니다.

링크 태그 넣기 : 스마트 에디터

 1번 버튼을 누르면 2번이 확장되어 주소를 쓸 수 있는 창이 나오게 됩니다. 2번의 입력 창에 주소를 입력하면 본문에 링크가 삽입이 됩니다. 물론 이런 쉬운 방법이 있지만 HTML 태그를 이용해서 좀 더 강력하고 추가적인 정보를 입력 할 수가 있습니다.




 링크 태그의 기본적인 형태는 다음과 같습니다. 태그연습장을 열어서 연습해 보세요~



 위 속 성에서 주소라는 부분에 연결을 시킬 주소를 써 넣습니다. 만약 href="http://www.naver.com/" 을 써 넣으셨다면 해당 링크 태그를 적용 시켰을 때, 네이버로 링크를 시켜주겠죠. 주의 하실 점은 <a src="주소"> 로 사용하지 않는 것입니다. 다른 태그들은 src 속성으로 주소를 접근하지만 a 엘리먼트는 href 로 접근하니 꼭 외워 두시기 바랍니다.
 

 태그 연습장을 열어서 다음을 연습합니다
.

 이번에 추가로 볼 속성은 target 속성입니다. target 속성은 링크를 클릭했을때, 링크에 해당하는 html 문서( 혹은 이미지 혹은 비디오 등등... 링크가 걸린 대상 )가 새창에서 열릴 것인지 혹은 현재창에서 열릴 것인지를 결정하는 속성입니다. target 속성은 다음의 값들을 취할 수 있으며 각각 뜻을 가지고 있습니다.

Target 값	의미
_blank	새로운 창을 만들어서 해당 링크를 새로운 창에 불러옵니다.
_self	현재 창에 해당 링크를 불러옵니다. ( 현재 창이 바뀝니다. )
_parent	iframe 같은 엘리먼트에서 부모 프레임에 해당 링크를 불러옵니다.
_top	현재 창 전체에 불러옵니다. ( 프레임이 있을 경우 )

나머지는 조금 응용을 할 때 필요하고 _blank와 _self 정도를 알아두면 편리하게 웹 페이지 혹은 블로그를 꾸미실 수 있을 겁니다.

링크 태그에 추가적인 설명을 덧 붙일 수도 있습니다. 예를 들면, 마우스를 링크에 가져가면 해당 링크에 대한 약간 설명이 덧 붙여져서 나오는 것이지요
.

 이번엔 title 이라는 속성에 대해서 알아보도록 하겠습니다. title 은 img 태그에서도 쓰이는 속성으로 마우스를 가져 갔을 때, 부가 설명으로 뜨는 작은 메모 같은 것입니다. 위 태그를 태그연습장으로 실행시켜 보면,


 위 사진처럼 링크에 부가적인 설명이 붙게 됩니다. 링크의 내용( 여기서 꼬마낙타 블로그라는 글자 )이 너무 길어질 경우에는 간단하게 마우스를 가져가면 부가적인 설명이 뜨도록 하고 싶을 때, title 속성을 이용하면 유용합니다.

링크를 눌렀을 때, 바로 메일을 보낼 수 있게 하는 방법도 있습니다. 링크에 메일 보내기 기능을 사용하면 되는데요. 사용법은 간단합니다
.

 태그를 위와 같이 쓰면 어떻게 될까요? 주소를 쓰는 href 속성안에 mailto: 라는 생소한 단어와 함께, 뒤에는 메일주소로 보이는 것이 쓰여져 있습니다. 눈치가 빠르신 분이라면 아셨겠지만 바로 웹 페이지에서 클릭 한번으로 메일을 보낼 수 있게 해주는 방법입니다.

 제 경우에는 태그연습장을 이용해서 위 태그를 돌려보니, Outlook 이 켜지네요. 아마 다른 분들도 ( 윈도우즈 운영체제를 사용하시는 분이라면 ) 아웃룩이 뜰 꺼라고 생각 됩니다. 다른 메일 관리 프로그램이 설치되어 있고, 그 프로그램이 기본 프로그램으로 설정되어 있다면 아마도 그 프로그램이 뜨겠죠. ^^

앞으로 배울 CSS ( 스타일 시트 ) 를 태그에 적용 시킬 수도 있습니다. 아직 이르지만 연습삼아서 한번 실행을 해 보세요
.

 앞으로 HTML을 배운뒤 CSS라는 것을 배우게 될 텐데, 간단히 CSS를 적용 할 수 있는 속성이 바로 style 속성입니다. 이 style 속성 안에는 css 문법에 맞게 디자인 된 코드가 들어가게 되는데, 위 내용은 이 엘리먼트의 글자 색을 red ( 빨간색 ) 로 하겠다!! 라는 의미입니다.  css 는 생각보다 매우 강력한 도구이기 때문에 앞으로 웹 페이지를 디자인 할 때, 이 style 태그를 많이 사용하시게 될 겁니다.

링크 태그를 이용하면 글자 뿐만 아니라 이미지에도 링크를 걸 수가 있습니다. 예를 들면 네이버 글자가 쓰여 있는 그림을 클릭하면 네이버 홈페이지로 이동을 할 수있는 기능이 있습니다. 이것은 이미지 태그도 알아야 하는데, 별로 어렵지 않습니다. 이미지 태그에 대해서는 다음에 자세히 알려드리도록 하겠습니다.


 위 이미지를 클릭하면 바로 네이버 홈페이지로 링크를 따라 가는 것을 볼 수 있습니다. 링크 태그의 가장 큰 장점이 바로 이것이 아닌가 생각되네요. 홈페이지 꾸밀 때, 배너를 클릭하면 홈페이지로 링크를 따라서 갈 수 있게 해놓면 좀 더 멋진 홈페이지를 만들 수 있을 겁니다.

마지막으로 링크를 자기 자신의 한 부분으로 돌리는 앵커 넣기 기능을 알려드리겠습니다. 웹페이지를 꾸밀 때, 한 페이지에 많은 내용이 들어가는 경우가 있습니다.

   이 포스트에도 앵커를 걸어 놨습니다. 위 링크들을 클릭하면 해당 챕터로 이동하게 되구요. 앵커를 이용하면 웹 페이지의 특정 위치로 이동하기에 편하다는 장점이 있습니다. 좀 더 스마트한 웹 페이지를 만들고 싶으신 분들은 앵커를 사용해서 웹 페이지를 좀 더 구성지게 만들어 보세요.


 지금까지 링크 태그의 사용법과 특징들에 대해서 알아 봤습니다. 링크 태그만 알아도 정보로 가득한 웹 페이지를 만들수가 있으니 잘 알아 두시기 바래요. ^^