티스토리 블로그 스킨 꾸미기 [a태그]

<a> 태그

(1) 정의

하이퍼링크를 걸어줄때 사용하는 태그로 anchor(닻)의 줄임말이라고 한다.

(2) 사용법

<a>태그는 <p>태그처럼 혼자 사용하지 않고 "속성"이라는 것과 함께 사용해야 한다.

시작 태그인 <a>의 안에 "속성"과 "속성값"을 기재 후 "콘텐츠", 그리고

마지막엔 종료 태그</a>를 달아 주면 된다.

<a> : 시작, 오픈 태그

</a> : 종료, 클로즈 태그

여기서 "속성"은 href와 target 그리고 id 세가지가 있다.

▶ href : 클릭시 이동 할 링크

▶ target : 링크를 여는 방법

▶ id : 책갈피 역할(내부 링크)

(과거 name 속성의 역할이 HTML5가 되면서 폐지되면서 대체로 사용된다고 함.)

여기서 "속성값"은 _self, _blank, _parent, _top 등으로 존재하는데,

▶ _self : 현재 페이지 (링크를 누르고 있는 현재의 페이지)

▶ _blank : 새 탭(기존 웹페이지는 두고 새로운 창을 연다.)

▶ _parent : 현재 프레임의 부모 프레임에서 새 탭

▶ _top : 최상위 페이지에서 새 탭

▶ 프레임이름 : 프레임이름을 직접 기재해서 사용할 수 있다.

예시)

<a href="https://yomi-tory.tistory.com/">요미토리</a>

<a href="https://yomi-tory.tistory.com/" target="_blank">요미토리 새탭</a>

<a id="https://yomi-tory.tistory.com/136">모하비 vs 팰리세이드</a>

(3) 실습

ATOM 으로 이용하여 a태그를 실습 해보자.

위와 같이 코드를 작성한 후 .html 파일로 저장하여 웹 페이지를 켜보니

위와 같이 출력됨을 볼 수 있다.

<p>태그는 내용을 기재하면 다음 한칸 내려갔었다.

<a>태그는 그렇지 않는 것을 볼 수 있다.

그래서 이번에는 <p>태그를 함께 사용해 봤다.

위 처럼 작성했다. ㅋ;

아래처럼 웹 페이지가 출력되었다.

한칸씩 아래려 내려간 모습을 볼 수 있다. 기쁘다. 짞짞짞

그런데

3가지 중 세번째인 id 속성을 사용한 링크는 걸리지 않았다.

href 속성을 이용한 링크를 열어 본 결과는 아래와 같다.

짞짞짞 href 속성만 사용하면 _self 속성값을 사용한 것 처럼

현재 페이지에서 넘어감을 볼 수 있었다.

(실제 _self 속성값을 넣어해보니 같은 결과를 볼 수 있었다.)

이번에는 href 속성에 _blank 속성값을 사용한 링크를 누르니,

위와 같이 새 탭이 열리면서 출력됨을 볼 수 있었다.

세번째 링크인 id 속성은 링크가 걸리지 않아 속상하다.

ATOM을 보면 id 색상이 다른데 뭐가 문제가 있나보다.

아.. 내부 링크인데 외부 링크를 걸었다. 바보인가..

코드를 수정했다.

<a href="#top">여길 누르세요.</a> 이거 한줄 추가와

<a id="top">내부 링크?</a> 이걸로 수정했다.

(top은 아무 의미 없이 썼다. 이동할 위치의 이름 정도로 보인다.)

어떤 결과가 나올까.

위와 같이 출력됨을 볼 수 있다.

여길 누르세요를 클릭하면

내부 링크?가 있는 곳으로 이동됨을 볼 수 있었다.

ㅠ_ㅠ~ 뿌듯햏.

여기에 이미지를 넣어서 페이지 밑에서 상위로 이동 시킬 수 있겠다.

블로그 운영에 큰 도움이 될 자산이 되기를 >_<

오늘은 여기까지...

이어보기

☞ 티스토리 블로그 스킨 꾸미기 [br태그]