Divi에서 대체 텍스트 밑줄 스타일을 적용하는 방법

텍스트 밑줄 스타일은 항상 매우 제한적이었습니다. 웹에서 텍스트에 밑줄을 긋는 가장 일반적인 방법은 CSS 속성 "text-decoration: underline"을 사용하는 것입니다. Divi를 사용하면 Divi Builder 모듈 설정 내에서 이러한 유형의 밑줄을 배포하고 스타일을 지정할 수도 있습니다. 그러나 이 표준 밑줄 방법은 스타일 및 브라우저 간 지원과 관련하여 제한이 있습니다.

물론 대부분의 경우 밑줄 텍스트는 복잡할 필요가 없습니다. 예를 들어 사이트의 모든 링크에 밑줄을 표시하여 클릭할 수 있음을 표시하는 것은 대체 방법이 필요하지 않은 표준 응용 프로그램입니다. 그러나 밑줄을 한 단계 더 높이려는 경우 이 게시물이 도움이 될 수 있습니다.

이 튜토리얼에서는 Divi의 텍스트에 대체 텍스트 밑줄 스타일을 적용하는 방법을 안내해 드리겠습니다. 텍스트에 밑줄을 긋는 Divi의 기본 제공 옵션을 사용하는 표준 방법을 보여 드리겠습니다. 또한 텍스트에 밑줄을 긋기 위한 대체 방법으로 아래쪽 테두리를 사용하는 방법도 보여 드리겠습니다. 하단 테두리를 사용하면 스타일을 더 잘 제어할 수 있을 뿐만 아니라 모든 브라우저에서 지원됩니다.

시작하자.

텍스트 장식으로 텍스트 밑줄(일반적인 방법)

텍스트에 밑줄을 긋는 가장 일반적이고 직접적인 방법은 텍스트 장식 CSS 속성을 사용하는 것입니다. 실제로 Divi를 사용하면 모듈의 내장 옵션 내에서 이 방법을 사용하여 텍스트 스타일을 쉽게 지정할 수 있습니다. 텍스트 글꼴 스타일 옵션을 찾고 " U " 아이콘을 선택하여 밑줄 텍스트 장식을 배포하기만 하면 됩니다. 밑줄 글꼴 스타일을 선택하면 밑줄의 색상과 스타일을 사용자 지정할 수도 있습니다.

이렇게 하면 실제 텍스트 색상과 다른 밑줄 색상을 가질 수 있습니다.

다음 밑줄 스타일 중에서 선택할 수 있습니다.

• 단단한
• 더블
• 점이 찍힌
• 대시
• 떨리는

본문 텍스트 안에 있는 링크의 밑줄 스타일을 대상으로 지정할 수도 있습니다. 이렇게 하면 텍스트 모듈을 사용할 때 디자인을 더 잘 제어할 수 있습니다. 텍스트 디자인 카테고리 토글에서 링크 글꼴 탭을 선택하기만 하면 됩니다. 링크 글꼴 스타일에 대해 "밑줄"을 선택합니다. 그런 다음 그에 따라 링크 밑줄 색상과 스타일을 사용자 정의할 수 있습니다.

텍스트 장식 밑줄 스타일 제한 사항

선의 너비와 위치를 조정하는 기능이 부족합니다.

불행히도 Divi의 내장 설정을 사용하여 text-decoration: underline css 속성을 추가할 때 선의 너비나 선의 위치를 ​​조정할 수 있는 옵션이 없습니다. 선의 너비는 글꼴 크기와 관련이 있으므로 글꼴 크기를 늘리면 늘어납니다. 그리고 밑줄의 위치가 기준선에 있기 때문에 디센더(기준선 아래로 떨어지는 소문자)가 라인을 방해하여 특히 디센더가 많은 단어(예: "타이포그래피")에서 일부 불일치가 발생합니다. .

이 제한은 걱정할 디센더가 없기 때문에 모든 대문자 텍스트를 사용하는 경우 문제가 되지 않을 수 있습니다. 밑줄 너비와 밑줄 위치 조정에 대한 지원이 있으면 좋겠지만 지금은 운이 없습니다.

브라우저 지원 부족

Internet Explorer는 text-decoration-style 또는 text-decoration-color 속성을 지원하지 않으므로 밑줄 스타일(이중, 점선, 대시 등...)과 밑줄 색상을 사용자 지정할 수 없습니다. Safari는 text-decoration-style 속성도 지원하지 않지만 밑줄 색상을 변경할 수 있습니다.

이러한 지원 부족은 Divi에만 국한되지 않습니다. 사용자 정의 CSS도 도움이 되지 않습니다.

하단 테두리를 사용하여 텍스트에 밑줄 긋기

텍스트 스타일에 밑줄을 긋기 위한 대체 솔루션을 찾고 있다면 가장 좋은 방법은 하단 테두리를 사용하는 것입니다. 그렇게 하는 몇 가지 좋은 이유는 다음과 같습니다.

• 테두리는 점선, 파선, 실선, 이중, 홈, 융기선, 인셋 및 아웃셋을 포함하여 밑줄 스타일을 지정하는 8가지 테두리 스타일을 지원합니다.
• 글꼴 크기와 상관없이 테두리의 너비(두께)를 사용자 지정할 수 있습니다.
• 테두리를 텍스트에 더 가깝거나 더 멀리 배치할 수 있습니다.
• 테두리에 원하는 색상을 추가할 수 있습니다.
• 테두리 스타일은 모든 브라우저에서 지원됩니다.

밑줄에 아래쪽 테두리 사용에 대한 제한 사항

• 블록 요소의 한 줄 텍스트로 제한됩니다. 그러나 이 문제를 해결하는 방법이 있습니다(아래 참조).
• 디센더 아래에 완전히 위치하며 올바른 위치를 잡기가 약간 어렵습니다(그러나 실행 가능).

블록 요소와 인라인 요소의 차이점 이해하기

테두리 밑줄이 작동하는 방식을 이해하려면 블록 요소와 인라인 요소의 차이점을 알아야 합니다.

블록 요소

블록 요소는 자동으로 컨테이너의 전체 너비에 걸쳐 있으며(사용자 정의 너비가 설정되지 않은 경우) 새 줄에서 시작됩니다. 웹사이트(Divi로 구축된 웹사이트 포함)는 블록 요소로 가득합니다.

일반적인 블록 요소의 몇 가지 예는 다음과 같습니다.

• Divi 섹션, 행, 모듈(div)
• 본문 또는 단락(p)
• 제목(h1, h2, h3, h4, h5, h6)
• 목록(ol, ul)

블록 요소에 하단 테두리를 추가하면 테두리가 전체 블록 아래에 놓입니다. 따라서 두 줄 이상의 텍스트 단락(p) 또는 제목(h1)이 있는 경우 아래쪽 테두리는 개별 텍스트 줄이 아니라 블록 아래쪽에만 적용됩니다.

다음은 텍스트가 여러 줄로 나뉠 때 h1 표제 블록 요소에 아래쪽 테두리를 추가하는 방법의 예입니다.

css가 h1 태그를 대상으로 하지만 행은 블록 요소에만 적용됩니다. 따라서 라인은 각 라인에 개별적으로 적용되지 않고 맨 아래에만 적용됩니다.

인라인 요소

블록 요소와 달리 인라인 요소는 여러 줄로 나눌 수 있습니다. 따라서 인라인 요소(예: 링크)에 아래쪽 테두리를 추가하면 링크가 새 줄로 끊어지더라도 아래쪽 테두리 밑줄이 적용됩니다. 또한 본문 텍스트의 줄 높이에 영향을 주지 않고 인라인 요소의 패딩을 조정할 수 있어 하단 테두리 밑줄을 배치하는 데 좋습니다.

다음은 하단 테두리 밑줄이 있는 일부 링크(기본적으로 인라인 요소임)의 예입니다.

간단히 말해서 인라인 요소는 여러 줄로 나눌 때 아래쪽 테두리에 밑줄을 그을 수 있고 블록 요소는 그럴 수 없습니다.

한 줄의 텍스트(블록 요소)에 하단 테두리 밑줄을 추가하는 방법

다음은 텍스트 모듈 내장 설정을 사용하여 한 줄의 텍스트에 하단 테두리를 추가하는 방법의 예입니다. 이 옵션은 텍스트를 한 줄로 제한하므로 헤더에 가장 적합합니다.

하나의 열 행으로 새 섹션을 만듭니다. 그런 다음 다음 콘텐츠가 포함된 텍스트 모듈을 추가합니다.

Underlining Typography

그런 다음 다음과 같이 텍스트 모듈 설정을 업데이트합니다.

• 텍스트 텍스트 크기: 46px(데스크톱), 40px(태블릿), 26px(휴대폰)
• 텍스트 줄 높이: 1.8em
• 너비: 517px(데스크탑), 450px(태블릿), 293px(휴대폰)
• 하단 테두리 너비: 2px
• 하단 테두리 색상: #0c71c3
• 하단 테두리 스타일: 점선

보다시피 테두리는 너비, 색상 및 스타일을 사용하여 스타일을 지정할 수 있습니다. 하단 테두리가 모듈에 적용되고 있기 때문에 모듈의 너비를 텍스트의 동일한 너비로 조정해야 합니다. 따라서 그에 따라 텍스트 크기와 모듈 너비를 수정해야 합니다.

선을 가로질러 분할되는 블록 요소(예: 제목)에 하단 테두리 밑줄을 추가하는 방법

앞서 언급했듯이 제목(h1, h2, h3 등)과 같은 블록 요소는 각 줄 바꿈에 아래쪽 테두리가 인라인으로 적용되는 것을 허용하지 않습니다. 이 문제를 해결하기 위해 단순히 텍스트를 span 태그로 래핑할 수 있습니다. 범위를 사용하면 인라인 요소(텍스트 그룹과 같은)를 그룹화하여 해당 요소에 스타일을 추가할 수 있습니다. 따라서 h1 태그(블록 요소)의 아래쪽 테두리를 원하면 추가 span 태그로 h1 태그 내부의 텍스트를 래핑할 수 있습니다. 그런 다음 하단 테두리 밑줄 스타일을 span 태그에 추가할 수 있습니다. 이렇게 하면 h1 태그 텍스트(또는 그 일부)가 다른 줄로 끊어지더라도 밑줄을 그을 수 있습니다.

다음은 사용자 정의 CSS를 사용하여 여러 줄의 텍스트로 분할되는 블록 요소(예: 제목)에 하단 테두리를 추가하는 방법의 예입니다.

먼저 한 열 행이 있는 새 섹션을 추가합니다. 그런 다음 행에 텍스트 모듈을 추가합니다. 내용 상자에서 기본 모의 텍스트를 다음으로 바꿉니다.

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

아래쪽 테두리에 밑줄을 추가할 예정이므로 h1 제목 줄 높이를 다음과 같이 늘립니다.

다음으로 고급 탭에서 다음 사용자 정의 CSS ID를 추가하십시오.

CSS ID: 테두리 밑줄

다음으로 페이지 설정 모달을 열고 다음 사용자 정의 CSS를 추가하십시오.

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

이 하단 테두리 스타일은 span 태그 내의 요소에 적용됩니다. 그리고 span 태그는 인라인 요소이기 때문에 각 줄의 텍스트에 밑줄이 적용됩니다.

border-bottom 속성은 원하는 대로 사용자 지정할 수 있습니다. 첫 번째 값(2px)은 테두리의 두께(또는 너비)를 설정합니다. 두 번째 값(대시)은 테두리 스타일을 설정합니다. 점선, 점선, 이중선, 홈, 융기선, 인셋 및 인셋과 같은 테두리 스타일도 사용할 수 있습니다. 그리고 세 번째 값(#0c71c3)은 테두리의 색상을 설정합니다. 또한 텍스트 모듈 내장 옵션의 텍스트 줄 높이 값과 함께 맞춤 패딩 CSS를 조정하여 간격을 바로 맞출 수도 있습니다.

span 태그가 필요하지 않고 전체 h1 태그를 인라인 요소로 변환하려는 경우 페이지 설정에서 이 CSS를 대신 사용할 수 있습니다.

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

이 CSS는 h1 태그를 대상으로 합니다. 하단 테두리 및 패딩 스타일 외에도 "display: inline"은 h1 태그를 인라인 요소로 변경하여 h1 텍스트에 여러 줄에 밑줄이 표시되도록 합니다.

Divi의 인라인 링크에 하단 테두리 밑줄 추가

다음은 사용자 정의 CSS를 사용하여 Divi의 인라인 링크 텍스트에 하단 테두리를 추가하는 방법의 예입니다. 먼저 1열 행으로 새 섹션을 만들고 행에 텍스트 모듈을 추가합니다.

그런 다음 wysiwyg 편집기를 사용하여 일부 링크를 본문 텍스트에 추가하여 작업할 링크를 확보하십시오.

그런 다음 다음과 같이 고급 탭에서 사용자 정의 CSS 클래스를 추가합니다.

CSS 클래스: 테두리 밑줄

이제 페이지 설정을 열고 다음 사용자 정의 CSS를 추가하여 텍스트 모듈 내부의 모든 링크에 하단 테두리를 적용합니다.

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

border-bottom 속성은 원하는 대로 사용자 지정할 수 있습니다. 첫 번째 값(1px)은 테두리의 두께(또는 너비)를 설정합니다. 두 번째 값(단색)은 테두리 스타일을 설정합니다. 점선, 점선, 이중선, 홈, 융기선, 인셋 및 인셋과 같은 테두리 스타일도 사용할 수 있습니다. 그리고 세 번째 값(#333333)은 테두리의 색상을 설정합니다.

따라서 너비가 2px이고 대시 스타일과 다른 색상의 아래쪽 테두리 밑줄이 필요한 경우 해당 값을 다음과 같이 바꿀 수 있습니다.

border-bottom: 2px dashed #0c71c3;

패딩 값을 조정하여 테두리 밑줄을 세로로 배치할 수도 있습니다. 따라서 텍스트에서 더 아래로 줄을 원하면 패딩 값을 다음과 같이 늘릴 수 있습니다.

padding: 0.3em 0;

또한 텍스트 모듈의 기본 제공 옵션에서 텍스트 줄 높이 값과 함께 이 사용자 지정 패딩을 사용하여 간격을 정확히 맞출 수도 있습니다.

그리고 링크는 인라인 요소이기 때문에 경계 밑줄은 라인을 가로질러 분할되는 링크에 남아 있습니다.

디바이더는 어떻습니까?

한 줄의 텍스트(블록 요소)에 밑줄을 긋는 창의력을 발휘하려면 항상 Divi의 구분선 모듈을 사용할 수 있습니다. 디바이더 모듈에는 스타일, 높이, 너비, 배경, 테두리, 상자 그림자 등과 같은 많은 기본 제공 옵션이 있습니다. 더 많은 사용자 정의 모양을 위해 서로의 상단에 구분선을 쌓을 수도 있습니다.

다음은 그라데이션 배경의 이중선으로 텍스트에 밑줄을 긋는 데 사용되는 구분선 모듈의 빠른 예입니다.

텍스트가 포함된 텍스트 모듈 바로 아래에 구분선 모듈을 추가하기만 하면 됩니다. 그런 다음 다음을 업데이트합니다.

• 배경 그라데이션 왼쪽 색상: #2b87da
• 배경 그라데이션 오른쪽 색상: #29c4a9
• 그라디언트 유형: 선형
• 기울기 방향: 90deg
• 색상: #ffffff
• 디바이더 무게: 2px
• 높이: 2px
• 너비: 400px(위 텍스트의 너비에 맞게 조정해야 함)
• 맞춤 패딩: 상단 5px, 하단 5px

마지막 생각들

이 튜토리얼이 Divi에서 텍스트 밑줄 스타일을 추가하는 데 유용한 대안이 되기를 바랍니다. "텍스트 장식: 밑줄"을 사용하는 일반적인 방법은 지금까지 가장 쉬운 솔루션이지만 제한 사항이 끌릴 수 있습니다. 아래쪽 테두리 밑줄 방법을 사용하면 선의 스타일과 배치를 좀 더 세밀하게 제어할 수 있습니다. 그리고 사용자 정의 CSS는 확실히 번거롭지 않으며 필요에 따라 쉽게 조정할 수 있습니다. 따라서 텍스트 밑줄을 다음 단계로 끌어올리고 싶다면 이것이 도움이 될 것입니다.

언제나처럼 댓글로 여러분의 의견을 기다리겠습니다.

건배!