웹 문서에 다양한 내용 입력하기 6 - 하이퍼링크 삽입하기

어제부터 다시 공부를 시작했다. 지난주 목요일에 정보처리기사 필기 시험을 치른 후로 공부가 너무 하기 싫어 1주일 이상 놀기만 하고 아무것도 하지 못했다. 다시 마음을 회복하며 어제 저녁에 해보니 충분히 할 수 있었다. 어제 지난번에 공부하다 말았던 부분부터 다시 학습하는 중이다.

그리고 전에 학습하지 않고 책으로만 진행했던 부분을 처음부터 강의도 들으면서 공부해보았다. 책에 중요한 내용도 기록하면서.. 공부가 다시 재미있어지고 있다. 뭐든 매일 하지 않으면 즐거움을 잃게 되는 것 같다. 다시 찾은 공부에 대한 즐거움을 잃고 싶지 않다.

 

하이퍼링크는 클릭만 하면 연결된 곳으로 바로 이동해 웹 사이트를 더욱 편리하게 사용할 수 있는 중요한 기능히다. 단순해 보이는 이 기능에도 여러 속성을 이용해 다양하게 활용할 수 있다.

 

---

 

 

 

링크를 삽입하는 <a> 태그와 href 속성

<a href = "링크할 주소"> 텍스트 또는 이미지 </a>

 

텍스트 링크 만들기

 

 

 

---

 

 

이미지 링크 만들기

 

 

 

 

이미지를 클릭하면 이러한 페이지로 이동한다. 텍스트를 클릭할 때도 마찬가지이다.

 

---

 

 

 

링크를 새 탭에서 열어 주는 target 속성

현재는 뒤로 가기 버튼을 클릭해야 원래 웹 페이지로 돌아갈 수 있지만, target 속성을 지정하면 연결된 문서가 새 탭에서 열린다.

 

 

---

 

 

 

DO IT 실습 : 외부 사이트로 연결하는 링크 삽입하기

<a> 태그로 텍스트 링크를 만들어서 외부 사이트로 연결하는 방법을 실습해본다.

 

 

1단계 - 텍스트 링크 추가하기

 

 

 

텍스트 링크를 추가하면 위의 사이트로 이동할 수 있도록 만들어보았다. 책에서 사용한 사이트는 현재는 만료되었는지 볼 수 없어서 다른 사이트를 추가해보았다.

---

 

 

 

 

학습을 마치고

 

오늘은 이전에 했던 학습을 다른 블로그에서 정리한 것이 아니라 바로 써보면서 학습을 진행했다. 빨리 벨로그에 있던 블로그를 모두 정리해서 옮기고 싶은데 티스토리에서는 하루에 50개밖에 저장할 수 없어 일주일 이상이 걸릴 것 같다. 내가 썼던 글이 400개 가까이 되기 때문에 무척 많다. 

이제 난 링크를 넣어서 사용할 수 있게 되었다. 별로 어렵지 않은 내용이라고 눈으로만 훑어보면 공부가 되지 않는다는 것도 알게 되었다.

 

조금 느릴지라도 이렇게 학습일지도 쓰며 정리하면서 배울 때 공부가 재미있고 더 오래할 수 있다.