7강. 링크 태그 <a> 속성 href, title, target

안녕하세요. 오늘은 2020.07.18일 입니다. 어제는 밤샘 근무로 인해 공부를 하지 못하였습니다. 잠 푹자고 코딩 공부할 생각하니 너무 설레네요 ㅎㅎ. 오늘 소개해드릴 태그는 링크 태그인 <a> 태그 입니다. 링크는 우리가 흔히 아는 클릭했을 때 그 사이트로 이동하는 것을 의미합니다. 먼저 지난 시간까지 했던 자료를 캡쳐해서 가져와 보겠습니다.

 

자! 저는 여기서 pringles is so delicious 부분에 링크를 달아주고싶습니다. 그럼 <a>pringles is so delicious</a>를 우선

넣어주세요. 하지만 어디 사이트로 링크를 걸어줄건지를 정해주지 않았죠? 이 때 속성을 이용해서 표현해줍니다. <a href="링크주소">의 형태입니다. 저는 미리 프링글스와 관련된 사이트 주소를 복사해왔습니다. 그럼 한번 해보겠습니다.

 

자 이런식으로 코딩을 저장 후 웹페이지를 새로고침하면 다음과 같이 뜰 겁니다.

 

왼쪽 웹페이지에 밑줄 친 글귀가 보이나요? 네 맞습니다. 이제 저 부분을 누르면 제가 지정해놓은 사이트로 들어가게 됩니다. 한번 눌러보겠습니다.

 

누르게 되면 다음과 같이 원래 있던 웹페이지에서 제가 지정해놓은 사이트로 이동하게 됩니다. 근데 이 때 또 한가지 기술을 넣고 싶습니다. 바로 눌렀을 때 새 창으로 링크이동을 하고 싶습니다. 즉 눌렀을 때 기존에 있던 페이지는 유지가 되면서 새로운 사이트에서 링크사이트를 열고싶을때 쓰는 방법입니다. 이 때 사용하는 속성은 <a target="_blank">입니다. 속성은 제가 전 시간에도 말했지만 태그 안에서의 세부적 조정이 가능하게 해주는 것으로써 태그안에는 여러 속성을 쓸 수 있고 속성의 순서는 상관없다라고 말씀 드렸습니다. 그러면 우리는 <a href="사이트주소" target="_blank">를 적어주시면 됩니다. 한번 그대로 적용해보겠습니다.

 

아톰에서의 코딩은 다음과 같고 웹페이지에서 링크를 눌렀을 때 발생하는 현상은 다음과 같습니다.

 

어떠신가요? 기존의 pringles의 웹페이지는 그대로 있고 새로운 창을 띄우면서 링크로 이동함을 볼 수 있습니다. 다음은 웹페이지에서 링크를 클릭하기전에 이 사이트가 어떤 사이트인가를 설명해주는 작은 문구 띄우는 법에 대해서 알려드리도록 하겠습니다. 그 속성은 title="설명"입니다. 설명하고 싶은 내용을 설명란에 적어주면 됩니다. 저는 저 설명란에 프링글스 파는 곳 이라고 적어보겠습니다. 

 

 다음과 같이 title 속성을 넣어주었고 웹페이지에서 링크를 클릭전 마우스 커서를 갖다대면 다음과 같이 뜹니다.

 

마우스 커서 밑에 프링글스 파는 곳이라고 뜨는거 보이시나요? 네 여기까지 잘 따라오셨나요? 오늘 배울 내용은 여기까지 입니다. <a>라는 태그 안에 title, target, href 속성을 이용해서 링크넣어주기 공부를 해보았습니다. 반복 숙달을 통해 여러분의 것으로 만들어보세요~ 궁금한거 있으시면 댓글로 언제든지 질문주시고 구독해주시면 모든 자료를 무료로 빠르게 받아 보실 수 있습니다 ㅎㅎ 좋은 하루 되세요~