[HTML] Web1 : 링크 태그 <a> 사이트 연결하기

HTML 태그의 제왕이라는 링크!!! 사이트 연결하는 법

이번 수업에서는 인체의 혈관과 같은 태그라는 링크태그를 배웠다.

HTML의 약자 HyperText Markup Language에서 hypertext가 이 링크태그를 의미한다고 했다.

link의 약자이면 l을 쓰면되는거 아닌가 했는데 생각해보니까

이미 목차 list가 있었다. 그리고 링크의 태그는<a>로 anchor의 약자였다.

배가 닻을 내릴때 이 표현을 쓰듯이 우리가 다른 웹페이지로 넘어갈때 닻을 내려서 넘어간다

뭐 이런 의미해서 anchor를 쓴 것이 아닐까.

 

그런데 이 <a>라는 녀석은 역시 이미지 태그 처럼 속성을 필요로 했다.

혼자서는 기능하지 못하는 녀석...

그래서 우리는 이 a 라는 닻을 어디에 내려야 할 지 정보를 더 알려줘야한다.

 

href : hypertext + reference의 조합인 이 속성을 사용해서 사이트 주소를 알려준다.

 

아 조금 TMI같은 이야기였는데 W3C는 미래의 웹에 대해서 의논하고 recomendation를 발표하고,

이 문서를 웹브라우저 제작업체들이 보고, 거기에 따라 웹브라우저를 만들어간다고 한다.

 

<a href="사이트주소" > 이렇게 하면 글에 링크를 걸 수 있다!

지금은 너무나도 당연한 기술이지만 나는 이게 세상을 바꿀만한 힘을 가진 놀라운 녀석이라고 생각한다.

 

그리고 이 링크를 눌렀을 때 새로운 페이지를 열게 하려면

 

<a href="사이트주소" target="_blank">

이렇게 해주면 새로운 사이트가 새 탭으로 열린다.

또는 여기에 있는 링크가 무엇인지 알려주고 싶다!

그럴때에는 <a href="사이트주소" title="이사이트에 대한 간단설명">

이렇게 title을 써주면 된다. 그리고 나서 내가 링크를 걸어놓은 곳에 마우스를 올려놓으면

내가 적은 저 "이 사이트에 대한 간단설명"이 뜬다. 이 걸 툴팁이라고 한다.

 

이렇게 html에서 링크를 거는 방법에 대해서 배웠다.

그래서 나도 아톰을 켜기는 귀찮고 이 화면에서 나의 블로그를 태그해보기로 했다.

 

 

 

지금은 방문하는 손님이 하나도 없어서 슬픈 나의 티스토리...

그래도 괜찮다...방문자가 없어도...그냥 내 공부기록하는 거니깐..흑

그런데 저 속성을 쓸때마다 콤마(,) 요녀석을 너무 쓰고 싶다 ㅋㅋㅋㅋ

먼가 써줘야 할 것 같은 기분...ㅜㅎㅎ

 

기본모드로 돌아와서 링크가 연결되어 있는 모습을 보니까 먼가 기쁘다.

이렇게 하나하나 구현해가는 게 재밌다.

 

그런데 티스토리 상단바에 있는 url이랑은 다른 기능인가?

궁금해서 또 https://hijin.tistory.com/manage/posts/ 넣어보았다.

 

아 이건 사이트가 그대로 뜨는 구나. 그래도 안에 들어가 있는 기능은 유사하다.

저 rel 속성만 다르고 나머지는 똑같다.

 

찾아보니까 rel은 relationship 같다.

 

연결할 리소스와 현재 문서의 관계. 링크 유형의 값을 공백으로 구분한 리스트를 지정해야 합니다.

 

라는 글을 보았다. 뭐라는 지 모르겠다. 나중에 배우겠지?

 

그리고 더 찾다보니까  link 도<link href="">로 사용할 수 있었다.

 

그렇다면 <link href="">와 <a href="">의 차이는 뭘까...

난 답을 찾지 못했고 미궁으로 빠져서 html에 대한 애정이 식기전에 그냥 꺼버렸다.히힛

오늘은 여기까지만 할래