7.1 text-decoration 속성
CSS는 웹 페이지의 텍스트 스타일링과 데코레이션을 위한 다양한 속성을 제공합니다. text-decoration, text-transform, text-shadow 속성은 텍스트에 밑줄을 추가하거나, 대소문자를 변경하거나, 그림자를 만들어 더 표현력 있고 매력적인 텍스트를 만들 수 있도록 도와줍니다.
text-decoration 속성은 텍스트의 밑줄, 오버라인, 취소선 같은 장식 효과를 관리합니다. 이 속성을 통해 텍스트 장식에 사용되는 선의 색상과 스타일도 설정할 수 있습니다.
값:
none: 모든 텍스트 장식 제거underline: 텍스트에 밑줄overline: 텍스트 위에 선 추가line-through: 텍스트에 취소선 추가blink: 텍스트 깜박임 (모든 브라우저에서 지원되는 것은 아님)text-decoration-color: 장식 선의 색상 설정text-decoration-style: 선의 스타일 설정 (solid, double, dotted, dashed, wavy)text-decoration-thickness: 장식 선의 두께 설정
사용 예시:
CSS
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
HTML
<body>
<p class="underline">이 텍스트는 밑줄이 그어져있습니다.</p>
<p class="overline">이 텍스트는 오버라인이 그어져있습니다.</p>
<p class="line-through">이 텍스트는 취소선이 그어져있습니다.</p>
<p class="custom-decoration">이 텍스트는 물결치는 빨간색 밑줄이 그어져있습니다.</p>
</body>
7.2 text-transform 속성
text-transform 속성은 텍스트의 대소문자를 변경하여 변환을 관리합니다. 이는 제목을 자동으로 대문자로 변경하거나 소문자로 변경하는 데 유용합니다.
값:
none: 변환 없음 (기본값)capitalize: 각 단어의 첫 글자를 대문자로 변경uppercase: 모든 글자를 대문자로 변경lowercase: 모든 글자를 소문자로 변경full-width: 텍스트를 전체 너비로 변환 (모든 브라우저에서 지원되는 것은 아님)
사용 예시:
CSS
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
HTML
<body>
<p class="capitalize">이 텍스트는 각 단어의 첫 글자가 대문자로 변환됩니다.</p>
<p class="uppercase">이 텍스트는 모두 대문자로 변환됩니다.</p>
<p class="lowercase">이 텍스트는 모두 소문자로 변환됩니다.</p>
</body>
7.3 text-shadow 속성
text-shadow 속성은 텍스트에 그림자를 추가하여 시각적 효과를 만들고 웹 페이지에서 텍스트의 가독성을 향상시킵니다.
값:
<offset-x>: 그림자의 X 축 이동 (수평)<offset-y>: 그림자의 Y 축 이동 (수직)<blur-radius>: 그림자의 블러 반경 (선택 사항)<color>: 그림자의 색상 (선택 사항)
사용 예시:
CSS
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
HTML
<body>
<p class="text-shadow">이 텍스트에는 그림자가 있습니다.</p>
<p class="multiple-shadows">이 텍스트에는 여러 개의 그림자가 있습니다.</p>
</body>
코드 설명:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: 수평 이동 2px, 수직 이동 3px, 블러 반경 4px, 반투명 검정색 그림자 추가text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: 서로 다른 매개변수로 두 개의 그림자를 추가하여 복잡한 시각적 효과 생성
GO TO FULL VERSION