Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS 텍스트 장식

웹 페이지의 텍스트를 디자인할 때 텍스트에 장식을 추가할 수 있습니다. 예를 들어 중요한 작업에 밑줄을 추가하거나 오래된 텍스트에 한 줄을 추가할 수 있습니다.

이것이 CSS text-decoration 속성이 들어오는 곳입니다. text-decoration 속성을 사용하면 텍스트 블록을 통해 나타나는 밑줄, 윗줄 및 선을 추가할 수 있습니다.

이 튜토리얼에서는 CSS의 텍스트 블록에 장식을 추가하기 위해 text-decoration 속성과 세 가지 하위 속성을 사용하는 방법을 예제와 함께 설명합니다. 이 튜토리얼을 읽으면 text-decoration 속성을 사용하여 텍스트를 장식하는 전문가가 될 것입니다.

CSS 텍스트 장식

밑줄, 텍스트를 통해 나타나는 선 및 오버라인을 추가하여 텍스트를 장식하는 것은 웹 페이지의 주요 내용에 주의를 끌 수 있는 중요한 방법입니다.

텍스트에 밑줄이 그어진 경우, 예를 들어 밑줄이 그어진 내용이 읽을 가치가 있음을 사용자에게 나타냅니다. 또한 텍스트 장식은 웹 페이지에서 접근 가능한 경험을 디자인하는 데 중요한 부분입니다.

색맹이나 유사한 시각 장애가 있는 사용자와 같은 모든 사용자가 색상과 같은 시각적 지표에만 의존하는 것은 불가능하기 때문입니다. 밑줄, 취소선 또는 윗줄을 추가하면 사용자가 텍스트의 일부가 강조 표시되었음을 알 수 있습니다.

CSS에서 text-decoration 약식 속성을 사용하면 텍스트에 추가되는 장식을 지정할 수 있습니다. 이 속성은 다음과 같은 세 가지 다른 속성의 약어입니다.

  • 텍스트 장식 라인(필수)
  • 텍스트 장식 색상(선택 사항)
  • 텍스트 장식 스타일(선택 사항)

이러한 속성은 text-decoration 속성을 사용할 때 결합하여 코드를 보다 효율적으로 만들 수 있습니다. 각각을 개별적으로 지정하는 대신 다음 구문을 사용하여 텍스트 장식 스타일을 정의할 수 있습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

text-decoration: line color style;

text-decoration 속성의 스타일이 표시되어야 하는 특정 순서는 없습니다.

이제 text-decoration 속기 속성의 기본 사항을 알았으므로 작동 방식의 예를 살펴보겠습니다. 이 튜토리얼에서는 자신의 웹사이트를 구축하려는 지역 빵집의 예를 사용할 것입니다.

CSS 텍스트 장식의 예

우리가 사이트를 개발하고 있는 지역 빵집에서 각 페이지의 제목을 강조 표시해 달라고 요청했습니다.

예를 들어 About에서 페이지, 제목 About Us 제목에 사용자의 주의를 끌기 위해 밑줄이 있어야 합니다. 각 제목에는 밝은 파란색 단일 밑줄이 있어야 하며 각 줄의 너비는 2픽셀이어야 합니다. 다음 코드를 사용하여 이러한 제목을 만들 수 있습니다.

<html>

<h1>About Us</h1>

<style>

h1 {
	text-decoration: lightblue solid underline;
}

CSS 텍스트 장식 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

HTML 코드에서 About Us 텍스트를 표시하는

태그를 사용하여 헤더를 정의했습니다. 웹 페이지에서. 그런 다음 CSS 코드에서 웹 페이지의 모든

요소에 적용되는 규칙을 만들었습니다. 이 규칙은 text-decoration 속성을 사용하여 다음과 같은 밑줄을 만듭니다.

  • 옅은 파란색으로 나타남(lightblue로 표시됨) )
  • 한 줄로 표시됨(solid으로 표시됨) )
  • 밑줄 스타일을 사용합니다(underline로 표시됨). )

이것은 text-decoration 속성을 사용하여 만든 밑줄의 간단한 예입니다. 이제 text-decoration 속성을 구성하는 각 속성을 살펴보겠습니다.

텍스트 장식 라인(텍스트 장식 라인)

text-decoration-line 속성을 사용하면 속성이 적용될 텍스트에 표시될 선 유형을 설정할 수 있습니다. 이 속성이 허용하는 값은 다음과 같습니다.

  • 밑줄:텍스트 블록 아래에 표시되는 줄을 만듭니다.
  • overline:텍스트 블록 위에 표시되는 라인을 생성합니다.
  • line-through:텍스트 블록의 중간에 나타나는 취소선을 만듭니다.
  • blink:스타일이 적용된 텍스트를 깜박입니다(이 스타일은 더 이상 사용되지 않음).

이 속성을 다른 텍스트 장식 없이 사용하면 단색의 검은색 밑줄이 하나만 나타납니다.

이 속성이 어떻게 작동하는지 설명하기 위해 빵집의 예로 돌아가 보겠습니다. Jefferson의 Family Bakery라고 하는 빵집에서 About Us의 텍스트 스타일을 지정해 달라고 요청했다고 가정해 보겠습니다. 페이지. 그들은 우리에게 텍스트의 특정 부분에 밑줄을 긋도록 요청했습니다.

이 작업을 수행하기 위해 text-decoration-line 속성을 사용할 수 있습니다. 사용할 코드는 다음과 같습니다. 

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
}

CSS 텍스트 장식 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

코드를 분해해 보겠습니다. HTML 코드에서

태그로 묶인 텍스트 단락을 만들었습니다.

이 단락 안에는 Jefferson의 Family Bakery에 대한 설명이 있습니다. 또한 두 가지 용어 —most well-known for our bagels come to Jeffersons - 단락의 나머지 부분에서 안에 포함된 텍스트를 구분하는 데 사용되는 태그로 묶입니다.

CSS 코드에서 underline 클래스가 있는 모든 요소에 적용되는 규칙을 정의합니다. . 따라서 우리의 경우 모든 태그는 정의한 스타일을 사용합니다. 각 태그는 underline 클래스에도 할당되기 때문입니다. . 우리가 정의한 규칙은 text-decoration-line을 사용하여 강조 표시하려는 텍스트에 검은색 밑줄 하나를 추가합니다.

텍스트 장식 색상(text-decoration-color)

text-decoration-color 속성을 사용하면 스타일에 적용된 텍스트 장식의 색상을 정의할 수 있습니다. 마지막 예제에서 정의한 밑줄을 녹색으로 표시하고 싶다고 가정합니다. 다음 스타일을 사용하여 이를 가능하게 할 수 있습니다. 

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
	text-decoration-color: green;
}

CSS 텍스트 장식 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

CSS 코드에서 값이 green인 text-decoration-color 스타일 규칙을 추가했습니다. . 이것은 text-decoration-line을 사용하여 정의한 밑줄의 색상을 녹색으로 설정합니다.

또한 선 스타일을 생성하는 데 필요한 text-decoration-line 값을 지정했습니다.

텍스트 장식 스타일(텍스트 장식 스타일)

text-decoration-style 속성을 사용하면 텍스트 블록에서 텍스트 장식이 표시되는 스타일을 설정할 수 있습니다. text-decoration-style 속성은 다음 값 중 하나를 허용합니다.

  • 단색:한 줄을 만듭니다.
  • double:이중선을 생성합니다.
  • 대시:점선을 만듭니다.
  • 점선:점선을 만듭니다.
  • wavy:물결 모양의 선을 만듭니다.

베이커리 사례로 돌아가자. 빵집에서 About the Jeffersons 제목에 점선 밑줄을 추가하도록 요청했다고 가정해 보겠습니다. About Us 페이지. 이 밑줄은 연한 파란색으로 나타나야 하며 점선 스타일을 사용해야 합니다. 다음 코드를 사용하여 이 밑줄을 만들 수 있습니다. 

<html>

<h2>About the Jeffersons</h2>

<style>

h2 {
	text-decoration-line: underline;
	text-decoration-color: lightblue;
	text-decoration-style: dotted;
}

CSS 텍스트 장식 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

우리 코드에서 우리는 각각 밑줄을 정의하고 밑줄의 색을 연한 파란색으로 설정하기 위해 text-decoration-line 및 text-decoration-color 스타일을 사용했습니다. 그런 다음 text-decoration-style 속성을 사용하여 밑줄 스타일을 점으로 설정했습니다.

하이퍼링크에서 밑줄 제거

text-decoration 속성은 일반적으로 기존 HTML 링크에 나타나는 밑줄을 제거하는 데 사용됩니다. 이는 text-decoration 속성이 none 값을 허용하기 때문입니다. , 요소에 적용된 기본 텍스트 스타일을 제거하는 데 사용됩니다.

기본적으로 태그를 사용하여 링크를 정의하면 밑줄이 나타납니다. 그러나 모든 웹사이트가 링크 아래에 밑줄을 표시하고 싶어하는 것은 아닙니다.

Jefferson의 Family Bakery 웹사이트에 Contact Us라는 레이블이 있는 하이퍼링크가 있다고 가정합니다. , /contact.html 페이지로 연결되는 링크 그들의 사이트에. 다음은 하이퍼링크에 대한 HTML 코드입니다. 

<a href="/contact.html">Contact Us</a>

이 구성 요소를 렌더링하면 다음 응답이 반환됩니다. CSS 텍스트 장식 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

보시다시피 링크는 파란색과 밑줄로 표시됩니다. 이 밑줄을 제거하려면 다음 코드를 사용할 수 있습니다. 

<html>

<a href="/contact.html">Contact Us</a>

<style>

a {
	text-decoration: none;
}

CSS 텍스트 장식 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

보시다시피 두 번째 예에서는 링크 아래의 밑줄이 제거되었습니다. CSS 코드에서는 text-decoration:none 규칙을 사용하여 모든 태그에 적용했습니다. 이렇게 하면 적용되는 요소(이 경우 모든 태그)에서 텍스트 장식이 제거됩니다.

결론

텍스트 장식은 웹 페이지의 특정 텍스트에 주의를 집중시키고 텍스트를 더 미학적으로 보기 좋게 표시할 수 있는 한 가지 방법입니다.

CSS text-decoration 속성 및 관련 속성을 사용하면 웹 페이지의 텍스트 블록에서 사용하는 장식을 정의할 수 있습니다.

이 자습서에서는 예제를 참조하여 text-decoration 속성 및 관련 속성을 사용하여 웹 페이지의 텍스트를 장식하는 방법에 대해 설명했습니다. 이제 전문 웹 디자이너처럼 텍스트 장식을 시작하는 데 필요한 지식을 갖추었습니다!