[ HTML ]링크 텍스트 클릭 전/ 후, 커서 밑 색깔 변화 & 링크 부분 밑줄 없애려면 ???(HTML CSS 링크 컬러 속성)

html을 작성할 때 링크 클릭 텍스트 전, 후 컬러 그리고 마우스를 링크 부분에 올렸을 때와 클릭했을 때 변화하는 코드는 각각 <style> 이나 css 부분에 코드를 a: 를 입력하고 각각 link, visited, hover, active 를 입력해주면 됩니다. 또한, 링크 밑줄이 생기는 것을 없애려면 text-decoration: none 을 입력해주면 됩니다. 밑에서 예시로 살펴보시겠습니다.

 

1. a: link

아직 방문한 적 없는 페이지 링크 텍스트 색상을 변경하는 코드입니다.

        <style>
            a:link{color: orangered; text-decoration: none;}

'a: link'를 스타일 태그에 넣게 되면 아직 한번도 들어가지 않은 링크 클릭 텍스트가 orangered 색상으로 변하는 것을 볼 수 있습니다. 'text-decoration: none' 부분은 원래 링크 관련 텍스트는 밑줄이 생기는데, 이 부분은 생기지 않게 되는 코드입니다.

 

2. a: visited

아직 방문한 적 없는 페이지 링크 텍스트 색상을 변경하는 코드입니다.

        <style>
            a:visited {color:goldenrod; text-decoration: none;}

'a: visited'를 스타일 태그에 넣게 되면 이미 들어갔던 기록이 있는 링크 텍스트가 goldenrod 색상으로 변하는 것을 볼 수 있습니다. 원래는 보라색으로 익숙하게 볼 수 있는 텍스트지만, 그 색상이 변하게 됩니다.

 

3. a: hover

마우스 커서를 링크 텍스트 위에 올려놓을 경우 색상이 변하는 코드 입니다.

        <style>
            a:hover {color:aqua; text-decoration: none;}

'a: hover'를 스타일 태그에 넣게 되면 마우스 커서를 링크 텍스트에 올렸을 때 링크 텍스트가 aqua 색상으로 변하는 것을 볼 수 있습니다. 

 

 

4. a: active

마우스 커서를 링크 텍스트 위에서 클릭한 경우 색상이 변하는 코드 입니다.

        <style>
            a:active {color:seagreen; text-decoration: none;}

'a: active'를 스타일 태그에 넣게 되면 마우스 커서를 링크 텍스트 위에서 클릭했을 때 링크 텍스트가 seagreen 색상으로 변하는 것을 볼 수 있습니다. 마우스 클릭 버튼을 떼게 되면 색상이 원래대로 돌아오게 됩니다.

 

5. text-decoration: none;

이 부분을 위에서도 말씀드렸지만, 코드를 이렇게 작성해주게 되면 기본적으로 원래 밑줄이 있는 링크 코드에 밑줄 부분이 사라지게 됩니다.

 

 

 

저의 아주 작은 티끌 코딩 글이 블로그 방문자 님의 작업에 도움이 됐으면 좋겠습니다.

좋아요(❤) 버튼 ↙은 항상 감사합니다.

방문하신 모든 분들 좋은 하루 되세요 : )