티스토리 링크버튼 밑줄 없애는 방법

티스토리 블로그를 운영하다 보면 링크 버튼의 텍스트에 기본으로 설정된 밑줄이 디자인적으로 어울리지 않을 때가 있습니다. 특히, 링크 버튼을 강조하거나 심플한 디자인을 원할 때 밑줄을 제거하고 싶어하는 분들이 많습니다. 이번 포스팅에서는 링크 버튼 텍스트 밑줄을 없애는 방법을 상세히 설명하겠습니다.

1. 링크 텍스트 밑줄 제거의 필요성

링크 밑줄은 기본적으로 표시되지만, 심플한 디자인을 원하거나 버튼 스타일을 강조하고 싶을 때 제거할 수 있습니다.

2. CSS를 활용한 밑줄 제거 방법

CSS의 text-decoration 속성을 사용하면 쉽게 밑줄을 제거할 수 있습니다.

 

꾸미기 '스킨편집' → Html편집 하기

ctrl+f 단축키를 눌러 검색 "text-decoration" 찾아서 underline 을 none; 으로 수정해 줍니다.

a {
  text-decoration: none;
}

 

특정 클래스에만 적용하려면 아래 코드를 사용하세요:

.no-underline {
  text-decoration: none;
}

3. HTML 코드 예제

아래는 링크 버튼 밑줄 제거를 적용한 예제입니다.

혹시 위와 같은 방법으로 해결이 되지 않는다면 아래와 같이 블로그 작성시 "text-decoration: none;"을 적용하면 쉽게 적용할 수 있습니다.

1) 기본 밑줄 제거:

<a href="https://example.com" style="text-decoration: none;">링크 텍스트</a>

2) 클래스 기반으로 적용:

<a href="https://example.com" class="no-underline">링크 텍스트</a>

3) 버튼 스타일 적용:

<a href="https://example.com" class="button-link">링크 버튼</a>

4. 밑줄 제거 후 확인해야 할 사항

밑줄을 제거한 뒤에는 다음 사항을 확인하세요:

• 링크 텍스트와 일반 텍스트의 색상 대비가 충분한지.
• 링크임을 인식할 수 있는 호버 효과가 적용되었는지.

a.no-underline:hover {
  color: #0056b3;
  text-decoration: underline;
}

 

위 방법을 활용해 블로그 디자인을 개선해 보세요! 😊

 

티스토리 블로그 상단 이미지 배경 없애는 방법

 

티스토리 썸네일이미지 정사각형으로 변경