a tag => Link태그 href속성 => 다른 페이지(웹문서)로 이동 가능하도록 해주는 속성
<a href="url경로포함.웹문서.확장자명까지" [target="다른 페이지가 열리는 방법 기술"]> 컨텐츠 </a>
<a href="url주소값" [target="다른 페이지가 열리는 방법 기술"]> 컨텐츠 </a>
href속성의 천성 - 공통속성 : 실선 밑줄 - 바로 보기만하는 상태 : link상태 => 글씨 색상 : 파란색 - 누르고 있는 상태(활성화된 상태) : active상태 => 글씨 색상 : 빨간색 - 클릭하고 페이지 이동 후 다시 본 상태(방문하고 난 후 상태) : visited상태 => 글씨 색상 : 보라색(자주색)
절대경로 : 실제 파일이 들어있는 경로를 드라이버명부터 폴더명들 포함, 파일명.확장자명까지 처음부터 끝까지 기술하는 방법
상대경로 : 나의 웹문서파일을 기준으로 내가 찾는 파일(웹문서 또는 이미지파일 등등) 상대적인 위치를 기술하는 방법
상위 : ../
동일위치 : ./ 또는 기술안함
target속성값
target="_self" 디폴트
현재 창에서 새로운 페이지를 보여주세요.
target="_blank"
새 창에서 새로운 페이지를 보여주세요.
target="_parent"
나(자식팝업창)의 부모창에서 새로운 페이지를 보여주세요.
target="_top"
나(자손팝업창)의 최고 조상창에서 새로운 페이지를 보여주세요.
a Tag, href
<!DOCTYPE html>
<html>
<head>
<title>a Tag</title>
</head>
<body>
<p>아래의 글씨를 클릭하면 네이버로 이동됩니다.</p>
<!-- target속성값:
_self(디폴트) : 현재 창에서 새로운 페이지를 보여주세요.
_blank : 새 창에서 새로운 페이지를 보여주세요
_parent : 나(자식팝업창)의 부모창에서 새로운 페이지를 보여주세요.
_top : 나(자손팝업창)의 최고 조상창에서 새로운 페이지를 보여주세요-->
<!-- <a hred="https://www.naver.com/">
<h1>네이버 Link</h1>
</a>
<h1><a href="https://www.naver.com/" target="_blank">네이버 Links</a></h1> -->
<h1>a태그의 target속성값</h1>
<h2><a href="13aTag1.html" target="_blank">blank</a></h2>
<h2><a href="https://www.daum.net/" target="_self">self</a></h2>
<h2><a href="https://www.naver.com/" target="_parent">parent</a></h2>
<h2><a href="https://www.naver.com/" target="_top">top</a></h2>
<a href="https://www.naver.com" style ="width:500px; height:300px;
margin:50px; padding:50px;">네이벙</a>
</body>
</html>
bookmark (책갈피)
<a href="#bookmark"> <!-- a태그인 경우만 #이라는 기호를 id속성과 name속성을 부를 수 있다. a태그가 아닌 경우는 id속성만 부를 수 있다. -->
<a name="bookmark">
bookmark
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Links</title>
</head>
<body>
<h1>페이지 책갈피</h1>
<a href="#bookmark"><p>제목 15로 갑시다!!!</p></a>
<!-- a태그인 경우만 #이라는 기호를 id속성과 name속성을 부를 수 있다.
a태그가 아닌 경우는 id속성만 부를 수 있다. -->
<h2>제목1</h2> <p>첫 번째 단락</p>
<h2>제목2</h2> <p>두 번째 단락</p>
<h2>제목3</h2> <p>세 번째 단락</p>
<h2>제목4</h2> <p>네 번째 단락</p>
<h2>제목5</h2> <p>다섯 번째 단락</p>
<h2>제목6</h2> <p>여섯 번째 단락</p>
<h2><a name="bookmark">제목7</a></h2> <p>일곱 번째 단락</p>
<h2>제목8</h2> <p>여덞 번째 단락</p>
<h2>제목9</h2> <p>아홉 번째 단락</p>
</body>
</html>
