[CSS기초] 6. CSS속성 - 글꼴, 문자

6. CSS속성 – 글꼴,문자

6.1. font -글자의 크기,색상등을 지정

값	의미	기본값
font-style	글자기울기	normal
font-weight	글자두께	normal(400)//100-900 백단위
font-size	글자크기	medium (16px)
line-height	줄 높이	normal
font-family	글꼴	운영체제에따라 달라짐

 

*사용법 – font: 기울기 두께 크기 / 즐높이 글꼴 *ex)  .box {            font : italic bold 20px / 1.5 “arial” }

 

6.2. color – 글자의 색상을 바꿔줌 // background-color 와는 다름

색상표현의 예시

값	의미	예시
색상이름	브라우저에서 제공하는 색상	red, blue
hex 색상코드	16진수 색상	#ffffff
RGB	빛의 삼원색	rgb(255,255,255)
RGBA	빛의 삼원색 + 투명도	rgba(255,255,255, 0.5)
HSL	색상,채도,명도	hsl(120,100%,50%)
HSLA	색상,채도,명도,투명도	hsla(120, 100%, 50%, 0.3)

 

ex) .main {            color : #fff003; }

 

6.3. text-align – 택스트 정렬

값	의미
left	왼쪽정렬
right	오른쪽 정렬
center	가운데 정렬
justify	양쪽 맞춤

 

ex) .main {            text-align : center; }

 

6.4. text-decoration – 선에대한 장식을 함

값	의미	기본값
none	선없음	none
underline	밑줄
overline	윗줄
line-through	중앙을 가로지르는 선

 

ex)  .main {            text-decoration : underline; }

 

6.5. text-indent – 들여쓰기 //음수값도 사용가능

ex) .main {            text-indent : center; }

 

6.6. letter-spacing – 글자간의 간격을 설정

값	의미	기본값
normal	일반적인간격	normal
단위	px, em, cm 등의 단위

 

ex) div {            letter-spacing : 5px; }

 

6.7. word-spacing – 단어사의의 간격 //띄어쓰기 간격

값	의미	기본값
normal	일반적인간격	normal
단위	px, em, cm 등의 단위

 

ex) div {            word-spacing : 5px; }

References: heropy.blog