파프리 블로그

따지고 보면 온라인 게임도 사람이 하는 것이고 웹 서비스 안에서 소셜 네트워크가 형성되는 것을 보면 온라인 게임이나 소셜 네트워크 서비스를 통해서 배우자를 만나게 되는 게 전혀 이상해 보이지 않습니다. 하지만 이런 경우는 흔하지 않은 경우인데요. 왜 그럴까요? 몇 가지 이유를 살펴보면,

Remember Remember... the May Day by The Round Peg

1. 인터넷은 익명성을 전제로 한다.

웹 서비스를 이용하면서 이런 저런 사람들을 만나게 되는데, 온라인에서 만난 사람들은 오프라인에서 알고 있는 지인들보다 그 친밀도가 높지 않은게 일반적입니다. 그 이유는 상대방의 익명성 떄문입니다. 확인되지 않은 인물을 100% 신뢰하기란 쉽지 않은 일입니다. 하물며 그 상대가 배우자가 될 사람이라고 한다면 신뢰하는게 더더욱 힘들어지게 됩니다.

물론 부분적으로 실명제, 본인 확인제를 이용하는 웹 서비스들이 많이 있지만 본인 확인은 서비스 제공업체와 개인 유저사이에 일어 날 뿐 개인과 개인 사이에선 아직 익명성이라는게 존재합니다. 특히 게임의 경우 아이디를 제외하고는 상대방을 알 수 있는 방법이 별로 없지요. 그래서 상대방이 무슨 말을 하던 의심의 여지가 남게 되어 신뢰하기 힘들게 됩니다.




2. 기본으로 깔아주고 가는 허풍?

하지만 이런 어려움들도 2000년대 초 중반의 이야기인 것 같습니다. 페이스북이나 트위터의 이용자가 폭증하고 스마트폰과 태블릿 pc등의 모바일 디바이스가 널리 보급되면서 인터넷 사용인구는 폭발적으로 증가하고 있고, 그러한 인구들은 온라인 게임을 비롯한 소셜 네트워킹 서비스로 몰려들고 있습니다.

251/365 - one happy geek [explored] by joshfassbind.com

명동이나 강남, 압구정 같이 사람이 붐비는 곳이 온라인 공간에도 만들어 지고 있는 것이죠. 따라서 우리는 여러가지 인터넷 서비스를 이용하면서 사람들을 만나는 횟수가 증가하게 됩니다. 외향적이신 분들은 오프라인의 물리적 제약을 온라인으로 옮겨가서 엄청난 수의 지인을 만들기도 합니다. ( 정말 부러운 분들입니다. ^^ )

또 한국인의 대다수를 차지하고 있는 소극적인 성격, 소심한 사람들도 온라인에서 사람들을 사귀는데 정신적 장벽이 굉장히 낮은 것을 느낄 수 있습니다. 대면하고 이야기를 하면 말이 잘 안나오는 분들도 온라인 상에서는 굉장히 유머러스하고 외향적인 성격으로 변하는 경우가 많이 있습니다. ( 인터넷 상에서는 거의 대부분의 사람들이 외향적인 성격을 가지고 있는 것처럼 보이더군요. ㅋ )

어째튼 웹이 우리 생활에 점점 스며들면서 사람들 사이의 관계 형성도 점점 온라인으로 옮겨가고 있는 것 같습니다. 전화로 안부를 묻는 것 보다는 블로그나 미니홈피에 들러서 안부를 묻는 비율이 더 늘어나고 있고, 만나서 이야기하는 것보다 메일을 주고 받는 것이 더 일반화 되고 있는것 같습니다.

Friendster or Foe by Chris Pirillo

앞으로는 온라인 게임, 소셜네트워크, 온라인 커뮤니티에서 만나 결혼을 하는 커플이 훨씬 많아 질 것으로 보입니다. ^^ 그렇다고 괜찮은 이성 찾으로 이곳 저곳 돌아다니지는 마세요 ㅋㅋ

온라인에서 만나 결혼을 하는 커플들에 대해서 어떻게 생각하시나요? 또 앞으로 이런 커플들이 더 많아 질 것으로 생각하시나요?

 이클립스와 톰캣을 연동하여 사용 할 때, 자주 나타나는 메시지가 톰캣이 사용하는 포트가 충돌한다는 메시지 입니다.


이 창이 자주 뜨게 되는데요.

'Starting Tomcat v5.5  Server at localhost' has encounterd a problem.

Server ports (8080, 8009) required by Tomcat v5.5 Server at localhost are already in use. The server may already be running in another process, or a system process may be using the port. To start this server you will need to stop the other process or change the port number(s).

라는 메시지가 뜹니다. 해석을 해보자면, Tomcat 이 사용하는 8080, 8009 포트가 이미 사용중이라는 말입니다. 서버가 이미 실행되고 있을 수 있으니 확인해 보시라는 경고 메시지입니다. 이클립스에서 JSP 실행을 하기 위해서 기존에 실행 하던 서버를 잠시 정지 시키는 것을 요구하고 있네요.

해결 방법으로는 기존에 실행되고 있는 톰캣 서버나 다른 서버 프로그램을 잠시 정지 시키거나 중지 시키고 실행을 하면 됩니다.



 기존에 실행이 되고 있는 톰캐 서버를 정지해보겠습니다.
 여러분의 컴퓨터 트레이를 보시면


이렇게 생긴 아이콘이 있을 텐데요. ( 없을 수도 있습니다. )
이 아이콘을 우클릭하여


'Stop service' 를 누릅니다.
그리고 이클립스로 돌아가서 실행을 하면, 오류 없이 실행 될 겁니다.
그리고 테스트가 끝난 다음 다시 'Start service' 를 눌러서 실행 시켜 주면 됩니다.
근데, 개인 PC에서 실습 이외에 톰캣 서버를 돌릴 이유가 있나 싶네요.



  트레이에 저 아이콘이 없는 경우엔 작업 관리자를 열어서 톰캣 서버 프로그램을 강제로 꺼주는 방법을 쓰면 됩니다.
  작업 관리자를 실행한 후 "프로세스" 탭을 보시면


tomcatXX.exe 라고 하는 톰캣 프로세스가 실행되고 있을 겁니다.
톰캣 서버를 담당하는 프로세스인데요.
이 프로세스를 종료해 줍니다



프로세스 끝내기를 눌러서 종료를 해주시고,
이클립스에서 다시 소스 코드를 실행하시면 잘 동작 할 것입니다.

JSP 환경 구축하면서 처음 보게 된 오류 메시지였는데, 별로 어렵지 않게 해결이 되네요 ㅎㅎ

JSP 프로그래밍의 시작

  이전 포스팅에서 JSP 프로그래밍을 할 수 있는 환경을 구축 하였습니다. 만약 여러분의 컴퓨터에 JSP를 프로그래밍 할 수 있는 환경이 갖추어 지지 않았다면, 이전 포스트를 보면서 JSP 환경 구축을 하시기 바랍니다. 프로그래밍 환경이 구축되지 않았다면 JSP 프로그래밍 하기 힘들어요~ ( 메모장을 이용해서 서버에 올리는 식으로 할 수도 있지만 시간이 많이 걸리고 복잡해서 처음 배우는 분들에겐 비추입니다. )

2010/04/06 - [컴퓨터 공학/Java] - 자바( Java )설치하기 & 환경변수( path ) 설정하기
2010/04/06 - [컴퓨터 공학/Java] - 자바( JAVA ) 개발 환경 설치( IDE 설치 ) - 이클립스( Eclipse ) 설치하기 및 오류
2010/07/15 - [컴퓨터 공학/Java] - 이클립스와 톰캣 설치 및 연동하기



 그러면 JSP 프로그래밍을 하기위해서 개발환경인 이클립스를 실행시킵니다.


이클립스에도 여러가지 버젼이 있는데, 저는 갈릴레오 버전을 사용하고 있습니다. 갈릴레오 버전이 나온지 얼마 안되서 아직 호환성 문제 및 여러가지 잡음이 있는데, 만약 JSP 프로그래밍을 하다가 안 되는 점이 있으면, 잘 찾아 보시고 정 안되면 이전 버전인 유로파 같은 버전을 다시 설치해 주시기 바랍니다.

 

이클립스를 실행 하셨으면, [File] -> [New] -> [Project]를 선택합니다.



 Project 를 새로 생성 할 수 있는 창이 뜨는데요. 이 메뉴 중에서 'Web' 의 하위메뉴에서 'Dynamic Web Project'를 선택해 줍니다.





'Dynamic Web Project'를 선택 하셨으면 위와 같은 창이 나올 겁니다. 'Project Name'에 적절한 프로젝트 이름을 써줍니다. 나머지는 그냥 기본 설정을 따라가시면 됩니다.




프로젝트 이름을 입력 하셨으면, [Finish] 를 눌러서 진행합니다.




프로젝트가 생성되어 'Project Explorer'에 방금 생성한 프로젝트가 등록이 되어 있는 것을 볼 수 있습니다.
저는 'JspProgramming' 이라는 이름으로 생성을 했습니다. 여러분도 여러분이 써 넣으신 프로젝트 이름이 저 곳에 뜰 겁니다.



이제 JSP를 프로그래밍 할 수 있는 프로젝트까지 생성이 되었습니다.
지금부터는 실제로 JSP 프로그래밍을 해보도록 하겠습니다. 프로그래밍을 배울 때, 가장 먼저 작성하는 프로그래밍이 바로 Hello, World 인데요. 간단하기 "Hello, World!"라는 문자를 출력하는 프로그램 입니다.




Project Explorer에 보시면 'WebContent' 라는 폴더가 있습니다. 이 폴더를 선택하고 우클릭해서 폴더를 하나 만들어 줍니다.
[우클릭] -> [New] -> [Folder] 를 선택합니다.




폴더 이름에 적절한 이름을 넣어줍니다.
저는 HelloWorld 라는 이름을 넣었습니다.
적절한 이름을 넣고 [Finish]를 선택합니다.





HelloWorld 라는 폴더가 생성이 되었으면 ( 여러분이 입력한 폴더가 생성이 되었으면 ) 그 폴더를 선택하고 [우클릭] -> [New] -> [JSP]를 선택합니다.






 "File Name" 에 생성할 파일이름을 써 넣습니다.
 저는 "HelloWorld.jsp"를 써 넣겠습니다.
 [Finish] 를 눌러도 되지만 [Next]를 눌러서 템플릿 소스를 선택하도록 하겠습니다.



여러가지 템플릿 항목들이 있는데, 그 중에 "New JSP File (html)" 을 선택하고 [Finish] 버튼을 누르겠습니다.


그럼 "Hello, World!"를 출력하는 프로그램을 작성해 보도록 하겠습니다.


단순히 템플릿에 의해 생성된 내용 중에 '<body>' 와 '</body>' 사이에 "Hello, World!" 만 타이핑 해서 넣은 화면입니다. 템플릿을 이용하면 편리하긴 하지만 좀 더럽게 느껴질 수도 있습니다. 생략 할 수도 있는 것들이 추가 되니까 말이죠.

[Ctrl] + [F11] 을 눌러서 실행을 시킵니다.


위와 같은 창이 뜨는데, 아마 'IBM WebSphere v6.0' 이라는 항목이 기본으로 설정되어 있을 텐데, 조금 위로 올라가면
'Apache' -> 'Tomcat v5.5 Server' 가 있을 겁니다. 여기서 여러분이 설치한 톰캣 서버의 버전을 선택해 주시면 됩니다. 저는 5.5 버전을 설치했으니 v5.5 를 선택하겠습니다.


'Tomcat Installation directory'의 [Browse]를 클릭해서 여러분이 이전에 톰캣 서버를 설치한 디렉토리를 지정해 줍니다.
기본 디렉토리는 "C:\Program Files\Apache Software Foundation\Tomcat 5.5" 입니다.
[Next]를 눌러서 진행합니다.


다음은 실행에 포함시킬 프로젝트를 선택하는 화면입니다.
'Project" Explorer' 에 여러개의 프로젝트를 포함 시킬 수 있는데, 그 중에 실행 시킬 프로젝트를 고르는 화면입니다. Configured 라는 쪽이 실행 시킬 프로젝트 목록이고, Available 이라는 쪽이 추가 시킬 수 있는 프로젝트입니다. 여러개의 프로젝트가 연계해서 작동하는 큰 프로젝트가 아니면 대부분 현재 실행되고 있는 프로젝트만 포함 시킵니다.

이렇게 서버 설정이 끝나고, 다시 [Ctrl] + [F11] 을 눌러서 프로젝트를 실행 시킵니다.



자, Hello, World! 라는 문자열이 뜬 것이 보입니다.
이제 JSP 프로그래밍을 할 수 있는 개발 환경과 간단한 JSP 프로그래밍을 해 봤는데요. 앞으로 배울 것이 더 많고 많이 배울 수록 해보고 싶은 것들이 더 많게 될 것입니다.

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

Index &lt; 목 차 &gt;

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

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


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

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

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

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

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





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

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

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

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

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

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

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

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

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

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

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

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

1. align=&quot;right&quot;
align=&quot;left&quot; 의 결과
align=&quot;top&quot; 의 결과
align=&quot;middle&quot; 의 결과
align=&quot;bottom&quot; 의 결과

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

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

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

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


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





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

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

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

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



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





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

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

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

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

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

 이미지에 링크걸기

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


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

꼬마낙타 태그 연습장

 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 태그를 많이 사용하시게 될 겁니다.

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


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

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

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


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