[코딩5] html 링크 걸기 & 텍스트 색 바꾸기

코딩4에서 제목태그 h1~h6 / 문단태그 p / 줄바꿈 태그 br 에 대해서 알아보았다. 

 

 

이번 포스팅에서는 텍스트에 링크거는 방법에 대해서 적어보려 한다. 

 

html 링크 걸기 <a> 태그

 

정말 많이 사용하는 태그이다. a 태그

 

텍스트에 링크 걸기

 

위와 같이 body 태그 안에

<a href="이동할 사이트 주소""> 텍스트 내용 </a>

적어준다. 

 

 

웹페이지 출력 결과

저장 후 웹페이지를 열어주면

위와 같이 텍스트에 밑줄이 그어진 채로 보여진다. 

 

 

네이버 바로가기 텍스트를 클릭하면 링크가 걸린 사이트로 이동이 된다. 

 

 

네이버 바로가기 밑에 네이트 바로가기를 적어줬다. 

 

a태그 밖에 p태그를 적어준 이유는 

a 태그만 적으면 네이버 바로가기와 네이트 바로가기 텍스트가 한줄로 보여지기 때문에

내용을 분리시키기 위해서 p태그로 a 태그를 감싸줬다. 

 

 

링크 비교

 

네이버 외에 네이트의 링크를 추가로 적어준 이유는 

왜 색이 다른지에 대해서 적기 위함이다. 

 

네이버 바로가기와 네이트 바로가기의 색이 왜 다른 걸까? 

 

두 링크의 색이 다른 이유는

자주색은 방문했던 쿠키가 남아있는 사이트라는 표시이고,

파란색은 방문했던 적이 없는 사이트라는 표시이다.

 

 

Crome 맞츰설정 및 제어창

크롬 설정으로 들어가서 방문기록을 확인해보면

내컴퓨터의 방문기록을 확인할 수 있다. 

 

 

나는 네이버에 방문했던 기록이 남아있기 때문에

네이버 바로가기 링크가 자주색으로 표시되었던 것이다. 

 

 

별로 중요한 내용은 아니지만 설명하고 넘어가고 싶었다. (응?)

 

텍스트 색 바꾸기

 

텍스트색 바꾸기

일단 기본 내용을 위와 같이 적어서 준비해 준다. 

 

내 글을 읽는 사람이 있다면 

같이 적어서 실습을 해보면 더 기억에 오래남고,

공부효과가 높을 것이다. 

 

 

제대로 적고 저장을 했다면,

웹페이지에 위와 같은 내용이 보여질 것이다. 

 

제대로 나타나지 않았다면, 오타일 확률이 높으니 오타체크를 해주고, 

저장은 제대로 했는지, 

다는태그를 빼먹지 않고 넣었는지 확인해보기 바란다. 

 

자, 그럼 왜 위와 같이 색깔이 나타난 건지 설명하겠다. 

어렵지 않으니 그냥 마음 편히 읽으면 된다. 

 

 

글자색이 빨간색인 이유는 

body 태그 안에 있는 text="red"

색상을 빨간색으로 지정 했기 때문에 글자 색이 빨간색으로 보여진다. 

green으로 줬다면 초록색으로 나타났을 것이다. 

 

text="원하는 색상 영문이름 or 색상코드"

 

text태그를 이용하면 글자색을 바꿀 수 있다. 

 

text 옆에 있는 link 태그를 알아보자. 

 

link의 색은 핑크색인데,

네이트 바로가기가 핑크색이다. 

 

link는 방문기록이 없는 사이트의 링크가 걸린 글자색을 지정해준다.

 

나는 네이트를 방문한 기록이 없기 때문에 

네이트만 핑크색으로 표시가 된다. 

 

 

그렇다면 컴퓨터에 방문한 기록이 있던 네이버 바로가기의 색은 어떻게 변화를 줄 수 있을까?

 

vlink를 사용하면 된다. 

 

 

vlink는 한번이라도 방문했던 적이 있는 링크가 걸린 텍스트의 색을 바꿔준다. 

 

나는 네이버에 방문기록이 남아 있기 때문에

vlink가 네이버 바로가기에 적용이 되었다. 

 

이제 여기에서 네이트 바로가기를 클릭해서 네이트 사이트에 방문하고서 다시 텍스트색을 확인해보면

네이트 바로가기도 스카이블루색으로 변한 걸 볼 수 있다.

 

 

그러면 이제 마지막으로 남은 alink는 무엇일까?

 

웹페이지에는 노란색으로 표시된게 없다. 

 

alink의 색을 확인하려면 마우스로 링크를 누른채로 손가락을 떼지말고 확인하면 색이 보인다. 

 

 

위에 그려진 이미지와 같이 

링크가 걸린 글자를 누르고 있는 순간에 나타나는 색이

바로 alink 색이다. 

 

 

나는 노란색으로 설정했기 때문에 노란색으로 보여진다. 

 

 

일단 오늘 내가 포스팅하려고 했던 내용은 전부 끝났다. 

 

 

복습도 되고 무언가 기록한다는 느낌에 만족감도 든다. 

 

 

정리하면서 새삼 느낀건데, 

코딩. 정말 생각보다 재미있다. 

 

꾸준히만 해보자.