HTML 그림링크삽입, 새창띄우기 방법

이제 HTML의 페이지 이동에 관련한 내용을 알아보겠습니다.

링크라는 것은 현재의 페이지에서 다른 곳으로

연결한다는 의미로 결국 이동한다는 뜻이 되겠습니다.

 

또한 링크 시에 원래의 창과 새창을 띄워서 이동하는 방법을

모두 살펴보도록 할게요.

 

1. 글자태그에 링크삽입하기

 

<a href="이동할 링크의 주소"> 문자 </a>

 

위는 글자에 링크를 거는 태그입니다.

링크주소와 문자 부분을 변경해서 자신이 원하는 상태로 만들 수 있습니다.

 

2. HTML로 그림링크삽입하기

 

<a href="이동할 링크의 주소"><img src="이미지 주소"></a>

 

이미지에 링크를 거는 것은 두 가지의 경로를 지정해주어야 합니다.

핑크색 부분의 링크는 다음 페이지의 경로를 정해주어야겠죠.

녹색 부분의 링크는 이미지의 경로를 정해주면 되겠습니다.

 

여기서 주소가 정확하지 않으면,

액박이 뜰 수 있으므로, 정확하게 지정해주어야 합니다.

자신의 컴퓨터에는 보이는 데 웹상에서는 보이지 않는 경우는

경로를 잘못 지정한 경우이니,

이런 상황이 생기지 않도록 컴퓨터의 이미지를 다른 폴더에 옮겨도

정확하게 잘 보이는 지 확인해보아야 합니다.

 

3. HTML로 새창띄우기

 

1) 폰트에 팝업창 링크걸기

<a href="javascript:na_open_window('win', '이동할 링크의 주소', 0, 0, 300(가로폭), 200(세로폭), 0, 0, 0, 0, 0);" target="_self"> 문자 </a>

 

문자를 클릭했을 때 새로운 창이 뜨면서 다른 주소로 이동하는 태그입니다.

다른 부분은 만질 필요가 없고 주소와 문자 부분만 수정해주면 되겠습니다.

 

녹색의 숫자부분은 팝업창의 가로와 세로의 길이에 해당합니다.

이 부분의 크기를 조절해주면 자신이 원하는 창을 띄울 수 있습니다.

 

2) 이미지에 팝업창 링크걸기

<a href="javascript:na_open_window('win', '이동할 링크의 주소', 0, 0, 300(가로폭), 200(세로폭), 0, 0, 0, 0, 0);" target="_self"><img src="이미지 주소"></a>

 

이것은 그림을 클릭 했을 때 팝업창이 뜨는 경우입니다.

위의 문자 부분에 이미지 주소를 불러오는 태그가 들어간 것만 차이가 나고

크게 달라진 것은 없습니다.

 

그다지 어렵지 않으시죠?

한번 해보시면 태그만 복잡해보이지,

실제로는 컴퓨터를 조금만 아시는 분도 쉽게 이해가 가능하실 것입니다.