5. CSS 텍스트 관련 스타일

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);
}

• #c 요소에 다양한 방식으로 색상을 지정했습니다.
• red: 기본 색상명
• #f57230: 16진수 색상 코드
• rgb(15, 94, 48): RGB 색상 값
• rgba(15, 94, 48, 0.452): 투명도를 포함한 RGBA 색상 값

실습 예제

<h2>color : 텍스트 색상 지정</h2>
<pre id="c">
    선택자{
        color: 색상명 | #16진수(코드값) | rgb(x,x,x) | rgba(x,x,x,x) 
    }
</pre>

• 다양한 색상 지정 방법을 이용해 텍스트의 색상을 설정할 수 있습니다.

2. 텍스트에 줄 긋기: text-decoration

text-decoration 속성은 텍스트에 줄을 긋거나 줄을 없애는 데 사용됩니다. underline, overline, line-through 등 다양한 옵션을 제공하여 텍스트를 꾸밀 수 있습니다.

예제 코드와 설명

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

• #td1: 텍스트 아래에 줄을 긋습니다.
• #td2: 텍스트 가운데에 줄을 긋습니다.
• #td3: 텍스트 위에 줄을 긋습니다.

실습 예제

<h2>text-decoration : 텍스트에 줄을 긋거나 줄을 없앨 때 사용</h2>
<pre>
    선택자{
        text-decoration : none | underline | overline | line-through;
    }
</pre>

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

• 텍스트에 다양한 방식으로 줄을 그어 시각적 효과를 줄 수 있습니다.

3. 텍스트 정렬: text-align

text-align 속성은 텍스트를 좌우 또는 중앙에 정렬할 때 사용됩니다. left, right, center, justify 등의 값을 사용하여 텍스트를 원하는 위치에 정렬할 수 있습니다.

예제 코드와 설명

p {
    text-align: left;
    text-align: right;
    text-align: center;
    text-align: justify;
}

• left: 텍스트를 왼쪽으로 정렬합니다.
• right: 텍스트를 오른쪽으로 정렬합니다.
• center: 텍스트를 중앙으로 정렬합니다.
• justify: 텍스트를 양쪽 정렬합니다.

실습 예제

<h3>text-align : 텍스트 정렬할 때 사용</h3>
<pre>
    선택자{
        text-align: left(기본값) | right | center | justify
    }
</pre>

<h4>왼쪽정렬(기본값)</h4>
<p style="text-align: left;">텍스트 예제</p>

<h4>양쪽정렬</h4>
<p style="text-align: justify;">텍스트 예제</p>

<h4>중앙정렬</h4>
<p style="text-align: center;">텍스트 예제</p>

<h4>오른쪽정렬</h4>
<p style="text-align: right;">텍스트 예제</p>

• 다양한 텍스트 정렬 방법을 통해 레이아웃을 조정할 수 있습니다.

4. 줄 간격 조절: line-height

line-height 속성은 텍스트 줄 간격을 조절할 때 사용됩니다. 픽셀 단위, em 단위, 백분율 등 다양한 단위를 사용하여 줄 간격을 조정할 수 있습니다.

예제 코드와 설명

p {
    line-height: normal;
    line-height: 30px;
}

• normal: 기본 줄 간격으로 설정합니다.
• 30px: 고정된 픽셀 단위로 줄 간격을 설정합니다.

실습 예제

<h3>line-height : 줄 간격 조절할 때 사용</h3>

<pre>
    선택자{
        line-height: normal | px | em | %
    }
</pre>

<h4>px고정단위 간격</h4>
<p style="line-height: 30px;">텍스트 예제</p>

• 줄 간격을 조절하여 텍스트의 가독성을 높일 수 있습니다.