텍스트 스타일

■ 서체와 글 스타일 기본

○ 기본체와 동일한 경우 서체 불러오는 방법

body {     font-family:'돋움',dotum, helvetica, sans-serif }
		'돋움' = 서체값이 두단어 이상이거나 영어가 아닌 경우 따옴표
dotum = 영문윈도우 기반
helvetica = 맥 os기반의 컴퓨터 대비

○ 웹에 올려 연결하는 방법 @font-face를 지원한다.

@font-face{     font-family: '폰트명'; src: url(폰트경로); }

○ 구글 폰트 사이트 (http://www.fonts.google.com)

<link href="" rel="">	html head와 head사이에 넣어야 한다.
font-fmily : "xx", sans-seif;	CSS에 넣어 줘야 한다.
@import url('');	CSS에 넣어 줘야 한다.

■ 글자 스타일 기본

종류	내용
font-size	px, %, em, rem vw 형태로 사용한다.
font-weight	기본값 : normal,  lighter(얇게), bold(두껍게) / 400이 기본값이며 100~900까지 있다.
text-decoration	none(기본), underline(밑줄), line-through(중앙줄), Overline(윗줄)
font-style	normal(기본), italic(기울임), inherit(부모요소 속성 상속)
text-align	글자와 글자성격이 있는 inline요소까지 함께 정렬 left(왼쪽), center(중앙), right(오른쪽), justify(균등분할)

■ 글자 간격

종류	내용
letter-spacing	글자 사이 간격 (10px, 1em) // 포토샵에서 120이라면 0.12em
word-spacing	단어 사이 간격
line-height	글자의 높이 (줄하나의 높이 값)

■ 수직정렬(vertical-align)

○ 글자또는 인라인 요소끼리 위아래 간격을 맞춤 백분율 지정가능 (이미지를 정렬할때도 사용함)

속성	내용
baseline	글자의 기본선 /  기본적으로 p에서 동그란 부분의 바로 밑을 의미한다.
top, bottom	위, 아래요소 맞춤
sup, super	부모요소와 맞게

○ 이미지는 기본적으로 밑에 기본 빈공간이 존재한다. 그때 vertical-align: top;을 해주면 올라간다.