[CSS] CSS 텍스트 스타일링 필수 속성 총정리 (font, color, align)

crushed-taro 2025. 3. 19. 15:06

2025. 3. 19. 15:06

728x90

[CSS] CSS 글꼴(font) 스타일 개념과 예제 | 폰트 설정하는 법

1. 글꼴 스타일font-family글꼴의 종류를 지정합니다. 여러 개의 이름을 지정하는 경우, 종류가 설치되어 있지 않은 경우에 대비하여 대체할 글꼴을 순서대로 지정합니다.serif명조체sans-serif고딕체mo

crushed-taro.tistory.com

1. 텍스트 스타일

Color
- 글자 색상을 나타내는 속성
  - 색상 이름 (ex. red, blue)
  - RGB 값 (ex. rgb(255, 0, 0))
  - HEX 코드 (ex. #FF0000)
Text-decoration
- 글자 장식을 나타내는 속성
  - underline: 밑줄
  - overline: 윗줄
  - line-through: 가운데 줄
  - none: 장식 없음
Text-transform
- 대소문자 변환을 나타내는 속성
  - none: 변환 없음
  - uppercase: 대문자로 변환
  - lowercase: 소문자로 변환
  - capitalize: 단어의 첫 글자만 대문자로 변환
Text-shadow
- 글자 그림자를 나타내는 속성
  - h-shadow: 그림자의 수평 위치
  - v-shadow: 그림자의 수직 위치
  - blur-radius: 그림자의 흐림 정도
  - color: 그림자의 색상
White-space
- 공백 처리를 나타내는 속성
  - normal: 기본값
  - nowrap: 줄 바꿈 없음
  - pre: 공백 유지
  - pre-wrap: 공백 유지 및 줄 바꿈
  - pre-line: 첫 번째 줄 이외의 줄에서는 공백 유지하지 않음
Letter-spacing
- 글자 간격을 나타내는 속성
  - normal: 기본값
  - 길이 값 (ex. 10px)
Word-spacing
- 단어 간격을 나타내는 속성
- normal: 기본값
- 길이 값 (ex. 10px)

속성	설명
Color	글자 색상을 지정합니다.
Text-decoration	글자에 밑줄, 윗줄, 가운데 줄 등의 장식을 추가합니다.
Text-transform	대소문자 변환을 지정합니다.
Text-shadow	글자 그림자를 지정합니다.
White-space	공백 처리를 지정합니다.
Letter-spacing	글자 간격을 지정합니다.
Word-spacing	단어 간격을 지정합니다.

2. 예제 코드

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>텍스트 스타일</title>
  <style>
	/*텍스트 색상 지정*/
	#c-name { color : red; }
	#c-16 { color : #ff0000; }
	#c-rgb { color : rgb(255, 0, 0); }
	#c-rgba { color : rgba(255, 0, 0, 0.1); }

	/* 
		hsl(색조(0~360), 채도(0~100%), 명도(0~100%))
		색조는 0 = red, 120 = green, 240 = blue
	 */
	#c-hsl { color : hsl(340, 100%, 50%); }
	#c-hsla { color : hsla(360, 100%, 50%, 0.5); }

	/*텍스트 줄 표시하기/없애기 지정*/
	#td1 { text-decoration : none; }
	#td2 { text-decoration : underline; }
	#td3 { text-decoration : line-through; }
	#td4 { text-decoration : overline; }

	/*텍스트 대소문자 변경 지정*/
	#tt1 { text-transform : none; }
	#tt2 { text-transform : capitalize; }
	#tt3 { text-transform : uppercase; }
	#tt4 { text-transform : lowercase; }

	/*텍스트에 그림자 효과 지정*/
	#bg { 
		background : black;
		margin : 30px;
		padding : 50px;
	}
	/*공통 속성으로 사이즈와 두께를 지정*/
	.shadow { 
		font-size : 80px;
		line-height : 30px;
		font-weight : 900;
	}
	/*그림자 효과*/
	#ts1 {
		color : orangered;
		text-shadow : 5px 5px orange;
	}
	#ts2 {
		color : white;
		text-shadow : 0px 1px 20px #fff;
	}
	#ts3 {
		color : white;
		text-shadow : 1px 1px 20px #6f0;
	}
	#ts4 {
		color : black;
		text-shadow : 0px 0px 4px #ccc, 0px -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;
	}
	
    /* 공백은 무조건 한칸, default, 엔터쳐도 공백 한칸(개행 x) */
	#space1 {
		white-space:normal;
		letter-spacing:5px;
	}

    /* 공백은 무조건 한칸, 화면 밖으로 내용 있음(wrap x), 개행 x */
	#space2 {
		white-space:nowrap;
		word-spacing:10px;
	}

    /* 공백 유지, 엔터 쳐야만 다음 줄 */
	#space3 {
		white-space:pre;
	}

    /* 공백은 무조건 한칸, 화면 밖으로 내용 없음(wrap) */
	#space4 {
		white-space:pre-line;
	}

    /* 공백 유지, 화면 밖으로 내용 없음(wrap) */
	#space5 {
		white-space:pre-wrap;
	}
  </style>
 </head>
 <body>
  <h1>텍스트 스타일</h1>
	<hr>

	<h3>color 속성 : 텍스트의 색상을 지정할 수 있다.</h3>
	<pre> 선택자 { color : 색상명영문이름 | 16진수숫자 | rgb값 | rgba값 | hsl값 | hsla값; }의 형식으로 사용된다.</pre>
	<p>색상값 참조 사이트 : <a href="http://www.colorpicker.com" target="_blank">사이트로 이동</a></p>
    <p>테마별 색상값 참조 사이트 : <a href="https://color.adobe.com/ko/explore" target="_blank">사이트로 이동</a></p>
	<ul>
		<li id="c-name">색상명으로 지정</li>
		<li id="c-16">16진수 값으로 지정</li>
		<li id="c-rgb">rgb로 지정</li>
		<li id="c-rgba">rgba로 지정</li>
		<li id="c-hsl">hsl로 지정</li>
		<li id="c-hsla">hsla로 지정</li>
	</ul>
	<hr>

	<h3>text-decoration 속성 : 텍스트에 줄을 긋거나 줄을 없앨 때 사용한다.</h3>
	<pre> 선택자 {text-decoration : none | underline | overline | line-through; }의 형식으로 표현한다.</pre>
	<ul>
		<li><a href="#" id="td1">하이퍼링크 밑줄 없애기</a></li>
		<li id="td2">텍스트영역 아래 줄 긋기</li>
		<li id="td3">텍스트영역 중간에 줄 긋기</li>
		<li id="td4">텍스트영역 위에 줄 긋기</li>
	</ul>
	<hr>

	<h3>text-transform 속성 : 영문 텍스트의 대소문자 변환시 사용한다.</h3>
	<pre> 선택자 { text-transform : none | capitalize | uppercase | lowercase; }의 형식으로 표현한다.</pre>
	<ul>
		<li id="tt1">none</li>
		<li id="tt2">capitalize : 영문자의 첫 글자만 대문자로</li>
		<li id="tt3">uppercase : 모든 영문자를 대문자로</li>
		<li id="tt4">lowercase : 모든 영문자를 소문자로</li>
	</ul>
	<hr>

	<h3>text-shadow 속성 : 텍스트에 그림자 효과를 줄 때 사용한다.</h3>
	<pre> 선택자 { text-shadow : none | 가로거리 세로거리 번짐정도 색상; }의 형식으로 표현한다.</pre>
	<div id="bg">
		<span id="ts1" class="shadow">HTML5</span>&nbsp;&nbsp;&nbsp;&nbsp;
		<span id="ts2" class="shadow">HTML5</span>&nbsp;&nbsp;&nbsp;&nbsp;
		<span id="ts3" class="shadow">HTML5</span>&nbsp;&nbsp;&nbsp;&nbsp;
		<span id="ts4" class="shadow">HTML5</span>
	</div>
	
	<hr>

	<p id="space1">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
                   명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
	<p id="space2">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
                   명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
	<p id="space3">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
                   명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
	<p id="space4">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
                   명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
	<p id="space5">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
                   명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
 </body>
</html>

3. 결과 화면

728x90

'이것 저것 개발 공부 > CSS' 카테고리의 다른 글

[CSS] CSS 목록 스타일 완벽 가이드 : ul, ol, li 꾸미는 방법 (0)	2025.03.19
[CSS] CSS 문단 스타일 완벽 가이드: 정렬, 간격, 줄 간격 설정하기 (0)	2025.03.19
[CSS] CSS 글꼴(font) 스타일 개념과 예제 \| 폰트 설정하는 법 (0)	2025.03.18
[CSS] CSS 선택자 완벽 가이드 \| 초보자도 쉽게 이해하는 스타일링 (0)	2025.03.18
[CSS] CSS 개요 \| 웹 스타일링의 기초부터 핵심 개념까지 (0)	2025.03.18

crushed-taro 님의 블로그

[CSS] CSS 텍스트 스타일링 필수 속성 총정리 (font, color, align)

1. 텍스트 스타일

2. 예제 코드

3. 결과 화면

'이것 저것 개발 공부 > CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바