HTML에 있어서 어쩌면 가장 중요하고 가장 많이 쓰는(?) 태그 중에 하나인 A태그 기본적인 사용법은 아래와 같다.
1 2 3 4 5 6 |
<a>열리는 태그와 </a> 닫히는 태그 사이에 글 혹은 이미지 등을 삽입한 후 <a>태그의 href 속성에 주소를 입력하면 화면에 출력했을때 <a>안에 있는 내용</a>을 클릭하면 href속성으로 지정한 주소로 이동하게 된다.
href 말고 a태그의 속성은 target이 있고, 아래와 같이 지정해줄 수 있다.
1 2 3 4 5 6 | <html> <head></head> <body> <a href="url주소" target="_blank">스타트코딩 바로가기</a> </body></html> |
target 속성에 지정할 수 있는 값은 _blank, _parent, _self, _top, [name]이 있다. target 속성은 기본적으로 _self로 지정되어 있기 때문에 별도의 속성을 지정하지 않으면, 자동으로 현재의 창에서 페이지를 열게 되어있다. (이해가 잘 안갈경우에는 직접 실습해보길 권장한다.)
_blank : 새창에서 연다.
_parent : 부모창에서 연다.
(예를 들어 인터넷창을 1,2를 열었을 경우 2번에서 _parent를 지정해주면 1번창에 페이지가 표시 된다.)
_self : 자신의 창에서 연다.(기본 속성 target을 지정하지 않을 경우 자동으로 현재 페이지에서 뜬다)
_top : 화면이 여러 프레임(메뉴 콘텐츠 화면 등으로 분할 되어 있을 경우 모두 닫고 전체페이지로 뜬다)
[name] : 태그에 별도로 지정한 name 이름을 target 속성으로 지정하면 페이지 내에서 그 name이 속한 태그가 있는 곳으로 이동한다.
간혹 파란색 링크에 마우스를 올렸을 때 색깔이 바뀌거나 클릭한 후에 색깔이 변한 모습을 본적이 있을 것이다. 그것은 a태그에 아래와 같은 속성을 사용하였기 때문이다.
link : 기본적인 링크 상태로 아직 방문한적이 없거나 아무런 행동도 하기전인 상태를 말한다
visited : 방문한 적이 있는 링크의 상태를 말한다
hover : 마우스 커서가 링크위에 올라가 있는 상태를 말한다
focus : 링크에 키보드등을 이용해서 포커스가 위치해있는 상태를 말한다
active : 마우스를 눌렀다가 놓는 동안의 상태를 말한다
※ 본 게시글은 생활코딩(https://opentutorials.org/course/1058/4786) 자료를 가져와 설명을 보태어 작성하였습니다.
