[HTML+CSS+JavaScript] CSS 텍스트(text) 관련 속성
CSS에서 텍스트를 다루는 것은 웹 페이지의 가독성과 디자인을 결정하는 중요한 요소입니다. 다양한 텍스트 관련 속성을 활용하여 텍스트의 크기, 색상, 스타일, 정렬 등을 세밀하게 조절할 수 있습니다.
|
1. 텍스트의 기본적인 스타일링
font-family: 텍스트에 사용할 글꼴을 지정합니다. 시스템에 설치된 글꼴이나 웹폰트를 사용할 수 있습니다.
font-size: 텍스트의 크기를 지정합니다. px, em, rem 등 다양한 단위를 사용할 수 있습니다.
font-weight: 텍스트의 굵기를 지정합니다. bold, bolder, lighter, 100~900 숫자 등을 사용할 수 있습니다.
font-style: 텍스트의 스타일을 지정합니다. normal, italic, oblique 등을 사용할 수 있습니다.
color: 폰트의 색상을 지정합니다▶ 예제 소스
<!DOCTYPE html>
<html>
<head>
<style>
p {
/* 글꼴 설정: Arial 폰트를 우선 사용하고, Arial이 없을 경우 sans-serif 계열 폰트를 사용 */
font-family: Arial, sans-serif;
/* 글자 크기 설정: 텍스트 크기를 16픽셀로 고정 */
font-size: 16px;
/* 글자 굵기 설정: 텍스트를 굵게 표시 */
font-weight: bold;
/* 글자 스타일 설정: 텍스트를 기울임체로 표시 */
font-style: italic;
}
</style>
</head>
<body>
<!-- CSS 스타일이 적용된 단락 -->
<p>이 문장은 설정된 스타일이 적용된 텍스트입니다.</p>
</body>
</html>♠ 결과
'프로그래밍 > html+css+js' 카테고리의 다른 글
| [HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기 (4) | 2025.01.19 |
|---|---|
| [HTML+CSS+JavaScript] CSS font-family 사용법 (1) | 2025.01.17 |
| [HTML+CSS+JavaScript] CDN URL 모음 (1) | 2025.01.16 |
| [HTML+CSS+JavaScript] side bar(사이드바) 보이고 감추기 (6) | 2025.01.12 |
| [HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기 (2) | 2025.01.12 |