<CSS> <a>태그 밑줄없애기, 색상 변경하기

- <a>태그 밑줄 없애기, 색상 변경하기

HTML에서 <a>태그는 클릭 시 다른 페이지로 이동할 수 있도록 하는 기능을 가진 태그이다. 이 때, <a>태그를 넣어주면 자동으로 해당 값에는 밑줄과 색상이 변경되는 효과가 적용된다. 이것을 CSS 스타일시트를 이용하여 밑줄을 없애고, 색상을 변경할 수 있다.

 

 

1) <a>태그 적용 전

<a>태그 적용 전

HTML

<div class="title">BRAND</div>

CSS

.title {
  font-size: 2em;
}

 

 

2) <a> 태그 적용 후

<a> 태그 적용 후

HTML

<div class="title"><a href="./index.html">BRAND</a></div>

 

 

3) <a> 태그 밑줄 없애기

text-decoration 속성 값 변경 후

text-decoration 속성에 none의 값을 주면 적용되어있던 효과가 사라진다.

 

CSS

a {
  text-decoration: none;
}

 

 

4) <a> 태그 색상 변경하기

폰트 색상 변경 후

<a> 태그를 적용하기 전의 색상으로 다시 바꿔주었다. 처음의 스타일과 같지만, 링크 태그는 적용되어있다.

클릭 시, 지정한 페이지로 이동한다.

 

정확하게 해당 <a>태그에 속성이 변경될 수 있도록 부모 요소, 자식 요소의 관계를 이용하여 다음과 같이 작성하였다.

 

CSS

.title > a {
  color: white;
}