a - html/css 독학하기

설명

The HTML Anchor Element (<a>) defines a hyperlink, the named target destination for a hyperlink, or both.

문서에서 문서로 이동할 수 있는 링크를 표현한다.

Usage Context

Permitted content	Transparent, containing either flow content or phrasing content.
Tag omission	None, must have both a start tag and an end tag
Permitted parent elements	Any element that accepts phrasing content, or any element that accepts flow content.
Normative document	HTML 5, section 4.6.1; HTML 4.01, section 12.2

속성

본 엘리먼트는 전역속성을 지원한다.

charset - HTML5부터 폐지됨

This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. The default value is ISO-8859-1.

링크된 웹페이지의 문자코드를 기술한다. 이 값으로는 RFC 2045 에 정의된 문자집합을 사용한다. 이 속성을 사용하지 않거나, 아무 값도 지정하지 않으면 기본 값으로 ISO-88590-1 의 문자집합을 사용한다.

참고 : This attribute is obsolete in HTML5 and should not be used by authors. To achieve its effect, use the HTTP Content-Type header on the linked resource.

이 속성은 HTML5부터 폐지 되었다. 이 속성 대신에 링크의 대상이 되는 리소스(주로 웹페이지)의 HTTP Content-Type을 지정한다. HTTP Content-Type은 웹브라우져가 웹서버에게 리소스를 요청할 때 웹서버는 header라는 데이터를 브라우저로 반환하는데, 이 데이터에 포함되어 있다.

coords - html4 only, obsolete in html5

For use with object shapes, this attribute uses a comma-separated list of numbers to define the coordinates of the object on the page.

이미지와 같은 하나의 객체를 가상으로 분할해서 분할된 부분별로 링크를 부여한다. w3schools.com의 예제를 보자. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_a_coords 이 예제에서는 planets.gif라는 하나의 이미지를 여러개의 <a>태그를 이용해서 분할하고 있는 예제를 보여준다.

datafld - Non-standard

This attribute specifies the column name from that data source object that supplies the bound data.

bound data가 제공하는 데이터의 컬럼 이름을 지정한다.

여기서 말하는 bound data와 data source가 어떤 datasource를 의미하는지 모르겠군요.

참고 : Usage note: This attribute is non-standard and should not be used by authors. To achieve its effect, use scripting and a mechanism such as XMLHttpRequest to populate the page dynamically

Support	Gecko	Presto	WebKit	Trident
Support	Not implemented	Not implemented	Not implemented	IE4, IE5, IE6, IE7 (Removed in IE8)
Normative document	Microsoft's Data Binding: dataFld Property (MSDN)

href

This is the single required attribute for anchors defining a hypertext source link. It indicates the link target, either a URL or a URL fragment, that is a name preceded by a hash mark (#), which specifies an internal target location (an ID) within the current document. URLs are not restricted to Web (HTTP)-based documents. URLs might use any protocol supported by the browser. For example, file, ftp, and mailto work in most user agents.

앵커(a 태그)를 이용해서 문서와 문서를 연결할 때 사용하는 속성. 이 속성의 값으로는 문서의 위치를 나타내는 URL과 문서 내에서의 위치를 나타내는 URL 프래그먼트(fragment)가 사용된다.

URL 프래그먼트는 URL의 가장 마지막에 위치하는데 해쉬(#)를 구별자로 한다. 이를테면 다음 URL을 입력하면 본 문서가 열리는데, 화면이 스크롤 되서 href 속성을 사용자에게 보여준다.

http://opentutorials.org/course/8/270#href

이것은 URL 끝의 #href 때문인데, 그것은 이 문서의 href 부분이 아래와 같이 id값을 가지고 있기 때문이다. URL 프래그먼트는 사용자를 특정 문서내의 특정한 위치로 이동시켜준다.

URL은 웹을 위한 규약(protocol)인 HTTP만을 위해서 사용될 뿐 아니라, 파일을 전송하기 위한 규약인 ftp, 이메일을 사용하기 위한 규약인 mailto와 같은 규약에서도 사용된다.

hreflang

This attribute indicates the language of the linked resource. It is purely advisory Allowed values are determined by BCP47 for HTML5 and by RFC1766 for HTML4. Use this attribute only if the href attribute is present.
media HTML5

링크된 웹페이지의 언어를 명시하는 속성. 이 속성은 a 태그에 href 속성이 사용되는 경우에만 사용한다. 현재 이 속성을 지원하는 브라우저는 없다.

media - html5

This attribute specifies the media which the linked resource applies to. Its value must be a media query. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on.

링크가 가르키는 문서가 어떤 미디어(디바이스)에 최적화 되었는가를 표시하는 속성. 예를들어, 링크로 연결된 문서를 화면에 표시할 때 브라우져는 이 값을 참조해서 어떤 스타일시트를 이용해서 페이지를 표시할지를 결정할 수 있다.

여러개의 값을 조합해서 사용할 수 있다. 예를들어, 아래의 코드는 http://opentutorials.org 를 화면에 표시할 때 프린트 미리보기 모드로 화면에 표시할 것과 해상도는 300dpi를 사용할 것을 브라우저에게 명령할 수 있다.

 <a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">HTML5 a media attribute.</a>

이 값은 href 속성이 명시된 경우만 사용할 수 있다.

이 값으로 사용될 수 있는 데이터에 대한 자세한 내용은 아래의 링크를 통해서 찾아볼 수 있다.

http://www.w3schools.com/html5/att_a_media.asp

참고 :
In HTML 4, only simple white-space-separated list of media description literals, i.e. media types and groups, where defined and allowed as values for this attribute, like print, screen, aural, braille, ... HTML 5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.
Browsers not supporting the CSS3 Media Queries won't necessary recognized the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.

method - Non-standard

The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. Methods Property (MSDN)

객체가 지원하는 HTTP 메소드를 열거한다. 현재 대부분의 브라우저가 지원하지 않는다. Methods Property (MSDN)

name - HTML4 only, obsolete in HTML5

This attribute is required in an anchor defining a target location within a page. A value for name is similar to a value for the id core attribute and should be an alphanumeric identifier unique to the document. Under the HTML 4.01 specification, id and name both can be used with the <a> element as long as they have identical values.

참고 : This attribute is obsolete in HTML5, use global attribute id instead.

예를들어 <a href="http://somewhere.com#summary">서머리</a> 라는 링크는 이 링크를 클릭한 사용자를 http://somewhere.com에 위치하는 문서 내에 <a name="summay"></a> 코드가 위치하는 부분으로 사용자를 스크롤 시킨다. 이 속성은 HTML 4.01 스팩에서는 id 속성과 name 속성 모두 이러한 용도로 사용될 수 있다.

참고 : 이 속성은 HTML5에서 폐지 됐다. 대신 전역 속성인 id 속성을 사용한다.

ping - 사용안함

The support for "ping" was disabled starting with Firefox 3 beta 3.

Firefox 3 beta 3 부터 폐지된 속성이다.

rel

For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of relationship values. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the href attribute is present.

href 속성을 가지고 있는 앵커에서 사용되는 속성이다. 현재 문서와 href가 가르키는 문서와의 관계를 정의한다. 값이 여러개인 경우는 ,(콤마)로 구분한다. 하지만 실제로 브라우저가 이 값에 따라서 다른 동작을 하는 것은 아니고, 검색엔진이 참고적으로 사용한다. 이 속성의 값으로 올 수 있는 값은 아래와 같다.

alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag

rev - HTML4부터 지원, HTML5에서 폐지

This attribute specifies a reverse link, the inverse relationship of the rel attribute. It is useful for indicating where an object came from, such as the author of a document.

현재 문서와 링크된 문서간의 관계를 정의하는 속성으로, rel 속성과는 반대의 관계를 나타낸다.

shape - HTML4, obsolete in HTML5

This attribute is used to define a selectable region for hypertext source links associated with a figure to create an image map. The values for the attribute are circle, default, polygon, and rect. The format of the coords attribute depends on the value of shape. For circle, the value is x,y,r where x and y are the pixel coordinates for the center of the circle and r is the radius value in pixels. For rect, the coords attribute should be x,y,w,h. The x,y values define the upper-left-hand corner of the rectangle, while w and h define the width and height respectively. A value of polygon for shape requires x1,y1,x2,y2,... values for coords. Each of the x,y pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value default for shape requires that the entire enclosed area, typically an image, be used.

참고 : It is advisable to use the usemap attribute for the <img> element and the associated <map> element to define hotspots instead of the shape attribute.

이미지 맵이란 하나의 이미지를 여러개의 구역으로 나눠서 구역마다 링크를 부여하는 방법이다. Shape 속성은 이미지 맵을 만들 때 사용되는 속성으로 구역에 대한 모양을 정의한다. 값으로는 default, circle, polygon, rect가 올 수 있다. 이 값은 coords 속성과 함께 사용되는데 coords는 ','(콤마)로 구분된 복수의 값이 연속적으로 사용된다. 예를들면 아래와 같다.

<a href="venus.htm" shape="circle" coords="124,58,8">Venus</a>

coords 값의 의미는 shape의 값에 따라서 달라진다. sharp 값에 따른 coords 값의 형식이다.

sharp	설명	coords
circle	원	x축, y축, 반지름
polygon	다각형	x1, y1, x2, y2...
rect	사각형	x축, y축, 넓이, 높이

target

This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:

_self: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
_blank: Load the response into a new unnamed HTML4 window or HTML5 browsing context.
_parent: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
_top: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

Use this attribute only if the href attribute is present.

링크된 문서가 열릴 때 어떤 방식으로 열릴 것인가를 지정하는 속성이다. 이 속성의 값으로 올 수 있는 값은 미리 정의 된 것이 있고, 사용자가 지정할 수 있는 것이 있다. 사용자가 지정한 값은 프래임의 이름이 오고, 아래는 미리 정의된 값들이다. 생활코딩 HTML 수업 참고

_self : 현재 문서가 위치한 윈도우에서 페이지가 로드된다.
_blank : 탭 브라우징이 지원되는 브라우저에서는 새탭에서 페이지가 로드되고, 그렇지 않을 경우 새 창에서 페이지가 로드된다.
_parent : 현재 페이지가 프레임 안에 위치하고 있다면 현재 페이지를 로드 한 부모 페이지에 페이지가 로드된다.
_top : 현재 윈도우에 페이지가 로드된다. 만약 현재 페이지가 프레임에의해 로드된 것이라면 모든 프레임을 없애고 현재 윈도우에 페이지가 로드된다.

type

This attribute specifies the media type in the form of a MIME type for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Use this attribute only if the href attribute is present.

링크된 문서의 MIME type을 지정한다. MIME type이란 리소스의 형태를 지정한 것인데, 이를테면 gif인 경우 image/gif, PDF인 경우 application/pdf와 같은 형식이다. 현재는 이것이 부가적인 정보 수준에서 사용 되지만 미래의 브라우저에서는 연결된 문서가 어떤 타입인지를 사용자에게 미리 보여주는 방식으로 사용될 것이다. 이를테면 사운드 데이터인 wav의 MIME type은 audio/wav인데 이 값이 type으로 지정되면 링크에 작은 스피커 아이콘을 표시할 수 있을 것이다. 이 속성은 href 속성이 있는 경우에만 사용한다. MIME type은 아래 링크를 참조한다. http://www.iana.org/assignments/media-types/index.html

urn - 비표준

This supposedly Microsoft-supported attribute relates a uniform resource name (URN) with the link. While it is based on standards work years back, the meaning of URNs is still not well defined, so this attribute is meaningless. urn Property (MSDN)

링크에 URN을 정의하는 것으로 Microsoft에서 지원하던 속성이다. 현재는 URN이 제대로 지원되지 않기 때문에 이 속성은 의미가 없다.

DOM Interface

This element implements the HTMLAnchorElement interface.

<a> 엘리먼트는 HTMLAnchorElement 인터페이스를 구현한다.

예제

<!-- anchor linking to external file -->
<a href="http://www.mozilla.com/">
External Link
</a>

호환성

Desktop
기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Safari
기본적인 지원	지원	지원	지원	지원

Mobile
기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원	지원	지원	지원	지원	지원

Notes

The following are reserved browser key bindings for the two major browsers and should not be used as values to accesskey: a, c, e, f, g, h, v, left arrow, and right arrow.

HTML 3.2 defines only name, href, rel, rev, and title.

The target attribute is not defined in browsers that do not support frames, such as Netscape 1 generation browsers. Furthermore, target is not allowed under strict variants of XHTML but is limited to frameset or transitional forms.

It is often the case that an anchor tag is used with the "onclick" event. In order to prevent the page from refreshing, href is often set to either "#" or "javascript:void(0)". Both of these values can lead to some unexpected errors when copying links and opening links in a new tab and/or window. Be aware of this for usability reasons, and when users do use anchor tags and you prevent default behavior.

a, c, e, f, g, h, v, left arrow, right arrow는 메이저 브라우저에서 사용이 예약 되어 있기 때문에 accessKey로 사용하지 않는다.

HTML 3.2 에서는 name, href, rel, rev 그리고 title 속성만을 사용한다.

target 속성은 프레임을 지원하지 않는 네스케이프 1과 같은 브라우저에서는 지원하지 않는다. 또한 프래임셋이 지원되지 않는 엄격한 XHTML이나 transitional forms 에서도 target 속성을 지원하지 않는다.

코스 전체목록

a

설명