HTML+CSS 중급 - 하이퍼링크 기본과 이미지맵 쉽게 코딩하기

텍스트보도더 설득력 있는 시각적인 이미지가 삽입을 통해 전달력있는 웹문서를 만들 수 있습니다. 이미지 태그는 상대경로의 현재 웹문서와 연관된 폴더(디렉토리)를 통해 보여지거나, 프로토콜까지 포함된 외부 이미지의 파일경로를 포함함 절대경로로 연결된 이미지를 표현하는 것을 기본으로 합니다.

 

 

https://youtu.be/QzI6FUC5UgQ?t=1326 

 

html.zip

0.36MB

 

---

 

세상을 연결하는 앵커태그

 

글,이미지,박스모델에 페이지 연결기능을 목적으로하는 하이퍼링크는 일명 앵커태그(anchor)라고 한다. 페이지 연결 외에도 현재 문서내 상하이동 기능(위키백과같은 원페이지), 다운로드기능, 전자우편-전화-문자(스마트폰),회원가입등 프로그램기능 수행한다.

 

<a href="https://www.w3schools.com" target="_blank">
Visit W3Schools.com!
</a>

<a href="https://www.w3schools.com" target="_blank">
  <img src="https://www.w3schools.com/tags/logo_w3s.gif">
</a>

 

전화 및 문자와 메일보내기에도 적용된다.

<a href="tel:01010041234">전화상담</a>
<a href="sms:01010041234">SMS문자</a>
<a href="mailto:ongolzin@gmail.com">E-mail</a>

 

현재 문서내 특정 아이디를 지정한 태그(Named Anchor)로 좌표이동(상하)

<!--같은문서내 특정 아이디 위치로 이동-->
<a href="#section2">Go to Section 2</a>

<!--아이디를 지정한 현재 위치가 브라우저 상단에 걸림-->
<h2 id="section2">Section 2</h2>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p> 

 

스타일(CSS)을 지정하면 멋지다!

보통 텍스트에 적용한 앵커태그는 CSS를 이용해서 일반 글씨와 구분해서 글씨색을 바꾸며, 밑줄친 앵커태그를 선을 안보이게하고, 마우스를 올리면 색상을 다르게 보이게하는 스타일을 지정하여 다른 변화를 줄 수 있다.

<style>
a:link { color:green; text-decoration:none; }
a:hover { color:orange; }
</style>

 

a앵커태그의 링크된 글씨들은(a:link) 글씨색을 녹색으로 주고;밑줄보이는 건 하지말자!  또한 앵커태그위에 올리면(a:hover) 글씨색상을 오랜지색으로 바꿔줘라는 스타일을 적용해보자.

 

 

---

이미지맵 어려운건가?

 

한장의 이미지에 여러 링크 - 이미지매핑

한장의 이미지에도 다수의 링크를 걸수 있는 매핑은 실제 웹문서의 크기를 고려해서 작업한 이미지에 원/네모/다각 3개의 형태로 영역(Area)를 만들어서 링크를 줄수 있다.  게임, 문화 콘텐츠의 상단과 하단에 네비게이션이미지로 활용하면 멋진기능이다.

상단에 사용한 이미지맵용 그림

html.zip

0.73MB

 

 

원/네모/다각 3개의 형태를 이용해 Area의 좌표(coords)만들고 구분할 수 있는 이름(alt)과 링크를 걸어서 매핑소스를 만들어서 하이퍼링크에 활용할 수 있는데,  아래 태그를 소개한 문법뿐만 아니라 area의 코드설정이 쉽지 않고 그 방법이 복잡하다.

 

 

생각보다 복잡합니다.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.html">
</map>

 

쉽게 이미지맵 제너레이트를 이용해봐요~

 

참 쉬운~ 이미지맵-넷

이미지맵을 쉽게하는 제너레이터가 있어서 소개하니 아래 링크를 활용해서 이미지맵 코드를 얻어서 여러분의 웹문서에 적용해보세요.  

 

 

https://www.image-map.net/

Free Online Image Map Generator

 

 

만약 1개이상의 이미지맵을 이용하는 경우는 이미지 태그내 usemap="#image-map"와 맵태그내 name="image-map"가 다른 하나의 네임이 더 필요하다.

 

<img src="images/business.jpg" usemap="#image-map2">
     <map name="image-map2">

 

 

하단에 적용할 이미지맵용 그림

 

 

---

링크거는 가장일반적인 방법이지만, 어떤 대상에도 앵커태그를 이용하지 않고 자체내에 링크를 거는 방법이 있습니다. 자바스크립트의 링크처리방법인데, 아래와 같습니다.

 

 

자체창 바뀌는 링크(일명 셀프, 혹은 안써도되는 기본값)

onclick="location.href='address'"

 

새창뜨는 링크(별도창)

onclick="window.open('address')"

 

팝업새창뜨는 링크(별도 지정한 크기의 창)

onclick="window.open('address','window_name','width=430,height=500,location=no,status=no,scrollbars=yes');"

 

현재페이지내 아이프레임등 원하는 네임의 대상뜨는 링크(name="haha")

onclick="haha.location.href='address'"

 

프레임셋의 네임을 대상으로 한 링크(name="mainFrame2")

onclick="top.frames['mainFrame2'].location.href = 'address';"

 

 

적용해보면 아래와 같습니다. (커서모양도 첨부)

<img src="a.jpg" onclick="location.href='address'" style="cursor:pointer">

 

일반적인 방법보다는 짧죠??

<a href="address" target="_blank"><img src="a.jpg"></a>

 

 

JS를 연결하는 방법의 링크

 

Javascript 내용을 하나의 파일에 모아놓은 js파일에 링크관련 펑션을 넣고, 간접적으로 링크를 연결하는 방법은 흔치 않지만 사용할 수 있다. 아래는 Head구문에 삽입한 공통된 js파일이다.

 

<script type="text/javascript" src="js/common.js"></script>

 

 

◆ common.js 내 구성 중 링크관련된 펑션은 아래와 같다.

 

// 메인페이지

function Home(){  location.href = "../home.php";  }

function Admin(){  location.href = "../bbs/login.php?url=%2Fadmin.php";  }

 

// 05 고객센터(2) : 공지사항/질문답변

function Menu0101(){  location.href = "../a1/m0601.php";  }

function Menu0102(){  location.href = "../a1/m0602.php";  }

 

◆ common.js의 링크관련 펑션을 연결하는 방법은 아래와 같다.

 

<span class="flash" onclick="JavaScript:Menu0101()">공지사항</span>

 

JavaScript:Home()

JavaScript:Menu0601()

 

 

 

 

---

More, 더보기를 After로 간편하고 멋지게 표현

 

공지사항 등 일반적인 글씨옆에 위치한 더보기, 자세히보기, more 역할을 하는 작은 버튼형태의 이미지를 누르면 해당 게시판으로 이동한다. 이런 장면 많이 연출되죠?? 글의 앞과 뒤에 붙는  before와 after를 활용하는 방법을 소개합니다.

 

.more:after{content: "+ 바로가기"; font-size: 60%; display: inline-block; padding: 1px 10px; background: red; color: #fff; margin-left: 30px; border-radius: 8px;  vertical-align: top; margin-top: 4px; cursor: pointer;}

.more:hover:after{  background: #000; color: yellow}

 

.mo{font-size: 12px;padding: 1px 10px; background: green; color: #fff; margin-left: 30px; border-radius: 8px;cursor: pointer;vertical-align: middle; }

.mo:hover{ background: #000; color: yellow}

 

 

<div class="sec_title more">공지사항</div>

 

 

<div class="sec_title">알림판 <span class="mo" onclick="window.open('http://cafe.naver.com/ezen042/137')">+ MORE</span></div>