HTML 가상 클래스 선택자 a 링크 다양한 스타일 변경 방법
오늘은 가상 클래스 선택자에 대해 배웠습니다. 보통 링크 태그인 a 요소에서 많이 볼 수 있습니다. 우리가 흔히 알고 있는 텍스트 기본 링크 색상은 파란색이며, 밑줄이 그어져 있습니다. 그리고 한번 방문한 링크는 보라색으로 바뀌어 있습니다. 이 부분을 설정할 수 있는데, 가상 클래스 선택자를 통해서 수정이 가능합니다.
태그를 먼저 살펴보겠습니다. 위의 스크린샷처럼 작성하시면 됩니다. 각 부분의 설명은 다음과 같습니다.
a:link → 링크가 걸린 텍스트의 기본 상태
a:visited → 한번 이상 방문했던 링크 텍스트
a:hover → 링크가 걸린 텍스트 위에 마우스가 올라갔을 경우를 설정
a:active → 링크가 걸린 텍스트를 클릭하고 있을 때를 설정
보통은 색상 변경을 가장 많이 하는 편이죠. 아니면 밑줄을 없애거나 나타나게 한다거나 하는 액션도 있습니다. color 는 말 그대로 색상 변경을 하는 요소이며, background는 배경색을 변경하는 요소 입니다. text-decoration 이라는 요소도 있는데, 이것은 텍스트의 상태를 변경하는 부분으로 가장 많이 사용하는 부분이 text-decoration:none; 입니다. 밑줄을 없애는 것 입니다. 반대로, 밑줄을 생성하고자 할 때에는 text-decoration:underline; 이라고 하면 됩니다. 그 밖에도 여러가지가 있습니다. 이 부분은 차후에 더 자세히 다루겠습니다.
그러나 저 같은 경우는, 방문 전 이나, 방문 후나 차이가 없는것을 좋아해서 그냥 a 태그 선택자를 사용해서 스타일을 부여합니다. a:link 그리고 a:visited 이 두개를 없애고 a 하나만 적용시키면 됩니다. 만약 특정 구간에서의 a 링크를 따로 스타일을 주고 싶다면 별도로 클래스값을 활용한다거나 인접 태그를 인용한다거나 하는 방법이 있을 수 있습니다.
간단한 예시를 살펴보겠습니다. div 영역 안에 a 링크 세개를 가로로 나란히 작성했습니다. 그리고 내부스타일을 사용해서 div에 id 값을 부여했고, 이것을 그대로 id 선택자를 사용해서 적용시켰습니다.
#link a {color: red;}
id값을 부여했을 경우, 스타일로 연결시킬 때에는 #을 사용해야 합니다. 그리고 한 칸 띄운 다음 a 라고 입력합니다. div 안쪽에 a 요소가 있으니 자식 선택을 위해서 한칸 띄우고 선택해 줬습니다. 그리고 괄호 안에 적용할 스타일 요소들을 적어주시면 됩니다. 여기에서는 기본 글씨 색상을 빨갛게 만들었습니다. 결과를 확인해 보겠습니다.
보시는 것 처럼 방금 적용한 링크의 텍스트 색상만 빨갛게 적용되었습니다. 우선순위가 있습니다. 전체적인 스타일의 요소 보다는 세밀화된 스타일 요소가 더욱 우선순위가 됩니다. 또한 내부스타일 보다는 인라인 방식의 스타일이 더욱 우선순위가 됩니다. 참고하시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
