[Web] HTML/CSS 링크(a href, Link) Underline, Decoration, Color 변경하기

HTML/CSS 링크(a href, Link) Underline, Decoration, Color 변경

 

// App.js
	<Link className='link' to = "/">  홈  </Link>

 

1. 밑줄 제거

// App.css
.link {
  text-decoration-line: none;
}

※ text-decoration-line 속성입니다.

• none : 선 없음
• underline : 밑줄
• overline : 윗줄
• line-through : 취소선

 - 'text-decoration: none;'으로 해도 됩니다.

 

2. 밑줄 Color 변경

// App.css
.link {
  text-decoration-color: red;
}

 

3. 밑줄 Dot(점선)로 변경

// App.css
.link {
  text-decoration-style : dotted;
}

※ text-decoration-style 속성입니다.

• solid : default
• double : 2줄
• dotted : 점선
• dashed : dash
• wavy : Wave

 

4. 밑줄 굵기 변경

// App.css
.link {
  text-decoration-thickness: 5px;
}