CSS Text
CSS Text: 웹 페이지에서 텍스트 스타일링하는 방법
CSS를 사용하면 HTML 요소의 텍스트를 다양한 방법으로 스타일링할 수 있습니다. 텍스트의 색상, 크기, 정렬, 장식, 공간 등을 조정하여 웹 페이지의 가독성을 높이고, 디자인을 향상시킬 수 있습니다. 이 자료에서는 CSS 텍스트 속성을 사용하여 텍스트를 스타일링하는 방법을 다룹니다.
1. CSS 텍스트 속성 (Text Properties)
CSS에서는 텍스트를 스타일링하기 위한 다양한 속성을 제공합니다. 이 속성들은 텍스트의 색상, 정렬, 장식 및 공간 등을 제어하여 웹 페이지의 텍스트를 더 아름답고 읽기 쉽게 만듭니다.
주요 CSS 텍스트 속성은 다음과 같습니다:
color: 텍스트의 색상을 설정합니다.text-align: 텍스트의 정렬 방식을 설정합니다.text-decoration: 텍스트에 장식(밑줄, 취소선 등)을 추가합니다.text-transform: 텍스트의 대소문자를 변경합니다.letter-spacing: 텍스트 사이의 글자 간격을 설정합니다.word-spacing: 텍스트 사이의 단어 간격을 설정합니다.line-height: 텍스트의 줄 간격을 설정합니다.text-indent: 첫 번째 줄의 들여쓰기를 설정합니다.
2. color 속성
color 속성은 HTML 요소의 텍스트 색상을 지정하는 속성입니다. 색상은 색상 이름, 16진수
값, RGB, HSL 등의 방식으로 설정할 수 있습니다.
예시:
p {
color: blue;
}위 코드는 파란색(blue) 텍스트를 설정합니다.
자주 사용되는 색상 지정 방식:
- 색상 이름:
red,blue,green등 - 16진수 값:
#ff0000,#00ff00등 - RGB 값:
rgb(255, 0, 0),rgb(0, 255, 0)등 - HSL 값:
hsl(0, 100%, 50%),hsl(120, 100%, 50%)등
3. text-align 속성
text-align 속성은 텍스트의 정렬 방식을 설정하는 속성입니다. 주로 텍스트를 왼쪽, 오른쪽, 중앙 또는 양쪽에 맞추어 정렬할 때 사용됩니다.
예시:
h1 {
text-align: center;
}위 코드는 <h1> 요소의 텍스트를 중앙 정렬합니다.
자주 사용되는 값:
left: 왼쪽 정렬 (기본값)right: 오른쪽 정렬center: 중앙 정렬justify: 양쪽 정렬 (양쪽 끝이 맞춰지도록 텍스트를 배치)
4. text-decoration 속성
text-decoration 속성은 텍스트에 장식을 추가하는 속성입니다. 주로 밑줄, 취소선,
윗줄 등을 설정하는 데 사용됩니다.
예시:
a {
text-decoration: underline;
}위 코드는 링크 요소에 밑줄을 추가합니다.
자주 사용되는 값:
none: 장식 없음underline: 밑줄line-through: 취소선 (텍스트에 선이 그어짐)overline: 윗줄
5. text-transform 속성
text-transform 속성은 텍스트의 대소문자 변환을 설정하는 속성입니다. 이 속성은 텍스트를 대문자,
소문자, 또는 첫 글자만 대문자로 변환할 때 유용합니다.
예시:
h2 {
text-transform: uppercase;
}위 코드는 <h2> 요소의 텍스트를 모두 대문자로 변환합니다.
자주 사용되는 값:
none: 변환 없음 (기본값)uppercase: 모든 글자를 대문자로 변환lowercase: 모든 글자를 소문자로 변환capitalize: 각 단어의 첫 글자를 대문자로 변환
6. letter-spacing 속성
letter-spacing 속성은 글자 간의 간격을 설정하는 속성입니다. 이 속성을 사용하면 텍스트의 글자 사이를 더 좁히거나 넓힐 수 있습니다.
예시:
h1 {
letter-spacing: 2px;
}위 코드는 <h1> 요소의 글자 간격을 2px로 설정하여, 글자 사이를 넓힙니다.
7. word-spacing 속성
word-spacing 속성은 텍스트의 단어 간 간격을 설정하는 속성입니다. 단어 사이의 간격을 조정하여 텍스트의 가독성을 향상시킬 수 있습니다.
예시:
p {
word-spacing: 5px;
}위 코드는 <p> 요소의 단어 간격을 5px로 설정합니다.
8. line-height 속성
line-height 속성은 텍스트 줄 간격을 설정하는 속성입니다. 줄 간격은 텍스트의 가독성에 큰 영향을 미치며, 이 속성을 사용해 적절한 간격을 설정할
수 있습니다.
예시:
p {
line-height: 1.6;
}위 코드는 <p> 요소의 줄 간격을 1.6배로 설정합니다. 숫자로 지정한 값은 요소의 글꼴 크기에 비례하여 줄 간격을 결정합니다.
9. text-indent 속성
text-indent 속성은 텍스트의 첫 줄을 들여쓰기할 때 사용됩니다. 주로 문단의 첫 번째 줄을 들여쓰는 데 유용합니다.
예시:
p {
text-indent: 30px;
}위 코드는 <p> 요소의 첫 번째 줄을 30px 들여쓰기합니다.
10. 자주 사용되는 텍스트 예제
텍스트 중앙 정렬:
h1 {
text-align: center;
}밑줄 추가:
a {
text-decoration: underline;
}대문자 변환:
p {
text-transform: uppercase;
}글자 간격 조정:
h2 {
letter-spacing: 3px;
}줄 간격 설정:
p {
line-height: 1.8;
}텍스트의 정렬, 장식, 간격 등을 조정하여 웹 페이지의 가독성과 디자인을 크게 향상시킬 수 있으며, 이를 통해 더 세련된 웹 페이지를 만들 수 있습니다.