[CSS] 07_텍스트를 표현하는 다양한 스타일(텍스트 속성)

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다.

 

01 글꼴 관련 스타일

종류	속성	사용 방법
font-family	글꼴 지정	font-family: <글꼴이름>, <글꼴이름2>, ... ex) font-family : "맑은 고딕", 돋움, 굴림, ...
font-size	글자 크기	font-size: <절대크기> | <상대크기> | <크기> | <백분율> ex) font-size : 10px
font-style	이탤릭체	font-style: normal / italic / oblique(이탤릭체)
font-weight	글자 굵기	font-weight : normal / bold / bolder(더 굵게) / lighter / 100~900

* 글꼴 이름이 두단어 이상일 땐 "맑은 고딕" 처럼 큰 따옴표로 묶어준다.

* 글자 크기 단위 : px(절대), pt(절대), em(상대)    //음수값 사용불가능

 

 

02 웹 폰트 사용하기

1. 형식

@font-face {
	font-family: <글꼴 이름>;
	src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ...]; //글자 파일 경로
	}

 

2. 구글 폰트 사용하기

 

1) 구글 폰트 사이트 접속

Browse Fonts - Google Fonts

Google Fonts

2) 폰트 선택

3) Select this style 클릭

4) import선택, 복사

5) 웹 문서에 소스넣고 확인

 

폰트 적용 결과

 

 

03 텍스트 관련 스타일

종류	속성	사용 방법
color	색상 지정	color: <색상>
text-align	텍스트 정렬	text-align: start / end / left / right / center / justify(양쪽에 맞춰 정렬) / match-parent(부모 요소따라)
line-height	줄 간격 조절	line-height : 절대 크기/ 백분율 ex) line-height: 24px / 2.0 / 200%
text-decoration	밑줄/취소선	text-decoration: none / underline / overline
text-shadow	그림자 효과	text-shadow: none / <가로거리> <세로거리> <번짐정도> <색상> ex) text-shadow: 1px -1px 3px black;
text-transform	대소 문자	text-transform: none / capitalize / uppercase / lowercase / full-width *full-width : 가로와 세로길이 비율같은 전각문자
letter-spacing	글자 간격 조절(자간)	letter-spacing: px/em/%
word-spacing	단어 간격 조절	word-spacing: px/em/%

> 색상 표현방법

① hsl, hsla : 색상, 채도, 명도, 불투명도로 나타냄. ex) hsl(0, 100%, 50%) 

② 영문명 : 색상 이름을 영어로 표현 ex) black, blue

③ 16진수 : #RRGGBB 로 표현, 두자리 중복시 줄여서 표현 가능

④ rgb / rgba : 빨, 초, 파 색상값을 나타냄  ex) rgb(0, 0, 255)

 

 

04 목록 스타일

종류	모양
disc (채운 원)	●
circle (빈 원)	○
square (네모)	■
decimal (숫자)	1, 2, 3, ..
decimal-leading-zero (숫자)	01, 02, ...
lower-roman (소문자로마)	i, ii, iii, ...
upper-roman (대문자로마)	l, ll, lll, ...
lower-alpha / lower-latin (소문자)	a, b, c, ...
upper-alpha / upper-latin (대문자)	A, B, C, ...
none	없음

 

- 목록 이미지 사용

list-style-image: url('경로');

- 목록 들여쓰기

list-style-position: inside/outside;

* list-style : 앞선 속성 한꺼번에 표시가능

 

05 표 스타일

종류	속성	사용 방법
caption-side	표 제목 위치	cation-side: top / bottom
border	표 테두리	border: 크기 모양 색상 * 모양 : solid, dotted
border-spacing	셀 사이 여백	border-spacing: 수평거리 수직거리
border-collapse	표와 셀 테두리 합침(한 줄로 표현)	border-collapse: collapse(하나로 표시) / seperate : 두 줄(기본값)