CSS Text
CSS의 폰트중 텍스트에 대해서 알아봅시다!
CSS(Cascading Style Sheets)를 정의하는 방법으로는 “내부 스타일시트”, “외부 스타일시트”, “인라인 스타일시트” 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하지만 간단한 스타일은 내부 스타일만으로도 사용 할 수 있습니다.
10. text-align
1
text-align: center;
text-align 속성은 텍스트의 정렬 방식을 지정합니다. left, right, center, justify 등의 값을 사용할 수 있습니다.
11. text-decoration
1
2
3
4
5
6
7
8
9
10
/* 단일 속성 사용 */
text-decoration: underline;
/* 여러 속성을 조합하여 사용 */
text-decoration: underline dotted red;
/* 하위 속성 사용 */
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: dotted;
text-decoration 속성은 텍스트에 꾸밈 효과를 추가하는 데 사용되는 CSS 속성입니다. 이 속성을 사용하여 텍스트에 밑줄, 취소선, 위선 등의 효과를 적용할 수 있으며, 텍스트의 꾸밈 색상과 스타일을 조정할 수 있습니다. text-decoration 속성은 주로 링크나 중요한 텍스트를 강조하는 데 사용됩니다. 그러나 text-decoration 속성은 상속되지 않지만, 부모 요소에 적용된 꾸밈 효과가 자식 요소에도 영향을 미칠 수 있습니다. 이는 특히 링크나 강조된 텍스트에 적용할 때 유의해야 합니다.
text-decoration-color: 꾸밈 효과의 색상을 지정합니다.
text-decoration-thickness: 꾸밈 효과의 두께를 지정합니다. (CSS Text Decoration Module Level 4에서 도입)
text-decoration-line 값
none: 꾸밈 효과를 제거합니다.
underline: 텍스트 아래에 밑줄을 그립니다.
overline: 텍스트 위에 선을 그립니다.
line-through: 텍스트 중간에 취소선을 그립니다.
blink: 텍스트를 깜박임 효과를 줍니다.
text-decoration-style 값
solid: 실선을 그립니다.
double: 이중 선을 그립니다.
dotted: 점선을 그립니다.
dashed: 파선을 그립니다.
wavy: 파동 모양의 선을 그립니다.
12. text-transform
1
text-transform: uppercase;
text-transform 속성은 텍스트의 대소문자를 변환합니다. none, capitalize (문장의 첫 글자를 대문자로), uppercase (모든 글자를 대문자로), lowercase (모든 글자를 소문자로) 등의 값을 사용할 수 있습니다.
13. letter-spacing
1
letter-spacing: 2px;
letter-spacing 속성은 문자 사이의 공간을 조정합니다. 이 속성은 글자 간격을 넓히거나 좁히는 데 사용됩니다.
14. word-spacing
1
word-spacing: 4px;
word-spacing 속성은 단어 사이의 공간을 조정합니다. 이 속성은 단어 간격을 넓히거나 좁히는 데 사용됩니다.
15. white-space
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
.pre-line {
white-space: pre-line;
}
CSS의 white-space 속성은 요소 내의 공백과 줄바꿈을 어떻게 처리할지 결정합니다. 이 속성은 텍스트의 줄바꿈, 공백, 탭 처리 방식을 제어하여, 텍스트의 표시 방법을 조정할 수 있습니다.
예를 들어, 코드 블록이나 시적인 구절을 그대로 표시하고자 할 때 pre나 pre-wrap 값을 사용할 수 있으며, 긴 URL이나 주소 등을 한 줄로 표시하고 싶을 때는 nowrap을 사용할 수 있습니다.
normal
기본값이며 공백과 탭은 하나의 공백으로 축약됩니다. 또한 자연스러운 줄바꿈이 일어납니다. 즉, 텍스트가 요소의 너비를 넘어가면 자동으로 줄바꿈됩니다.
nowrap
공백과 탭은 하나의 공백으로 축약되지만, 자동 줄바꿈은 일어나지 않으며 텍스트가 요소의 너비를 넘어가도 줄바꿈 없이 한 줄로 표시됩니다.
pre
HTML에서와 같이 공백과 줄바꿈을 모두 유지합니다. 공백, 탭, 줄바꿈이 그대로 표시되며, 텍스트는 소스 코드에 작성된 그대로 표시됩니다. 자동 줄바꿈은 일어나지 않습니다.
pre-wrap
pre와 유사하게 공백, 탭, 줄바꿈을 그대로 유지합니다. 하지만 텍스트가 요소의 너비를 넘어가면 줄바꿈이 일어납니다. 이 설정은 텍스트의 서식을 유지하면서도, 요소의 너비에 맞춰 자동으로 줄바꿈을 원할 때 유용합니다.
pre-line
공백과 탭은 하나의 공백으로 축약되지만, HTML에서와 같이 줄바꿈은 유지됩니다. 자동 줄바꿈이 일어나며, 필요에 따라 추가적인 줄바꿈이 적용됩니다.