[TIP] 링크 상태(링크, 방문, 마우스오버)에 따른 스타일 적용

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.

링크 태그 <a...>는 3가지 스타일을 갖고 있습니다.

링크가 걸려있는 텍스트는 파란색에 밑줄, 방문한 링크는 갈색에 밑줄이 기본 스타일이고 마우스가 위로 올라가도 스타일이 변하지 않습니다. 

전자책을 만들 때 주석을 링크로 연결하는 경우가 있는데 별도의 스타일을 지정하지 않으면 링크 기본 스타일이 적용되지요.

링크 스타일을 변경하는 방법은 2가지가 있습니다.

1. <a...>태그 스타일을 변경

2. a:link, a:visit, a:hover 스타일을 변경

1번은 링크의 상태(링크, 방문, 마우스오버)와 상관 없이 동일한 스타일이 적용됩니다.

a {

   color : inherit;

   text-decoration : none;

}

이렇게 스타일을 적용하면 링크가 걸린 텍스트가 본문과 똑같이 보입니다.

링크의 상태에 따라 서로 다른 스타일을 지정하고 싶다면 선택자(selector)를 구분해서 스타일을 지정해 주면 됩니다.

a:link {

   color : red;

   text-decoration : underline;

}

a:visit {

   color : grey;

   text-decoration : none;

}

a:hover {

   background-color: yellow;

}

이렇게 스타일을 지정하면 링크 텍스트는 빨간 글씨에 밑줄, 방문한 링크는 밑줄 없는 회색, 마우스가 올라가 있으면 노란색 배경이 적용됩니다.

링크가 걸려있는데 본문과 똑같아 구분이 가지 않는다면 독자들이 불편하겠지요? 하지만 주석은 ¹⁾처럼 본문과 구분이 되기 때문에 독자들이 주석이라는 것을 알 수 있습니다. 이럴 때는 파란색에 밑줄을 그을 필요는 없을거예요. 

상황에 맞게 a 태그나 3가지 선택자에 스타일을 적용할 수 있으니 편집할 때 활용하세요~