[하이퍼텍스트와 속성]
- 다른 웹페이지나 웹페이지 내부의 특정 위치로 이동할 때 사용한다.
- 링크를 걸고자 하는 부분에 시작점에 <a> 끝에 </a> . 즉 <a>라는것은 태그 안쪽에 있는 부분이 링크라는 사실을 브라우저에 알려주는 태그.
- a태그를 사용할 때 꼭 필요한 속성은 href 이다. <a href = “링크주소”> </a>
- 새로운 탭이 열리면서 페이지가 열리게 하고 싶을 때 , <a href = “ 링크주소 “ target =“_blank”> </a>
- href 의 속성값으로 #(더미 링크), 상대경로, 절대경로, URL 경로, 아이디경로,메일 경로, 전화 경로(모바일) 등을 사용할 수 있다.
-<a>태그는 외부뿐만 아니라 내부 웹페이지에서도 연결이 가능하다. 이 기능을 북마크(책갈피)라고 하는데
이것을 가능케 하는것이 id속성이다. 또한 top,bottom 값을 이용해서 스크롤바를 사용하지 않고 화면의 최상단,최하단으로 이동이 가능하다.
문법 : <a id=”이동위치이름”> 이동할 위치</a>
<a href=”#이동위치이름”> 위치 이동 클릭</a>
-a태그는 인라인형식 (inline형식: 좌 >우) 으로 배치된다
-대부분의 형식은 블록형(block)형식 (위>아래)으로 배치
-인라인형식 (inline형식: 좌 >우) 으로 : a태그, img태그, span태그, input태그
인라인 형식은 레이아웃 관련된 속성이 안먹힌다, 그래서 인라인형 박스는 블록형박스로 감싼다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이퍼 링크 태그</title>
<style>
/* 아이디 선택자(Selector: 요소를 선택한다.) */
/* 선택자{스타일속성:스타일값; 스타일속성:스타일값;} */
#box{
width:300px; height:1500px; margin-top:2000px;
background:#FC0;
}
</style>
</head>
<body>
<ul>
<li><a href="a_link/index.html">메인 페이지</a></li>
<li><a href="a_link/sub01.html">서브 페이지01</a></li>
<li><a href="a_link/sub02.html">서브 페이지02</a></li>
</ul>
<ol>
<li><a href="a_link/index.html">메인 페이지</a></li>
<li><a href="a_link/sub01.html">서브 페이지01</a></li>
<li><a href="a_link/sub02.html">서브 페이지02</a></li>
</ol>
<ul>
<li><a href="#box">내부링크</a></li>
</ul>
<div id="box"></div>
</body>
</html>'Html' 카테고리의 다른 글
| 07. 공간분할태그 (0) | 2022.09.20 |
|---|---|
| 06. 테이블태그 (0) | 2022.09.20 |
| 04.시맨틱태그 (0) | 2022.09.20 |
| 03.웹 콘텐츠를 저장하는 태그 (0) | 2022.09.20 |
| 01. Html 기본문서 (0) | 2022.09.20 |