[홈페이지제작 강좌] HTML 기본강좌 (링크태그)

4. 링크태그

여기에서는 하이퍼링크 태그에 대해서 알아보도록 하겠습니다. 태그를 배우는데 가장 기초적인 태그 중 하나가 링크태그입니다. 그만큼 몰라서는 안되는 태그이죠^^. 제가 지금까지는 링크태그에 대해서는 다른 태그를 설명하면서 거의 다 알려드렸는데요..^^ 모르겠다고 질문하시는 초보분들이 많이 계셔서 링크태그만 묶어서 설명을 드립니다   링크란.."하이퍼링크" 를 줄인 말입니다. 그럼 하이퍼링크는 뭘까요? 여러분들이 웹서핑을 하면서 글자나 그림을 클릭하면 다른 웹페이지나 그림이 나오죠? 그 부분이 바로 하이퍼링크를 해놓은 부분이져. 즉 일정부분을 다른 부분에 연결해주는 통로입니다. 저기 위쪽에 단일기 배너 보이시죠?^^ 그걸 클릭해보세요. 그러면 단일기 달기 범국민 운동 사이트가 나오죠....이런게 다 하이퍼링크를 이용해서 웹페이지 끼리, 웹사이트 끼리 연결 시켜준것입니다. 자...그럼 이제부터 링크태그에 대해서 배워보도록 하져^^    ※ 링크태그의 기본원리    링크태그의 기본은 <a></a> 태그입니다. 근뎅...<a></a> 만을 사용하면 아무것도 나타나지 않습니다. 어느 곳으로 연결시켜줄 것인가를 지정해주어야 하죠^^ 이걸 지정해주는 속성이 href="주소" 속성입니다. 그럼 직접 해볼까요?^^ <a href="http://www.empas.net">여길누르세요</a> 여길누르세요    위에 "여길누르세요" 를 클릭해보면 엠파스가 나오는 걸 볼 수 있을 겁니다. 그런데..한가지 아쉬운 점은 엠파스가 나오는 부분이 같은 페이지에서 나오니깐 조금 불편하죠?^^  이런 불편한 점을 해결하기 위해선  target 이란는 속성을 사용해주면 됩니다. target="_blank" 를 추가시면 링크된 부분이 새창으로 나오게 되져^^ ( target속성에 대해선 다음 페이지에서 다루도록 하겠습니다.) <a href="http://www.empas.net" target="_blank">여길누르세요</a> 여길누르세요    어때요? 새창으로 나오져?^^  그럼 이제 이메일주소와 이미지를 링크시키는 방법을 알아보져^^  ※ 링크시키기 ( 이메일, 이미지, 기타 )    이번에는 이메일과 이미지, 기타 링크시키는 방법을 알아보도록 하겠습니다. 먼저 배우기 전에 기본적으로 링크태그는 다 같습니다. 몇가지 속성이 붙을 뿐이져^^ 기억해두시길.......    ① 이메일링크시키는 방법은 href="mailto:이메일주소"  ☜ 이렇게 해주면 됩니다. 즉 이메일 주소 앞부분에 mailto: 만 넣어주면 되져...특별히 target 속성은 필요없습니다. 왜냐면 어차피 아웃룩 익스프레스 같은 메일프로그램이 나타나기 때문이져(메일프로그램이 설치되어 있지 않은 분들은 안나타남)...^^ 예제를 보시져..... <a href="mailto:ji-inest@hanmail.net">태그매니아에게</a> 태그매니아에게    ② 이번엔 이미지 링크시키는 방법입니다. 이미지링크시키는 형식은 세가지가 있는데요....이미지에서 웹페이지로 링크, 이미지에서 이미지로 링크, 웹페이지에서 이미지로 링크 이져^^ 조금 헷갈리져?^^ 근뎅...어려워 하실 필요없습니다. 결국은 다 대동소이(大同小異) 한 거져^^ (헉...간만에 한자를 사용했당 -_- ;;;) ⓐ 이미지→ 웹페이지로 링크 <a href="웹페이지주소"><img src="이미지주소"></a> 예제보기 ⓑ 이미지→ 이미지로 링크 <a href="이미지주소"><img src="이미지주소"></a> 예제보기 ⓒ 웹페이지→ 이미지로 링크 <a href="이미지주소">여길클릭</a> 예제보기  스크롤바가 상당히 많이 내려와 있네용^^ 다음 페이지에서 계속 하도록 하겠습니다. ^^