[html 태그] a태그

2020. 3. 6. 15:39

문서간의 이동을 자유롭게 하는 대표적인 태그가 바로 a태그이다.

href="" 속성을 이용해서 링크를 걸고

해당 링크로 페이지를 이동 혹은 새 창으로 페이지를 띄운다.

html5 이전에 즉, 컨텐츠 모델 적용 전에

a태그는 단순히 inline 태그였기 때문에

a태그 안에 div나 다른 영역들을 넣는 것은 표준에 어긋나는 일이었다.

그렇기 때문에 a태그로 감싸는 영역을 만들 수가 없었다.

<style>
   .item{position:relative; width:150px; height:50px;}
   .item a{position:absolute; top:0; left:0; right:0; bottom:0;}
</style>
<body>
   <div class="item">
      <div class="thmb">
         <img src="썸네일.jpg" alt="썸네일">
      </div>
      <div class="txt">
         <p>썸네일에 대한 설명글</p>
      </div>
      <!-- .item 영역에 링크 걸기 -->
      <a href="#">링크</a>
   </div>
</body>

위의 코드 처럼 특정 영역 안에 a태그를 넣고

그 a태그를 absolute로 띄워서 영역을 덮어 주었다.

하지만 HTML5에 들어서 태그들이 단순히 인라인, 블록으로 나누는게 아니라

태그의 성격과 특성에 따라 나누게 되었고

a태그가 flow content(플로우 콘텐츠)를 품을 수 있게 되었다.

그래서 a태그는 단순한 인라인 속성만 담을 수 있는 태그가 아닌

블록 요소까지도 담을 수 있게 되었다.

2020/02/12 - [HTML] - HTML5 - Content Model (콘텐츠 모델)

HTML5 - Content Model (콘텐츠 모델)

HTML5 이전에는 HTML 태그들을 inline (인라인), block (블록) 이 두 가지의 요소로만 구분을 지었었다. 2020/02/11 - [HTML] - HTML inline(인라인) vs block(블록) 요소 하지만 HTML5에 들어서면서 단순히 인라..

abcdqbbq.tistory.com

※ a태그의 속성

속성	설명
href	연결 할 주소를 지정한다. (절대주소, 상대주소, id값 등...) ex) <a href="https://www.google.com"> - 절대주소 <a href="/menu/index.html"> - 상대주소 <a href="#header"> - 아이디값이 header인 곳으로 이동
target	연결 된 주소로 이동할 때 어떤 방법으로 열 지를 지정한다. - _self : 현재 창에서 링크를 연다 (기본값) - _blank : 새 창에서 링크를 연다 - _parent : 부모 페이지에서 링크를 연다 (iframe 등의 환경에서 사용) - _top : 최상위 부모 페이지에서 링크를 연다 (iframe 등의 환경에서 사용)
title	태그에 대한 설명을 표시한다. (마우스 오버시 title에 적힌 텍스트 노출) ex) <a href="https://www.google.com" title="구글 홈페이지">

저작자표시

'Frontend > HTML' 카테고리의 다른 글

[html 태그] p태그 (0)	2020.03.25
[html 태그] ol, ul 태그 (목록 태그) (0)	2020.03.24
Meta tag (메타 태그) (0)	2020.02.13
HTML5 - Content Model (콘텐츠 모델) (0)	2020.02.12
HTML inline(인라인) vs block(블록) 요소 (0)	2020.02.11

About Web