a태그 기본속성 없애기 - a태그 unset

a태그를 사용할 때 우리는 아래와 같이 자동적으로 적용된 링크형태의 텍스트를 볼 수 있다.

하지만 우리가 원하는 것은 보통 속성이 적용되지 않은 것을 원한다.

 

그래서 a태그를 css에서 아래와 같이 초기화 시켜주고 이쁘게 바꿔보자

CSS적용

/* a 링크 태그 스타일 초기화 */
a {
  all: unset;
}
a:link {
  text-decoration: none;
  color: #3f464d;
}

 

1. all : unset : a태그의 style속성을 모두 초기화 시키는 것이다.

2. text-decoration : none : 밑줄을 없앤다.

 

이때 all : unset을 한다고해서 가상클래스까지 초기화 되지는 않는다.

->즉 a 태그의 스타일 속성을 없애도 아래와 같이 링크를 들어갔다면 색상이 바뀌는 a:visited가 보이게 된다.

그래서 가상클래스까지 속성을 재설정해줘야한다.

a:visited {
  text-decoration: none;
  color: #3f464d;
}
a:active {
  text-decoration: none;
  color: #3f464d;
}
a:hover {
  text-decoration: none;
  color: #3f464d;
}