[HTML] 링크로 연결해보자 :: <a> 태그

[HTML <a> 태그]

 

우린 웹을 이용할때 쉴새없이 클릭, 클릭, 클릭 한다. 이 링크에서 저 링크로 계속 옮겨다닌다.

생각해보니 신기하다. 여러개의 독립된 페이지들은 사실 복잡하게 엮여진 링크, 링크, 링크로 연결되어 있다. 

이런 연결은 <a> 태그가 해준다.

 

<a></a> 태그는 하이퍼링크를 걸어주는 태그다. 오늘 배운 속성을 아래 정리해보겠다.

 

1. a href : 클릭 시 이동할 링크 (hyperlink refernece)

2. target : 링크를 여는 방법

     * _self: 현재 페이지 (기본값)

     * _blank: 새 탭

3. title : 이미지에 커서를 갖다 대었을때 나올 설명문

 

만약, <a href="http://naver.com" target="_blank" title="네이버입니다."> 네이버 </a>

위와 같이 작성하면 '네이버' 라는 단어를 클릭했을때 새 창으로 네이버에 접속할 수 있다.

또, '네이버' 단어 위에 커서를 올렸을때는 '네이버입니다.' 라는 문구를 확인할 수 있다.

 

 

---

[실습]

 

실습용으로 YOGA 유투브 강의를 들을 수 있는 페이지를 만들어보았다.

<h1> <Img> <p> <ol> 과 <li> <a> <table> 등 배운 태그 다 넣었다.

 

듣고 싶은 과목을 클릭하면

 

해당 과목의 설명을 볼 수 있고 해당 과목의 유투브 강의를 들을 수 있다.

 

뚝딱뚝딱 만들다보니까 전체적인 레이아웃, 테이블 행의 너비, 배경 색상 등등 거슬려

빨리 CSS 요소도 넣어보고 싶어진다.