반응형
- 링크는 <a> 태그로 정의되고 href 를 속성으로 가진다.
- 형식 : <a href="url">link text</a>
- 기본적으로 링크된 페이지는 현재 브라우저 창에서 넘어가게 되는데,
- 이것을 변경하려면, target 속성을 사용하면 된다.
- target 속성은 링크된 문서를 열 위치를 지정하고, 다음 values 중 하나를 가질 수 있다.
- 이러한 형식을 가진다. <a href=" 링크url " target="_blank"> text </a>
1) _self : 기본값. 현재 윈도우창에서 그대로 링크된 웹페이지를 연다.
2) _blank : 새 윈도우 창을 열어서 웹페이지를 연다. 기존 창은 그대로 남는다.
3) _parent : 현재 프레임의 부모 프레임에서 새 웹페이지가 열린다.
4) _top : 최상위(가장 최고 부모)창에서 열린다.
<Absolute URLs vs. Relative URLs>
- URL 형식에는 다음과 같은 두가지 형식으로 구분된다.
- absoulute URL : "https://www" 를 동반
- relative URL : "https://www" 를 동반 하지 않음.
- ex) <p><a href="/css/default.asp">CSS Tutorial</a></p>
<Image 링크>
- 이미지를 링크로 사용하기 위해선, <img> 태그를 <a> 태그 안에 넣어야 한다.
<이메일 주소 링크>
- href 속성에 mailto: 값을 넣어 이메일 주소를 링크 시켜주면 된다.
- 사용자가 링크를 클릭하면 자동으로 사용자의 이메일 프로그램으로 연결되어 새이메일 작성 화면이 뜬다.
<버튼을 활용한 링크 삽입>
- HTML 버튼을 링크로 사용하기 위해서는 Javascript code를 일부 사용 해야 한다.
<Title>
- title 속성을 사용하면, 링크 위에 마우스를 가져다 놓으면 대체텍스트를 보여준다.
<CSS 활용 - 링크 색상>
- 링크 색상은 다음과 같이 고정된 값으로 정해져 있는데,
- 방문하지 않은 링크 : 밑줄 + 파랑
- 방문한 링크 : 밑줄 + 보라
- 활성화된 링크 : 밑줄 + 빨강
- css를 이용하면, 링크의 색상을 변경할 수 있다.
- <style> </style> 태그로 감싸 링크값을 지정해준다.
- transparent; 는 배경색이 없음을 의미.
ex) a:link 방문하지 않은 링크는 : 초록 + 밑줄 없음
a:visited 방문한 링크는 : 핑크 + 밑줄 없음
a:hover 활성화된 링크는 : 노랑색 + 밑줄 있음
a:active 링크에 마우스를 가져다 대었을 때 : 빨강 + 밑줄 있음
<CSS 활용 - 링크 버튼>
- CSS를 활용하면, 버튼에 스타일을 입힐 수 있다.
- <head> 섹션에 <style> 태그를 삽입. <body>에는 링크 주소 삽입.
< 북마크 생성 >
- 북마크는 웹페이지가 굉장히 길때, 원하는 부분으로 스크롤을 jump 시켜줄 수 있다.
- id 속성을 이용해, 페이지의 북마크를 지정해줄 수 있다. (id="value")
- href 속성을 이용해 북마크의 링크를 지정하면 된다. (href="#value")
반응형
'코딩일지 -언어공부방 > HTML' 카테고리의 다른 글
| HTML Image map | 하나의 사진에 여러개의 링크페이지 삽입하기 (0) | 2022.08.11 |
|---|---|
| HTML Images 이미지 기본 서식 (0) | 2022.08.10 |
| HTML Styles - CSS (0) | 2022.08.08 |
| HTML Colors | 색상 (0) | 2022.08.07 |
| HTML Comments | 주석 표시 (0) | 2022.08.06 |