<6> 텍스트 스타일

 

 

font-family - 폰트를 정의

h1{font-family:"맑은 고딕", 돋움, 굴림}

h1 태그에 맑은 고딕을 사용하지만 없다면 돋움, 그것도 없다면 굴림을 사용하겠다

 

 

웹폰트를 가져오는 예시

/* 나눔고딕 */
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

.nanumgothic * {
 font-family: 'Nanum Gothic', sans-serif;
}

/* 사용 */
<p class = "nanumgothic"> 나눔고딕 웹폰트 사용

 

 

font-size : 속성 값

절대 크기 - 브라우저에서 지원하는 크기 xx-small, x-small, small, | medium, | large, x-large, xx-large

상대 크기 - 부모 요소의 font-size를 기준으로 크기를 조절 larger, smmaller

크기 - 브라우저와 상관없이 크기를 지정 {

   em - 해당 글꼴의 대문자 M을 기준으로 크기를 조절

   ex - x의 높이를 기준으로 크기를 조절

   px - 픽셀, 모니터에 따라 상대적 크기

   pt - 포인트. 일반 문서에서 가장 접하기 쉬운 단위 }

백분율 - 부모 요소의 글자크기를 기준으로 %를 표기  100%

 

 

font-weight :  속성 값

normal - 기본 굵기

bold, bolder, lighter - 굵게, 더 굵게, 가늘게

100~900까지 100 단위 - 400 기준(normal)으로 조절

 

 

color : 속성 값

#ffffff, rgb(0,0,0), white

 

 

text-decoration 

텍스트에 밑줄 또는 가로지르는 줄

텍스트 링크의 밑줄을 제거 가능

none - 제거

underline - 밑줄

overline - 윗줄

line-through - 텍스트를 가로지르는 줄

 

 

text-transform 

영문의 텍스트의 대문자나 소문자를 바꾸기

none - 그대로

capitalize - 문장의 첫 글자만 대문자로

uppercase - 모든 글자를 대문자로

lowercase - 모든 글자를 소문자로

full-width - 가능한 모든 문자를 전각 문자로 (가로 세로비가 1:1)

 

 

text-shadow : 가로 거리, 세로 거리, 번짐, 색상

 

 

text-align 

start - 줄의 시작 위치에 정렬

end - 줄의 끝에 정렬

left - 왼쪽

right - 오른쪽

center - 중앙

justify - 양쪽 맞춤

match-parent - 부모를 따라

 

 

text-justify 

text-align = "justify"일 때 적용 가능 

auto - 자동으로 지정

none - 정렬 안 함

inter-word - 단어 사이의 공백들 조절

distribute - 글자 사이의 공백을 똑같이 지정(글자 하나씩 떨어져 일정하게 배치)

 

 

text-indent : 크기, 백분율

들여 쓰기 지정

 

line-height : 1.5, 2, 2.5 

줄 간격