HTML - 링크, a태그 와 href, target, id 속성 - 텍스트 표시 (5)

HTML - 링크, a태그 와 href, target, id 속성 

텍스트 표시 (5)

오늘은 HTML - 링크 a태그 와 href, target, id 속성에

대해서 알아 보도록 하겠습니다.

태그 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.)

먼저 HTML에서 a 태그란?

하이퍼 링크를 정의 하는 내용으로 사용자가 커서를 웹 페이지의 링크 위에

올리면서 커서의 모양이 화살표에서 손 모양으로 변화합니다.

a태그를 사용하기 위해서는 속성이 있어야 하는데

이 속성은 href로 링크 주소를 입력하는 부분을 정의 합니다.

<사용법>

위 내용은 압타나에서 a링크와 속성을 사용해 출력한 모습입니다.

a태그, href 속성, 네이버로 이동에 관련된 설명

1. a 태그 : 앵커라고 하며 다른페이지로 링크를 생성할때 사용합니다.

2. href 속성 : 속성은 링크의 목적지 이동 url을 나타냅니다.

3. 네이버로 이동(택스트) : 클릭할수 있다는 것을 표현하기 위해 화면에 밑줄이 생깁니다.

(클릭시 기존창에서 다른 페이지로 이동)

여기까지 a태그와 그 기본 속성인 href에 대해서 알아 보았습니다

이 다음은 

a태그의 또다른 속성인 target 속성에 대해서 알아 보도록 하겠습니다.

먼저 target 속성이란?

각 링크가 클릭되었을때, 새로운 페이지가 어디에

열리는지를 지정하는 속성 입니다.

예를 들어 새로운 윈도우가 열리는지 아니면

현재 윈도우에서 새로운 페이지가 열리는지를 지정하는 말인데요

사용법은 아래와 같습니다.

<사용법>

href 속성 바로 뒤 한칸 공백을 두고 target 속성이 지정된 모습입니다.

그런데 타켓 속성에 = "_blank" 라는 말이 나와있는데요.

target 속성에는 아래와 같은 별도 값이 있습니다.

target 속성 값	설명
_blank	새로운 윈동우에서 새로운 페이지를 연다.
_self	현재 윈도우에 새로운 페이지를 적재 합니다.
_parent	부모 프레임에 새로운 페이지를 적재 합니다.
_top	현재 윈도우에 새로운 페이지를 적재하고 모든 프레임을 취소 합니다.

<속성 값 설명>

추가로 여기서 중요한건

 taget 속성의 값 중에서 _blank와 _self 인데 _self가 디폴트 값입니다. 

여기까지 target 속성에 대해서 알아 보았고

이 다음 마지막 내용인 id 속성에 대해서 알아 보도록 하겠습니다.

먼저 id 속성이란?

a태그를 사용해 사용자를 현재 페이지의 다른 위치로 이동시키는 방법을 말하며

북마크 생성시 아이디는 #으로 정의 합니다.

1. 해당 문서 상단 북마크<a태그> 아이디 부분에 #을 적고 임의 이름 test를 붙였습니다.

북마크 생성시 #은 꼭 들어가야 하며 그 뒤 이름은 임의로 정의 합니다.

2. 하단 a태그에 속성 id를 적용해 위에서 임의로 정했던 test를 적는다.

그래야만이 위 해당 "긴냥한테 가려면 클릭하세요"를 클릭하면

하단 id (test)에 적용되 긴냥을 찾아 이동이 가능하기 때문입니다.

<즉 동일한 현재 웹페이지 안에서 이동이 가능하다는 말입니다>

여기까지 HTML - 링크, a태그 와 href, target, id 속성 사용법에 관련되어 기록해 보았습니다.

다시 한번 말하지만 백번 보는 것 보다 한두번 써보는게 더 이해하기 쉽습니다.

이상 HTML - 링크, a태그 와 href, target, id 속성 - 텍스트 표시 (5)에 

관련된 포스팅을 마치도록 하겠습니다.