Elementor 링크에 밑줄이 그어지지 않게 하는 방법(3가지 방법)

기본적으로 Elementor는 대부분의 웹사이트 빌더와 마찬가지로 링크에 밑줄 스타일을 적용하여 사용자가 즉시 알아볼 수 있도록 합니다. 이는 기본적인 사용성에는 적합하지만 최신 웹 디자인 목표에 항상 부합하는 것은 아닙니다. 

많은 경우 링크에 밑줄이 표시되지 않도록 하여 보다 깔끔하고 전문적인 디자인을 유지하고 싶을 수 있습니다. 

“Elementor 링크에 밑줄이 그어지는 것을 중지하려면 다음과 같이 하세요. 워드프레스 대시보드 >> 모양으로 이동 >> 사용자 지정>>추가 CSS. CSS 코드 붙여넣기 a {텍스트-장식: 없음}. 그런 다음 게시됨.

이 블로그에서는 Elementor 링크에 밑줄이 그어지는 것을 중지하거나 제거하는 3가지 방법을 살펴봅니다.

이제 시작해 보겠습니다!

Elementor 링크에 밑줄이 그어지지 않도록 설정(전역 설정 사용)

전체 사이트에서 밑줄이 그어진 링크를 끄고 싶다면 이 방법이 적합합니다. 이 방법을 사용하면 각 페이지를 개별적으로 편집할 필요가 없습니다. 워드프레스 커스터마이저를 사용하여 작은 CSS 코드로 이 작업을 수행할 수 있습니다. 정말 간단하니 걱정하지 마세요. 

방법은 다음과 같습니다:

1. 회원님의 워드프레스 대시보드.

2. 다음으로 이동합니다. 모양 >> 사용자 지정.

3. 아래로 스크롤하여 추가 CSS.

4. 다음을 붙여넣습니다. 밑줄 텍스트 중지 CSS 코드:

a {
    텍스트 장식: 없음;
}

5. 이제 게시됨.

이렇게 하면 각 페이지를 개별적으로 편집할 필요 없이 사이트 전체의 모든 링크에서 밑줄이 사라집니다. 일관된 스타일을 빠르고 효과적으로 유지할 수 있는 방법입니다.

Elementor에서 텍스트 링크에서 밑줄을 제거하는 방법

전체 웹사이트가 아닌 특정 섹션이나 위젯 콘텐츠의 링크에서 밑줄을 제거하려면 어떻게 해야 하나요? 

이제 Elementor의 특정 섹션 또는 위젯의 텍스트 링크에서 밑줄을 제거하는 방법을 보여드리겠습니다.

그런 다음 아래의 두 가지 방법을 따를 수 있습니다:

방법 1: Elementor에서 사용자 정의 CSS 추가하기(Elementor PRO 필요)

사용자 정의 CSS를 사용하여 특정 섹션 또는 위젯의 모든 텍스트 링크를 변경할 수 있습니다. 이것은 매우 간단한 방법입니다. 하지만 Elementor Pro 사용자만 사용할 수 있습니다. 

이 방법에서는 몇 가지 코드만 추가하면 됩니다. 이 방법은 몇 가지 코드만 추가하면 됩니다. 매우 간단하니 걱정하지 마세요. 다음 단계를 따르기만 하면 됩니다:

• Elementor에서 페이지를 엽니다.

• 섹션을 선택하고 고급 탭을 클릭합니다.

• 아래로 스크롤하여 사용자 정의 CSS.

• 다음 코드를 붙여넣습니다:

a {
    텍스트 장식: 없음;
}

• 이렇게 하면 해당 위젯 또는 섹션 내의 모든 링크에서 밑줄이 제거됩니다.

이 코드는 모든 링크에 밑줄이 그어지는 것을 방지합니다. 원하는 경우 스타일을 더 추가할 수도 있습니다. 예를 들어 색상을 변경하거나 글꼴 스타일을 변경할 수 있습니다. 이를 위해서는 CSS 코드를 조금 더 추가하기만 하면 됩니다.

이 CSS 코딩 방법이 마음에 들지 않는다면 다음 방법을 시도해 볼 수도 있습니다.

방법 2: Elementor의 스타일 설정 사용

Elementor 무료를 사용 중이고 코딩을 좋아하지 않는다면 이 방법이 적합합니다. Elementor를 사용하면 링크 스타일을 쉽게 사용자 지정할 수 있습니다. 링크에서 밑줄을 제거하려면 다음의 간단한 단계를 따르세요:

• Elementor에서 페이지를 엽니다.

• 그런 다음 링크가 있는 텍스트 블록을 클릭합니다.

• 이제 스타일 탭으로 이동합니다.

• 타이포그래피 연필 아이콘을 클릭합니다.

• 그런 다음 아래로 스크롤하여 장식 옵션을 선택합니다. 그리고 다음과 같이 설정합니다. 없음.

• 이제 링크에 밑줄이 표시되지 않습니다. 

각 링크에 대해 이 작업을 수동으로 반복할 수 있습니다. 

참고: 링크가 몇 개 있는 경우 이 방법을 사용하여 링크에 밑줄이 표시되지 않도록 할 수 있습니다. 그러나 여러 개의 링크로 작업하고 여러 페이지에서 변경하려는 경우에는 이 방법을 따라야 합니다.

Elementor 링크에 밑줄이 그어지지 않도록 해야 하는 경우와 그렇지 않은 경우

Elementor에서 링크 밑줄은 표시 위치에 따라 명확성을 높일 수도 있고 디자인을 어수선하게 만들 수도 있습니다. 따라서 링크 밑줄을 중지하기 전에 언제 링크 밑줄을 중지해야 하는지 파악하여 깔끔한 비주얼과 강력한 사용성 사이의 균형을 유지해야 합니다.

일반적으로 다음과 같은 경우 밑줄을 제거합니다:

1. 버튼 또는 CTA를 디자인하는 중입니다.

버튼은 텍스트 링크가 아닌 버튼처럼 보여야 합니다. 여기에 밑줄이 있으면 어수선해집니다. 예를 들어 “지금 구매” 버튼은 배경색, 호버 효과 및 밑줄이 없는 스타일로 지정됩니다.

2. 탐색 메뉴 또는 헤더 링크

메뉴 항목은 일반적으로 깔끔하고 최소한의 디자인(밑줄 대신 호버 효과 또는 배경 하이라이트로 스타일링)을 따릅니다.

3. 링크 스타일이 다른 경우(색상, 굵게, 호버 효과)

링크에 이미 뚜렷한 색상 대비(예: 파란색 텍스트와 검은색 텍스트)와 호버 스타일링(예: 호버 시 밑줄)이 있는 경우 기본 밑줄을 안전하게 제거할 수 있습니다.

4. 모던하고 미니멀한 레이아웃

기업 또는 포트폴리오 사이트와 같이 매끄럽고 미니멀한 디자인을 지향하는 일부 디자인에서는 밑줄이 구식으로 느껴지거나 산만하게 느껴질 수 있습니다.

밑줄을 멈추지 말아야 할 때:

밑줄을 그을 수 있는 경우는 다음과 같습니다:

1. 긴 형식의 콘텐츠 또는 블로그 게시물에서

사용자는 콘텐츠의 링크에 밑줄이 그어져 있기를 기대합니다. 이를 제거하면 사람들이 링크를 놓칠 위험이 있습니다. 예를 들어 기사, 사례 연구 또는 제휴 블로그. 다시 말하지만, 링크(“개인정보처리방침” 또는 “이용약관” 등)는 빠르게 식별하기 쉬워야 합니다.

2. 접근성 및 가독성

색맹 또는 저시력 사용자는 밑줄이 없는 링크를 알아차리지 못할 수 있습니다. WCAG 가이드라인에서는 링크 색상에 다음 중 하나라도 포함되지 않는 한 밑줄을 사용할 것을 권장합니다. 3:1 대비 를 일반 텍스트와 비교합니다.

3. 링크 스타일링이 너무 미묘한 경우

사이트에서 텍스트와 링크에 비슷한 색상을 사용하는 경우 밑줄을 제거하면 사용성이 떨어집니다.

또한 읽어보세요: 워드프레스에서 밑줄을 긋는 방법

자주 묻는 질문

결론

Elementor의 링크에서 밑줄을 없애거나 제거하는 것은 단순한 스타일의 문제가 아닙니다. 웹사이트를 깔끔하고 현대적이며 사용하기 쉽게 만드는 것이 중요합니다. 이 가이드에서는 링크에 밑줄이 표시되지 않도록 하는 세 가지 쉬운 방법을 살펴봤습니다:

• 웹사이트 전체에서 밑줄을 제거하려면 워드프레스 사용자 정의 관리자에서 작은 CSS 코드를 사용하면 됩니다.
• Elementor Pro를 사용하는 경우 섹션이나 위젯에 직접 사용자 정의 CSS를 추가할 수 있습니다.
• 무료 버전의 Elementor를 사용하는 경우 스타일 설정을 사용하여 각 링크에서 밑줄을 수동으로 제거할 수 있습니다.

각 방법에는 고유한 사용 사례가 있습니다. 예를 들어 글로벌 CSS는 시간을 절약하고 일관성을 유지하는 데 유용합니다. 하지만 몇 개의 링크만 변경하려는 경우 수동 방법도 잘 작동합니다.

그래도 방문자에 대해 생각하는 것이 중요합니다. 밑줄이 그어진 링크는 사람들이 클릭할 수 있는 링크임을 알리는 데 도움이 됩니다. 특히 블로그 게시물이나 긴 글에서 더욱 그렇습니다. 

또한 읽어보세요:

• Element Pack Pro 버전 9 출시: 흥미로운 점은 무엇인가요?
• Elementor를 사용하여 워드프레스에 회원 평가 슬라이더를 추가하는 방법
• Elementor에서 기본적으로 아코디언을 어떻게 닫아두나요?
• Elementor 링크에 밑줄이 그어지지 않게 하는 방법(3가지 방법)
• 쉬운 가이드: Elementor에서 페이지에 코드를 추가하는 방법 | 간단한 5단계