5. CSS 텍스트 관련 스타일

웹페이지에서 텍스트의 스타일을 조절하는 것은 디자인의 중요한 요소 중 하나입니다.
이번 글에서는 CSS를 사용하여 텍스트의 색상, 줄 간격, 정렬, 장식 등 다양한 스타일을 설정하는 방법을 살펴보겠습니다.

1. 텍스트 색상 지정: color

color 속성은 텍스트의 색상을 지정하는 데 사용됩니다. 색상은 이름, 16진수 코드, RGB, RGBA 등의 다양한 방식으로 표현할 수 있습니다.

예제 코드와 설명

#c {
    color: red;
    color: #f57230;
    color: rgb(15, 94, 48);
    color: rgba(15, 94, 48, 0.452);
}

• color: red;: 텍스트를 빨간색으로 지정합니다.
• color: #f57230;: 텍스트를 16진수 코드를 사용해 주황색으로 지정합니다.
• color: rgb(15, 94, 48);: RGB 값을 사용해 초록색으로 지정합니다.
• color: rgba(15, 94, 48, 0.452);: RGBA 값을 사용해 투명도가 포함된 초록색으로 지정합니다.

2. 텍스트 장식: text-decoration

text-decoration 속성은 텍스트에 밑줄, 취소선, 윗줄 등의 장식을 추가하거나 없앨 때 사용됩니다.

예제 코드와 설명

#td1 { text-decoration: underline; }
#td2 { text-decoration: line-through; }
#td3 { text-decoration: overline; }

• text-decoration: underline;: 텍스트 아래에 밑줄을 긋습니다.
• text-decoration: line-through;: 텍스트 가운데에 취소선을 긋습니다.
• text-decoration: overline;: 텍스트 위에 윗줄을 긋습니다.

실습 예제

<ul>
    <li id="td1">텍스트 영역 아래 줄 긋기</li>
    <li id="td2">텍스트 영역 중간에 줄 긋기</li>
    <li id="td3">텍스트 영역 위에 줄 긋기</li>
</ul>

• 각 텍스트는 지정된 text-decoration 속성에 따라 밑줄, 취소선, 윗줄이 추가됩니다.

3. 텍스트 정렬: text-align

text-align 속성은 텍스트의 정렬 방식을 설정하는 데 사용됩니다. 왼쪽, 오른쪽, 중앙, 양쪽 정렬이 가능합니다.

예제 코드와 설명

<p style="text-align: left;">왼쪽 정렬된 텍스트입니다.</p>
<p style="text-align: justify;">양쪽 정렬된 텍스트입니다.</p>
<p style="text-align: center;">중앙 정렬된 텍스트입니다.</p>
<p style="text-align: right;">오른쪽 정렬된 텍스트입니다.</p>

• text-align: left;: 텍스트를 왼쪽에 정렬합니다.
• text-align: justify;: 텍스트를 양쪽에 정렬합니다.
• text-align: center;: 텍스트를 중앙에 정렬합니다.
• text-align: right;: 텍스트를 오른쪽에 정렬합니다.

4. 줄 간격 조절: line-height

line-height 속성은 텍스트 줄 간격을 조절하는 데 사용됩니다. 이 속성은 텍스트의 가독성을 높이는 데 중요한 역할을 합니다.

예제 코드와 설명

p {
    line-height: 30px;
}

• line-height: 30px;: 텍스트의 줄 간격을 30픽셀로 설정합니다.

실습 예제

<p style="line-height: 30px;">줄 간격이 30픽셀로 설정된 텍스트입니다.</p>

• 이 텍스트는 줄 간격이 30픽셀로 설정되어 가독성이 높아집니다.