동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
링크는 거의 모든 웹페이지에서 찾을 수 있습니다. 링크를 통해 사용자는 페이지에서 페이지로 이동할 수 있습니다.
HTML링크 - 하이퍼링크
HTML 링크는 하이퍼 링크입니다.
링크를 클릭하여 다른 문서로 이동할 수 있습니다.
링크위에서 마우스를 움직이면 마우스 화살표가 조금 움직입니다.
** 링크는 텍스트일 필요는 없습니다. 이미지 또는 다른 html요소가 될 수도 있습니다.
HTML 링크 - 구문
HTML에서 링크는 <a>태그로 정의됩니다.
<a href="url">링크할 텍스트</a>
<a href="https://365ok.co.kr/">웹학교</a>href속성은 링크의 목적지 주소(https://365ok.co.kr)을 지정합니다.
링크 텍스트는 보이는 부분(웹학교)입니다.
링크텍스트를 클릭하면 지정된 목적지 주소로 이동합니다.
로컬 링크
위의 예에서는 절대 URL(전체 웹주소)을 사용했습니다.
로컬 링크 (목적지 주소가 같은 사이트에 있는 경우)는 상대 URL(https://....없이)으로 지정됩니다.
<a href="lecture.php">강좌</a>HTML링크 색상
기본적으로 링크는 다음과 같이 표시됩니다.(모든 브라우저에서)
스타일을 사용하여 기본 색상을 변경할 수 있습니다.
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>HTML링크 - target속성
target속성은 링크된 문서를 여는 위치를 지정합니다.
target속성은 다음값중 하나를 가질 수 있습니다.
아래 예제는 새 브라우저 창/탭에서 링크된 문서를 엽니다.
<a href="https://365ok.co.kr/" target="_blank">웹학교로 가자</a>**웹페이지가 프레임에 갇혀 있으면 target="_top"을 사용하여 프레임에서 벗어날 수 있습니다.
<a href="https://365ok.co.kr/" target="_top">웹학교로 가자</a>HTML링크 - 이미지를 링크로 사용
이미지를 링크로 사용하는 것이 일반적입니다.
<a href="html.php">
<img src="html.gif" alt="HTML 강좌" style="width:42px;height:42px;border:0;">
</a>**border:0;ie9 및 이전 버전에서 이미지 주위에 테두리가 표시되지 않도록 추가되었습니다.(이미지가 링크일때).
HTML 링크 - 북마크 만들기
HTML책갈피는 사용자가 웹페이지의 특정 부분으로 이동할 수 있게 하는데 사용됩니다.
웹페이지의 내용이 길어지면 책갈피가 유용할 수 있습니다.
책갈피를 만들려면 먼저 책갈피를 만든 다음 책갈피를 추가해야 합니다.
링크를 클릭하면 페이지가 책갈피가 있는 위치로 스크롤됩니다.
먼저, id속성이 있는 책갈피를 만듭니다.
<h2 id="C4">Chapter 4</h2>그런 다음 동일한 페이지내에서 북마크에 대한 링크를 추가하십시오("Chapter 4로 이동").
<a href="#C4">Jump to Chapter 4</a>또는 다른 페이지에서 북마크("Chapter 4로 이동")에 대한 링크를 추가하십시오.
<a href="html_demo.html#C4">Jump to Chapter 4</a>외부 경로
외부 페이지는 전체 URL 또는 현재 웹페이지와 관련된 경로로 참조할 수 있습니다.
다음 예제는 전체 URL을 사용하여 웹페이지에 연결합니다.
<a href="https://365ok.co.kr/html/html.php">HTML 강좌</a>다음 예제는 현재 웹사이트의 html폴더에 있는 페이지로 연결됩니다.
<a href="/html/html.php">HTML 강좌</a>다음 예제는 현재 페이지와 같은 폴더에 있는 페이지로 연결됩니다.
<a href="html.php">HTML 강좌</a>등록된 댓글이 없습니다.