텍스트를 꾸미는 text-decoration 태그 요소 사용 방법

오늘은 텍스트 데코레이션 요소들에 대해서 다시한번 짚고 넘어가는 시간 입니다. 전 시간에 아마 한번 언급했던 부분이 있을 수 있겠는데요 복습한다는 마음으로 다시한번 봐주시면 감사하겠습니다.

a링크에 대해서 말씀 드릴 때 나왔을수도 있는 부분입니다. 복습겸 다시한번 살펴보도록 하겠고, 여기에 오늘의 주제인 text-decoration 태그 스타일에 대해서 다양하게 다뤄보도록 하겠습니다. 태그라는게 알수록 신기하고 재밌네요. 이런 맛에 코딩을 하는 것 같습니다.

먼저 text-decoration의 쓰임새를 간단히 살펴보기 위해서 위와같이 마크업을 해두었습니다. a 요소에서 많이 쓰이는 text-decoration: none; 부분도 등장하게 될 것입니다. 먼저 이렇게 마크업을 하면 당연히 a 링크가 걸린 텍스트는 예전 스타일대로 출력이 됩니다. 파란색에 밑줄 딱! 그려진 링크 텍스트가 고스란히 나타나게 되겠죠. 백문이 불여일견이니 바로 출력해서 결과물을 살펴보겠습니다.

그렇습니다. 이렇게 나오게 됩니다. 90년대 인터넷이 막 국내에 도래했을 때, 홈페이지라는 플랫폼이 막 생성되기 시작되었을 때, PC통신에서 인터넷으로 넘어가는 과도기 시절! 많이 볼 수 있는 스타일이죠.

하지만 지금 이렇게 사용하는 홈페이지 보셨습니까? 없습니다. 심지어 블로그도 이렇진 않습니다. 그러니 스타일을 바꿔야 합니다. 어떻게 바꿔야 할까요? 이제부터 배우신대로 적용하시면 됩니다.

보통 a 태그 하나만 사용하면 기본 색상과 방문 후 색상까지 적용되도록 설정이 됩니다. 자세하게 더 풀어서 나열하자면 link, visited, hover, active, focus 입니다. 순서대로 설명을 드리자면 기본, 방문 후, 마우스가 올라갔을 때, 마우스가 올라가서 클릭하고 있을 때, 마우스가 아닌 키보드 탭을 활용하여 선택할 때 입니다. 지금 여기에서는 a 에 대해서 기본 색상이 #333 이고, text-decoration : none; 으로 만들었습니다. 텍스트의 데코레이션을 없음으로 한 것 입니다. 따라서 기본 링크 스타일이 밑줄이 들어가는 방식인데, 이게 없어지고 그냥 글씨만 나타나게 되는 것 입니다.

출력하면 이렇게 됩니다. #333 색상이 적용되었으며 밑줄이 사라졌습니다.

이번에는 a:link 에다가 그대로 적용해 보겠습니다.

그러면 기존의 파란색 색상과 밑줄이 사라지게 됩니다. 놀라운건 클릭을 하면 visited 속성대로 적용되어야 하는데, 아무것도 없으니 보라색에 밑줄이 나와야 하지만 그렇지는 않군요. 완전 기본 속성으로 적용이 되는 모양입니다.

그래서 이번에는 a:visited 요소에 스타일을 넣어보겠습니다. 색상만 오렌지색으로 변하도록 적용시켰습니다.

그랬더니 이렇게 방문한 링크는 모두 오렌지 색으로 변한것을 확인할 수 있습니다. 요즘 홈페이지는 링크색을 방문을 했을 때나, 전이나 통일시키는게 보통입니다. 따라서 a:link 와 a:visited 를 합친것과 같은 a 태그에 스타일을 적용시켜주시면 됩니다. 두개로 나눠서 마크업 할 필요가 없습니다.