HTML a태그 속성(href, target,id 속성) 뽀개기 02

HTML a태그 속성(href, target,id 속성)

 

 html의 a태그라고하면 기본적으로 우리가 인터넷에서 쓰는 링크를 생각하면되겠습니다. 속성이라고 하는 이 a태그를 이용하게 되면 간단하게 클릭만 하면 해당 주소로 이동할 수 있게 할 수 있습니다. (텍스트나 이미지를 클릭해서 이동이 가능하게 해준다.)

 링크를 걸기위해서는 속성으로는 href를 사용해서 위와 같이 쓰시면되고, target속성은 해당 속성링크를 눌렀을 때 창을어디다가 띄울지 정하는 거라고 보면 되겠습니다.

<a>태그속성

• href 속성

a태그에서 href 값으로 정해준 주소로 이동한다.

Hypertext Reference의 약자이기도 하다.

• target 속성

웹페이지에서 새창에서 열거나 현재창에서 여는 것을 정할 때 쓰는 속성이다.

_self, _parent, _top, _blank 설정이 있고 각각 현재윈도우, 현재윈도포함상위프레임, 최상위프레임, 새창에서 출력을 한다.

이때 기본값은 _self로 현재창에서 열리도록 되어있다.

• id속성을 이용한 이동
  

 하이퍼레퍼런스랑 타겟이 끝인 줄 알았는데 id라는 속성도 있습니다. id속성은 이해하기 쉽게 설명한다면 웹툰이나 어떤게시글을 볼 때 끝까지 다 내려갔을 때 Top이라고 누르면 맨위로 이동하는 녀석이 있는데 이것과 비슷한 거라고 생각하면됩니다.

 위 사진과같이 a태그로 아이디를 정해놓고 href태그를 이용해서 아이디이름 앞에 #을 붙여 넣게되면 클릭시 입력한 id부분으로 이동합니다. 한 번 실습을 해보자면

 티스토리는 직접 본인 블로그의 소스를 볼 수 있는데 여기서 막 뒤져봤습니다. 여러 id들이 있는데 본문제목 위에있는 dkWrap이라는 녀석을 가지고 밑에 링크를 하나만들어봤습니다. 눌르면 어떻게 될까요?

맨위로 가버리기!

 어떤가요? 맨위로 잘 이동이 되나요 아니면 안되나요? 아마 될겁니다! 소스는 궁금하시다면, 아래와 같이 되어있습니다.

 그리고 위에서 티톨이소스를 보시면 알 수 있듯이 id소스는 a태그 외에도 div태그 등에서 사용이 가능합니다.

 어떤가요? 간단하죠 사실 링크적용하는 건 너무나도 쉬운데 소스로 보면 좀 생소하실 수도 있습니다. 그래도 몇번 실습을 하신다면 이해도되고 좋으니 한 번 해보시기바랍니다.

 그럼 다음 웹프로그래밍(html)글에서 이어서 쓰도록 하겠습니다. 감사합니다.

관련된 다른글

HTML 기본 태그와 문서 구조 01