비전공자를 위한 HTML/CSS-앵거요소

<a>

<a>(anchor 태그)는 a태그, 앵커, 링크 등 여러 이름으로 불립니다.

<a href="http://www.naver.com/" target="_blank">네이버</a>

href 속성

링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 합니다.

href 속성의 값은 링크의 목적지가 되는 URL입니다.

 

target 속성

target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성입니다.

속성값으로는 _self, _blank, _parent, _top이 있습니다.

_self는 현재 화면에 표시한다는 의미로, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작합니다.

_blank는 새로운 창에 표시한다는 의미로 외부 페이지가 나타나게끔 하는 속성입니다.

_parent와 _top은 프레임이라는 특정 조건에서만 동작하는 속성으로,

최근에는 프레임을 잘 쓰지 않기 때문에 따로 다루지 않고 넘어가겠습니다.

 

기타 속성

<a>에는 이 외에도 많은 속성이 있습니다.

아래 링크를 참고해 다루지 않은 나머지 속성을 직접 공부하기를 권장합니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

(참고로 속성 이름 옆 html5 레이블로 표시된 것은 html5 버전이 나오면서 새로 생긴 속성이라는 뜻입니다. 

Obsolete attributes로 표시된 부분은 폐기된 속성들이므로 보지 않으셔도 됩니다.)

 

내부링크

<a>를 통해 만들어진 링크가 꼭 외부 페이지로만 이동하는 것은 아닙니다.

<a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 합니다.

내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자

하는 요소의 id 속성값을 적으면 됩니다.

<a href="#some-element-id">회사 소개로 이동하기</a>

... 중략.

<h1 id="some-element-id">회사 소개</h1>

보통 페이지에 내용이 많아 스크롤이 길어질 경우, 빠르게 화면 최상단으로 이동하고자 할 때

내부 링크를 주로 사용합니다.

웹페이지에서 화면 하단에 있는 'top' 또는 '맨 위로 이동하기' 버튼이 이에 해당합니다.

 

---

 

참고링크

 

 

 

<a>: The Anchor element

https://developer.mozilla.org

The HTML a element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.