■ 홈페이지에서 하이퍼링크를 클릭하면 다른 웹 페이지나 홈페이지로 이동할 수 있는데요. 클릭할 때마다 하이퍼링크의 색이 달라지는거 한 번씩은 보셨을 거에요. 보통 하이퍼링크 색은 파란색인데, 마우스를 올려놓거나, 한 번 클릭하고 나면 색이 바뀌게 되는데요. 이번에는 이런 html 하이퍼 링크의 속성을 알아보겠습니다. 먼저 하이퍼링크의 형식과 속성을 알아보고, 예제를 만들어서 링크를 클릭했을 때 색이 변하는 속성을 살펴보겠습니다.
html에서 하이퍼 링크를 사용하기 위해서 사용하는 태그는 <a href> 태그 인데요. 형식은 다음과 같습니다.
■ <a href> 태그를 이용해서 이동할 웹 페이지의 주소를 입력해주면 됩니다. 메모장에 간단하게 작성해보겠습니다.
■ 하이퍼링크 태그 형식에 맞게 입력하고 이동할 주소는 네이버를 입력해 봤습니다. html 문서로 저장하고 인터넷에서 열어보겠습니다.
■ 이렇게 하이퍼링크가 걸려서 출력되는데요. 클릭하면 [네이버]로 이동하게 됩니다.
이제 하이퍼링크 색을 설정하는 속성을 살펴보겠습니다.
■ 세 가지의 색상 코드를 [body] 태그 안에 넣어주면 되는데요. 'link'는 기본 색상이고, 'alink'는 누르고 있을 때의 색상입니다. 마지막 'vlink'는 클릭한 적이 있는 링크의 색상입니다. 여기서 사용하는 색상은 RGB 형식으로 입력해도 되고, 색상 상수를 입력해도 되는데요. 예를 들어 '파란색'은 [#FFEEFF] 또는 ["blue"] 입력해주시면 됩니다. 이 형식을 대입해서 예제를 만들어보겠습니다.
■ 이번에는 [다음] 으로 이동하게 주소를 입력해봤구요. link (기본 색상)는 검정색으로, alink (클릭하고 있을 때) 는 초록색으로, vlink (한 번 클릭했던 링크)는 빨간색으로 속성을 설정했습니다. 인터넷에서 실행해서 색상의 변화를 살펴볼게요.
■ 위에서 작성한 html 문서를 실행하면 그림처럼 검정색 링크가 표시된 웹 페이지가 열리구요. 링크를 클릭하면 '다음' 페이지로 이동하게 됩니다.
■ 다시 한 번 이 페이지를 열어보면 이미 한 번 클릭했었기 때문에 링크 색깔이 설정해준 빨간색으로 바뀌어 나타나게 됩니다. 이렇게 하이퍼링크의 색깔 속성을 변경해줄 수 있습니다. 수고하셨어요.
