CSS 텍스트(텍스트)

CSS 텍스트 속성은 텍스트 스타일을 매우 효율적으로 쉽게 정의할 수 있게 합니다. 예를 들어, 색상, 정렬 방식, 간격, 장식, 변환 등을 정의할 수 있습니다.

CSS로 텍스트 포맷링

CSS는 텍스트 스타일을 정의하는 데 사용되는 여러 가지 속성을 가지고 있습니다. 이 속성들은 텍스트를 정확하게 제어할 수 있게 합니다.문자，공백，단어，단락와 같은 시각적 외관。

요소의 다음 텍스트 속성을 설정할 수 있습니다：

글자 색상

텍스트 색상은 CSS에 의해 color속성 정의。color에 대해 더 알아보세요。

h1　{
　　　　color: #ff0000;
}
p　{
　　　　color: green;
}

문자 정렬

이text-align속성은 텍스트의 수평 정렬 방식을 설정합니다.

이 속성의 가능한 값은 left, right, center, justify 및 inherit입니다.

h1　{
　　　　text-align: center;
}
p　{
　　　　text-align:　justify;
}

문자 장식

이text-decoration속성은 텍스트의 장식을 설정하거나 제거합니다.

이 속성의 가능한 값은 none, underline, overline, line입니다.-through, blink 및 inherit. 링크가 아닌 밑줄 텍스트에서 이를 피해야 합니다. 그렇지 않으면 방문자가 혼란스러울 수 있습니다.

h1　{
　　　　text-decoration: overline;
}
h2　{
　　　　text-decoration: line;-through;
}
h3　{
　　　　text-decoration: underline;
}

링크 기본 밑줄 제거

이 text-decoration 속성은 일반적으로 기본 밑줄을 제거하는 데 사용됩니다. 완전히 밑줄을 제거하면 방문자가 혼란스러울 수 있습니다. 다른 시각적 힌트를 제공하여 독립적으로 나타나게 하고, 링크 스타일을 설계하는 경우에만 사용해야 합니다.

예를 들어, 실선 대신 점선을 사용할 수 있습니다.

a {
　　　　text-decoration: none;
　　　　border-bottom:　1px dotted;
}

문자 변환

이 text-transform 속성은 텍스트의 대문자와 소문자를 설정합니다.

그것은 요소의 텍스트 내용을 대문자나 소문자로 설정하거나 각 단어의 첫 글자를 대문자로 설정할 수 있습니다. 가능한 값 text-transform 속성은 none, capitalize, uppercase, lowercase 및 inherit입니다.

p.up {
　　　　text-transform: uppercase;
}
p.cap {
　　　　text-transform: lowercase;
}
p.low {
　　　　text-transform: lowercase;
}

문자 줄임

이 text-indent 속성은 요소의 첫 번째 행 텍스트의 줄임을 설정합니다. 이 text-indent 속성의 가능한 값은 다음과 같습니다:백분율（%），길이또는 inherit.

아래의 예제는段落의 첫 번째 행을 줄이는 방법을 보여줍니다.

p　{
　　　　text-indent:　100px;
}

단어 간격

word-spacing은 단어 간 간격을 설정하는 속성입니다。

• 문자 간격은 텍스트 정렬 방식에 따라 영향을 받을 수 있습니다. 확인하세요text-align속성。

• 공백을 유지할 때는 모든 공백 문자가 단어 간격에 영향을 받습니다. CSS를 참조하세요 white-space속성。

이 word-spacing 속성의 가능한 값은：length（단어 간에 삽입할 간격을 정의하는 normal 및 inherit）

p.one　{
　　　　word-spacing:　20px;
}
p.two　{
　　　　word-spacing:　20px;
　　　　text-align:　justify;
}
p.three　{
　　　　word-spacing:　20px;
　　　　white-space: pre;
}

문자 간격

이letter-spacing속성은 텍스트 문자 간의 추가 간격을 설정합니다。

이 속성의 가능한 값은：length（기본 문자 간 간격을 정의하는 normal 및 문자 간에 추가로 삽입할 간격과 inherit）

h1　{
　　　　letter-spacing:　-3px;
}
p　{
　　　　letter-spacing:　10px;
}

행 간격

이line-height속성은 한 줄 텍스트의 높이를 정의합니다（또는Lead）。

이 속성의 가능한 값은：백분율（%），길이，수량，normal과 inherit.

p　{
　　　　line-height:　1.2;
}

값이 숫자일 때는 요소의 글꼴 크기를 숫자로 곱하여 행 높이를 계산합니다. 백분율 값은 요소의 글꼴 크기에 비례합니다.

line 속성의 값이-height 속성의 값이font-size요소의 값이면 이 차이（이를“선두”）은 두 부분으로 나누어집니다（이를“반선두”），이는 in의 상단과 하단 행 브릭에 균일하게 분포됩니다。

p　{
　　　　font-size:　14px;
　　　　line-height:　20px;
　　　　background-color: #f0e68c;
}

텍스트 스타일에 대한更多信息를 알고 싶다면 다음을 참조하세요글꼴와텍스트 관련속성。