11강 - 링크 태그 (Link Tag)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 11강 링크 태그 (Link Tag) 에 대해서 알아보는 시간을 만들게 되었습니다. 오늘 수업도 여러분에게 유익한 수업이 되었으면 좋겠습니다. 그럼 링크 태그에 대해서 알아보겠습니다.

링크 태그 (Link Tag) 란..?

링크 태그의 기본은 <a> 태그를 사용하는 방법입니다. 그리고 링크 태그에는 두 가지의 방법이 있는데요. 우리가 지금 보고 있는 텍스트에 링크를 삽입하는 방법 또는 이미지에 링크를 삽입하는 방법이 있습니다. 오늘 두 가지에 대해서 모두 알아보겠습니다. 우선 텍스트에 링크를 사용하는 방법에 대해서 알아보도록 하겠습니다.

텍스트에 링크를 적용하는 방법

우선 기본적으로 우리가 사용하는 텍스트에 링크를 사용하는 방법인데요. 사용할 링크는 여러분께서 원하는 링크를 사용하시면 됩니다. 그럼 예시를 보며 우선은 사용 방법을 확인 해볼까요?

우선 제가 사용할 텍스트는 [ 자스트 ] 그리고 링크는 [ http://jast.co.kr ] 을 사용하도록 해보겠습니다.

예시 1)

<a href="http://jast.co.kr"> 자스트 </a>

위의 예시와 같이 텍스트에 링크 a 태그를 사용하는 방법인데요. <a href="링크"> a 태그를 사용하며, href 속성에 들어갈 링크를 입력해주시면 됩니다. 링크의 시작은 http://, https:// 로 시작하는 링크를 걸어주시면 되며, 시작하는 <a>태그와 끝나는 </a> 태그 사이에는 내가 이 링크를 설명할 수 있는 내용을 작성해주시면 됩니다. 현재 사용하는 링크는 자스트 공식 홈페이지의 링크를 사용하고 있기 때문에 이 링크를 설명하는 자스트 또는 자스트 공식 홈페이지 등 사용자가 파악할 수 있게 설명해주는 것입니다. 그럼 이번에는 실제로 링크 태그를 사용하여, 위의 예시 1) 의 내용에 링크를 걸어보도록 하겠습니다.

예시 2)

자스트

위의 예시 2)는 예시 1) 을 실전으로 적용 했는데요. 적용이 되었는지 확인하는 방법은 첫째, 텍스트 하단에 밑 줄이 형성이 되었습니다. 둘째, 텍스트에 마우스를 올리면 화살표 모양에서 손 가락 모양으로 바뀌게 됩니다. 셋째, 텍스트를 클릭하면, 내가 적용한 링크의 사이트로 이동됩니다. 그럼 적용이 되었는지 직접 텍스트를 클릭 해볼까요? 텍스트를 클릭하면 홈페이지로 이동이 잘되죠? 그럼 링크 (Link) <a> 태그가 제대로 적용이된것입니다. 그럼 이번에는 이미지에 링크 태그 (Link Tag) 를 적용하는 방법에 대해서 알아보도록 하겠습니다. 이미지 태그에 대해서 아직 잘 모르고 계신다면, 8강 - 이미지 태그 수업을 참고해주세요. 그럼 예시를 통해 알아보겠습니다. 제가 사용할 이미지 태그와 링크 태그의 예시는 아래와 같습니다.

이미지에 링크를 적용하는 방법

이미지 태그

<img src="자스트.jpg" alt="자스트" height="100" width="500">

링크 태그

<a href="http://jast.co.kr"> 내용 </a>

이 두 가지의 태그를 사용하도록 해보겠습니다. 위에서 배웠던 텍스트에 링크 태그를 적용하는 방법과는 약간 어렵다고 느껴질 수 있지만 사진에 링크를 적용하냐 텍스트에 링크를 적용하냐 차이라서 쉽게 생각해야 문제를 쉽게 풀어나갈 수 있습니다. 우리가 배웠던 텍스트에 링크를 적용하는 방법은 내가 이 링크를 표현하려는 텍스트를 작성 했는데요. 이번에는 링크를 설명해줄 수 있는 이미지를 만들거나 다운로드를 받아서 사용하시면 됩니다. 제가 사용할 이미지는 이미지 태그 수업에서 사용했던 이미지를 사용하도록 해보겠습니다.

위의 이미지 이름은 "수업을 위한 이미지.JPG" 사진 파일입니다. 가로 사이즈는 500px, 세로 사이즈는 100px 입니다. (px)표시는 단위이며, 차후 디자인 수업을 통해서 조금 더 자세하게 알려드리겠습니다. 이 사진 파일에 링크를 적용하는 방법은 아래와 같습니다.

<a href="http://jast.co.kr">

<img src="수업을 위한 이미지.jpg" alt="자스트" height="100" width="500">

</a>

<a href="http://jast.co.kr"> 태그를 통해서 이미지에 들어갈 링크 (http://jast.co.kr) 를 설정해주었습니다. 그리고 <img src="수업을 위한 이미지.jpg" alt="자스트" height="100" width="500"> 이미지의 파일명을 작성해주고 이미지를 작성한 작성자 그리고 이미지의 높이와 가로 사이즈를 적용해주었습니다. 그리고 마지막으로 여기 이미지에서 링크가 끝나! 라고 알려주는 끝나는 </a> 태그를 작성해주었습니다. 그럼 실전을 통해 이미지에 링크가 적용되는 것을 같이 확인 해볼까요?

위의 이미지는 링크가 삽입된 이미지입니다. 확인을 위해 이미지를 클릭 해볼까요? 이미지를 클릭하면 제가 지정한 홈페이지로 이동이되는데요. 이 방법이 두 번째 링크 태그 사용방법입니다. 이미지에 링크를 적용하는 방법 그리고 텍스트에 링크를 적용하는 방법 두 가지에 대해서 알아 보았는데요. 많이 사용하는 태그라서 a 링크 태그 꼭 기억해주시면 감사하겠습니다. 그럼 오늘 하루도 즐거운 하루 보내시고 꼭 복습을 통해 연습해보시는 것을 추천해드릴게요. 그럼 다음 시간에 뵙겠습니다!