고정 헤더 영역
상세 컨텐츠
본문
반응형
<a> 태그, href 속성 - 링크 만들기
- 웹 사이트에서 클릭했을 때 다른 페이지로 넘어가지 않는 요소가 거의 없을 정도로 링크는 웹 상에서 널리 사용되고 있다. '메뉴'에도 링크가 적용되어있다. 링크를 만드는 <a> 태그는 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 된다.
<a href="#test1">텍스트</a>
<a href="#test2"><img src="https://cdn.pixabay.com/photo/2021/03/22/13/48/anemone-6114655_1280.jpg"></a>
- 속성
- href : 링크한 문서나 사이트의 주소를 입력한다.
- target : 링크한 내용이 표시될 위치(현재 창 또는 새창)를 지정한다.
- download : 링크한 내용을 보여주는 것이 아니라 다운로드 한다.
- rel : 현재 문서와 링크한 문서의 관계를 알려준다.
- hreflang : 링크한 문서의 언어를 지정한다.
- type : 링크한 문서의 파일 유형을 알려준다.
텍스트 링크의 글자 색상 바꾸기
- 기본적으로 <a> 태그를 사용하면 파란색 밑줄로 표시된다. 하지만 스타일(css)을 적용해서 예쁘게 꾸며줄 수 있다.
<!DOCTYPE content-Type="text/html; charset=utf-8">
<html>
<head>
<meta charset="utf-8">
<title>링크 태그</title>
<style>
a {
text-decoration:none;
color: black;
}
</style>
</head>
<body>
<h3>목록</h3>
<p><a href="#a1">애국가 1절 </a></p>
<p><a href="#a2">애국가 2절 </a></p>
<p><a href="#a3">애국가 3절 </a></p>
<p><a href="#a4">애국가 4절 </a></p>
<p id="a1">
동해 물과 백두산이
마르고 닳도록
하느님이 보우하사
우리나라 만세
</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p id="a2">
남산 위에 저 소나무
철갑을 두른 듯
바람 서리 불변함은
우리 기상일세
</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p id="a3">
가을 하늘 공활한데
높고 구름 없이
밝은 달은 우리 가슴
일편단심일세
</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p id="a4">
이 기상과 이 맘으로
충성을 다하여
괴로우나 즐거우나
나라 사랑하세
</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>- <a> 태그에 스타일을 적용할 때 <head>와 </head> 사이에 <style> 태그 안에 적용을 해준다.
실행 화면
target 속성 - 새 탭에서 링크 열기
- _blank : 링크 내용이 새 창이나 새 탭에서 열린다.
- _self : target 속성과 기본 값으로 링크가 있는 화면에 열린다.
- _parent : 프레임을 사용했을 경우 링크 내용을 부모 프레임에 표시한다.
- _top : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다.
<!DOCTYPE content-Type="text/html; charset=utf-8">
<html>
<head>
<meta charset="utf-8">
<title>링크 태그</title>
</head>
<body>
<a href="https://www.naver.com" target="_blank">네이버</a>
</body>
</html>실행 화면
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [HTML 기초] 사용자 입력을 위한 <input> 태그 - 1 (0) | 2021.04.02 |
|---|---|
| [HTML 기초] 폼 만들기 (0) | 2021.03.31 |
| [HTML 기초] 목록을 만드는 태그 (0) | 2021.03.29 |
| [HTML 기초] 텍스트를 한 줄로 표시하는 태그 (0) | 2021.03.28 |
| [HTML 기초] 테스트를 덩어리로 묶어 주는 태그 (0) | 2021.03.27 |
댓글 영역