로그인  회원가입  
인포앤북 홈

Chapter 04. 링크와 목록

4-1. 링크와 경로

■ 링크 걸기 : <a> 태그

링크(Link)는 하이퍼링크(Hyperlink)의 줄임말로써 텍스트나 이미지를 클릭하면 특정 웹 페이지로 이동하는 것을 말합니다. HTML에서 링크를 하는 데에는 <a> 태그가 사용됩니다.

메인 페이지(main.html)
main.html
<h3>링크걸기</h3>
<p>
<a href="sub1.html">인터넷이란?</a><br> 
<a href="sub2.html">웹이란?</a><br> 
<a href="sub3.html" target="_blank">HTML이란?</a><br> 
<a href="https://codingschool.info">코딩스쿨</a>
</p>
<h3>이미지에 링크걸기</h3>
<p><a href="https://codingschool.info" target="_blank"><img src="img/logo.png"></a></p>
main.html의 실행 결과
서브 페이지(sub1.html)
sub1.html
<h3>인터넷이란?</h3>
<p>1960년대 미국 국방부의 고등 연구국에서 시작된 인터넷은 전세계
 컴퓨터를 TCP/IP(Transmission Control Protocol/
 Internet Protocol) 통신 규약을 통해 데이터를 주고 받는 
 컴퓨터 네트워크를 말한다.</p>
<p><a href="main.html">메인 화면으로</a></p>
■ 상대 경로와 절대 경로

웹에서 사용되는 URL(Uniform Resource Locator) 주소는 인터넷 상에서 존재하는 자원인 HTML, 이미지, 오디오, 동영상 파일 등의 위치를 의미합니다. URL 주소를 설정하는 방법에는 상대 경로와 절대 경로를 이용하는 방법 두 가지가 있습니다.

1. 상대 경로

상대 경로는 현재의 HTML 문서 파일의 위치를 기준으로 상대적인 위치에 있는 파일을 찾아가는 방식입니다. 다음 예제를 통하여 상대 경로에 대해 알아봅니다.

상대 경로
ex4-1.html
<h2>상대 경로</h2>
<img src="dog1.png">
<img src="./img/dog2.png">
<img src="./img/img2/dog3.png">
<img src="../dog4.png">
ex4-1.html의 실행 결과
2. 절대 경로

절대 경로는 인터넷에서 무일무이한 절대적인 위치의 경로를 의미합니다. http::// 또는 https://로 도메인을 포함한 경로를 의미합니다. 다음 예제를 통하여 절대 경로에 대해 알아봅니다.

절대 경로
ex4-2.html
    <h2>절대 경로</h2>
    <img src="https://codingschool.info/htm5/source/04/img/dog5.png">
ex4-2.html의 실행 결과