<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>

 

저작자표시 비영리 변경금지 (새창열림)

'HTML+CSS+JS' 카테고리의 다른 글

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

티스토리툴바