<a> 태그
| 속성 | 설명 |
| href | 링크한 문서나 사이트의 주소 지정 |
| target | 링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정 |
| download | 링크한 내용을 보여주는 것이 아니라 다운로드 |
| rel | 현재 문서와 링크한 문서의 관계를 알려줌 |
| hreflang | 링크한 문서의 언어 지정 |
| type | 링크한 문서의 파일 유형을 알려줌 |
href 속성 - 링크만들기
<!-- 텍스트 링크-->
<a href="링크할 주소" [속성="속성 값"] 텍스트 </a>
<!-- 이미지 링크-->
<a href="링크할 주소" [속성="속성 값"] <img src="이미지 파일 경로"> </a>
텍스트 링크의 밑줄과 글자 색 바꾸기
-텍스트 링크는 기본적으로 밑줄이 있는 파란색 글자로 표시됨
- 사이트 디자인에 맞게 색상을 바꾸고 밑줄을 없앨 수 있음 (CSS 사용)
<style>
a{
text-decoration:none;
color:black;
}
</style>
target 속성 - 새 탭에서 링크 열기
| 속성값 | 설명 |
| _blank | 링크 내용이 새 창이나 새 탭에서 열림 |
| _self | target 속성의 기본 값으로 링크가 있는 화면에서 열림 |
| _parent | 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시 |
| _top | 프레임을 사용했을 때 프레임에서 벗어나 링크내용을 전체화면에 표시 |
예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>텍스트 링크</title>
<style>
a {
text-decoration:none; /* 링크 글자 밑줄 없애기 */
color:green; /* 링크 글자 색깔 바꾸기 */
}
</style>
</head>
<body>
<h2>텍스트 링크 만들기</h2>
<p><a href="https://bskwak.tistory.com/">IT 공부 홈페이지(현재화면)</a></p>
<p><a href="https://bskwak.tistory.com/"target="_blank">IT 공부 홈페이지(새 창/새 탭)</a></p>
</body>
</html>
왼쪽과 같은 화면이 나오고 초록색 글자를 선택하면 해당 링크로 연결됨
문서 안에 다른 문서 넣기(iframe)
- 현재 문서에 다른 문서를 포함시키거나 자바스크립트를 이용해 팝업 창을 열도록 했을 때
현재문서 = 부모문서, <iframe>으로 삽입된 문서/팝업문서 = 자식문서
- 자식문서에서 링크할 때, target을 _parent속성으로 지정 -> 부모 문서 창에 표시 O
<!-- 부모 문서 parent.html -->
<iframe src = "child.html" width="600" height="400"></iframe>
<!-- 자식 문서 child.html -->
<p><a href= "주소" target="_top"> 텍스트</a></p>
한 페이지 안에서 점프하는 앵커(anchor) 만들기
- 페이지가 긴 웹문서에서 특정 요소를 클릭하면 그 위치로 한번에 이동시켜줌
- ex. 목차에서 단원 선택하면 이동되는 것
- 이동하고 싶은 위치마다 id속성을 이용해 앵커를 만들고 각각 다른 이름 지정
-> <a>태그의 href속성을 사용해 링크, 앵커이름앞에 #을 붙여 앵커임을 표시
- jQuery Mobile을 이용해 모바일 웹사이트나 웹앱을 만들 때 자주 사용
<태그 id = "앵커이름"> 텍스트 또는 이미지 </태그>
<a href = "#앵커이름"> 텍스트 또는 이미지 </a>예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<h1>앵커 만들기</h1>
<p>앵커란?~~</p>
<ul id="menu">
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>1-1 </p>
<p>1-2 </p>
<p>1-3 </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<p>2-1 </p>
<p>2-2 </p>
<p>2-3 </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>3-1 </p>
<p>3-2 </p>
<p>3-3 </p>
<p><a href="#menu">[메뉴로]</a></p>
</body>
</html>
'Web > HTML+CSS+JavaScript' 카테고리의 다른 글
| JavaScript 기본 문법과 제어문 (0) | 2020.07.21 |
|---|---|
| [HTML] 기본문법 태그 (0) | 2020.07.13 |
| [HTML+CSS3] 이미지삽입하기 (0) | 2020.05.19 |
| [HTML+CSS3] 표를 만드는 태그 (0) | 2020.05.19 |
| [HTML+CSS3] 목록을 만드는 태그 (0) | 2020.05.19 |
