<a> 태그는 하이퍼링크를 걸어주는 태그입니다.
링크는 모든 브라우저에서 다음과 같이 표시됩니다.
- 방문하지 않은 링크는 밑줄과 파란색
- 방문한 링크는 밑줄과 보라색
- 활성 링크는 밑줄과 빨간색
속성
href : 클릭했을 때 이동할 링크
target : 링크를 여는 방법
target 에는 다음과 같은 속성이 쓰입니다.
_self | 현재 페이지, 기본값으로 생략 가능 |
_blank | 새 탭으로 오픈 |
_parent | 부모 페이지로 오픈 |
_top | 최상위 페이지로 오픈 |
프레임이름 | 명시된 프레임에서 오픈 |
<a href="https://www.naver.com" target="_blank">네이버로 이동</a>
예를 들어 다음과 같이
href 에 네이버 주소를 입력하고 target에는 "_blank"를 입력하고 실행한 결과입니다.
방문하지 않아 파란색 밑줄로
네이버로 이동이라는 글자에 하이퍼링크가 걸렸습니다.
클릭하여 네이버로 이동해보겠습니다.
_blank를 사용했기 때문에 새 창으로 네이버가 열리는 것을 볼 수 있습니다.
네이버를 방문하여
보라색 밑줄로 바뀐 모습입니다.
<a href="https://www.naver.com"><img src="img/banner01.jpg" alt="링크가 걸린 그림"></a>
글자 뿐만 아니라 이미지에도 링크를 걸 수 있습니다.
<p><a href="https://www.naver.com">네이버로이동</a></p>
뿐만 아니라
<a> 태그를 다른 태그 안에서 사용할 수도 있습니다.
'웹개발 > HTML+CSS' 카테고리의 다른 글
[HTML+CSS] margin, padding 속성 비교 (0) | 2021.09.24 |
---|---|
HTML 레이아웃 구조 만들기(웹디자인기능사 실기 예시) (0) | 2021.09.13 |
HTML 폼양식, <input>, <select>, <textarea>, <button> (0) | 2021.09.11 |
HTML 테이블 삽입하기, <table>, <th>, <tr>, <td>, collapse (0) | 2021.09.09 |
HTML 이미지 삽입하기, <img> 속성 (width, height, src, alt, title) (0) | 2021.09.07 |