본문 바로가기
Web/CSS

[CSS 기본 개념] 텍스트/폰트 설정

by 나비와꽃기린 2016. 6. 23.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


1. 스타일링

1.1  텍스트 꾸미기

-텍스트를 감싸는 태그가 필요

-<span> 태그로 감싸고 여기에 효과를 준다

color

red, #FF0000, blue

색상

direction

ltr, rtl

방향

line-height

150%

행간격 지정

letter-spacing

-0.1px

문자와 문자사이의 간격을 지정

text-align

left, right, center, justify

정렬

text-decoration

none, underline, overline, line-through, blink

텍스트 장식

text-indent

20px

들여쓰기

text-transform

none, capitalize, uppercase, lowercase

대소문자 지정

word-spacing

1px

단어 간격

white-space

Normal, nowrap, pre, pre-line, pre-wrap, initial

줄 바꿈되는 방식을 지정

vertical-align

Middle, bottom, 10px, 10%

텍스트의 수직 정렬을 지정

 

1.2  폰트 꾸미기

-텍스트의 글꼴과 스타일을 지정

-font-family 속성을 이용하면 텍스트의 글꼴을 지정할 수 있다.

(돋움, 궁서, 바탕, AppleGothic, Arial, sans-serif)

*serif(세리프)- 대표적인 글꼴로 바탕체, 궁서체, Time New Roman이 있다

*sans-serif(산세리프) 굴림체, 돋음체, Arial, Verdana가 대표적이다.

- font-size 속성을 이용하면 텍스트의 크기를 지정할 수 있다. Ex) <p style="font-size: 10px">

- font-weight 속성을 이용하면 텍스트의 굵기를 지정할 수 있다. Ex) <p style="font-weight: bold">