텍스트 스타일

텍스트는 웹 문서에서 가장 많이 사용하는 스타일입니다.

글꼴 관련 스타일

웹 문서 안에서 텍스트가눈에 띄게 하려면 내용에 맞는 글꼴과 글자크기，그리고 글자색을 선택하는 것이 중요합니다.

font-family 속성 - 글꼴 지정하기

텍스트를사용하는 요소들에서 주로 사용합니다.

font-family: "글꼴 이름";

글꼴 이름에 큰따옴표를 사용하는 것이 원칙인데, “굴림”처럼 작은 따옴표도 사용할 수 있습 니다.

웹문서의 텍스트는 시스템 운영체제에 글꼴이 설치가 되어 있어야지만, 화면에 출력이 됩니다. 만일, 시스템에 설치되어 있지 않는 글꼴이하면 브라우저에서 기본적으로 설정된 글꼴로 표시가 됩니다.

지정한 글꼴이 없을 경우를 대비해 두 번째，세 번째 글꼴까지 지정할수 있습니다.

font-family: "글꼴 이름" [  , "글꼴 이름" ,   "글꼴 이름"];

글꼴 이름과 글꼴 이름 사이에 쉼표(,))로 구분합니다.

글꼴의 상속
font-family 속성은 상속이 되기 때문에 <body> 태그 스타일에서 한 번 정의하면 문서 전체에 적 용됩니다.

@font-face 속성 - 웹 폰트 사용하기

시스템에 없는 글꼴을 보여주려면 어떻게 해야 할까요? CSS3에서 ‘웹 폰트（web font’를 표준으로 채택하였습니다. 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서 에 접속하면 글꼴을 사용자 시스템으로 다운로드하게 하는 방식입니다.

컴퓨터에서 사용하는 글꼴은 트루타입 （TrueType） 유형 이고, 파일 확장자는 .ttf 입니다. 트루타입 유형의 글꼴은 파일 크기가 너무 크기 때문에 모바일용으로는 적합하지 않습니 다. 웹에 적합한 글꼴 유형이 여러 개 등장했는데 그중에서 *.eot와 *.woff 파일이 많이 사용되고 있습니다.

@font-face {
    font-family: 글꼴 이름;
    src : url（글꼴 파일 경로）format （파일 유형;
}

웹폰트 적용하기

.text {
    font-family:웹폰트1;
}

@font-face에서 지정한 폰트의 이름을 font-family 속성으로으로 이름을 지정해 주면 됩니다.

font-size 속성 - 글자 크기 조절하기

ont-size 속성은글자크기를조절하기 위한 것입니다.

font-size:속성값;

사용할 수 있는 값은 상대 크기와 크기 값과 백분율입니다. 기본 값은 상대 크기인 medium입니다.

font-size 속성은 상속됩 니다.

상대크기란?
특별히 값 을 지정하지 않을 경우 브라우저의 기본 크기대로 표시됩니다

xx-small < x-small < small < medium（기본값）      < large < x-large < xx-large

각 단계 사이의 글꼴 크기는 1.2배씩 커지거나 작아집니다.

크기 값?
직접 글꼴 크기를 지정하는 것으로 음수 값은 사용할 수 없습니다.

em : 해당 글꼴의 대문자 너의 너비를 기준으로 합니다.
ex : x-height. 해당 글꼴의 소문자 x의 높이를 기준으로 합니다.
px : 셀. 모니터에 따라 상대적인 크기가 됩니다.
pt : 포인트 보통 문서에서 많이 사용하는 단위입니다.

브라우저 기본 글꼴 크기 비교

백분율(%)?
백분율 역시 부모 요소의 글꼴 크기를 기준으로 계산됩니다.

백분율로 계산하기 위해서는 부모 요소의 글꼴 크기가 font-size:15px 처럼 크기 값으로 표현되어 있어야합니다.

font-style 속성

글자를 이탤릭체로 표현할 것인지의 여부를 결정합니다.

font-style:속성값;

normal : 일반적인 형태
italic : 이탤릭체로 표시합니다.
oblicque : 이탤릭체로 표시합니다.

font-variant 속성 - 작은 대문자로 표시하기

영문 소문자를 작은 대문자로 표시합니다.

작은 대문자는 원래 대문자와 비숫하게 보이지만，크기가 작고 약간 다른 비율을 가지고 있습니다.

font-variant: 속성 값;

normal : 일반적인 형태
small-caps : 작은 대문자로 표시합니다.

font-weight 속성 - 글자 굵기 지정하기

font-weight 속성은 글자의 굵기를 지 정합니다.

font-weight: 속성값;

normal : 일반적인 형태
bold : 진하게 표시합니다
lighter : 원래 굵기보다 연하게 표시합니다
bolder : 원래 굵기보다 진하게 표시합니다.
100-900 사이의 수치 : 400은 보통. 700은 진하게를 기준으로 숫자를 지정합니다.

font 속성 - 글꼴 속성을 한꺼번에 묶어서 표현하기

font 속성은 앞에서 설명했던 font-style과 font-variant, font-weight, font-size/line-height, font-family 속성들을 한꺼번에 묶어서 약식으로 표현하 는 것입니다.

ont-size와 line-height는 12pt/l4px 처럼 대시(/)로 연결해 함께 표현합니다

텍스트 스타일

글꼴이 폰트와 관련된 내용이었다면，텍스트 스타일은 글자들과 단어들，그리고 글자들로 이루어진 문단에서 사용되는 스타일 입니다.

direction 속성

direction 속성은 텍스트의 쓰기 방향을 지정합니다

direction은 다양한 언어 문화권을 지원해야 할때 유용한 속성입니다. 대부분은 오른쪽에서 왼쪽으로 작성을 하기지만, 아랍권과 같은 문화에서는 왼쪽에 오른쪽으로 작성을 합니다.

direction:속성 값;

ltr : 기본값
rtl

text-align 속성 - 텍스트 정렬하기

tcxt-align 속성은문단의 텍스트 정렬 방법을 지정하는속성입니다.

text-align:속성값;

left
right
center
justify

text-shadow 속성 - 텍스트에 그림자 효과 추가하기

텍스트에 그림자 효과를 추가합니다. 텍스트를 좀 더 입체적으로 보이게 합니다.

text-shadow: h-shadow 값  v-shadow 값  blur 값 color 값;

text-shadow
px(픽셀) 단위로 입 력합니다.
- h-shadow，
- v-shadow
- blur
- color

일반적으로 그림자 색상은 한 가지로 표시하지만, 둘 이상의 그림자 색상을 사용하면 글자를 좀 더 화려하게 만들 수 있습니다

text-overflow 속성 - 넘치는 텍스트 표기하기

박스 모델 요소 안에 텍스트를 표시할 때 줄을 바꾸지 못하도록 지정하고 넘 치는 텍스트는 화면에 보이지 않게 처리하는 경우가 있습니다.

text-overflow:속성값;

clip : 넘치는 텍스트를 잘라버립니다.
ellipsis : 텍스트가 잘렸다는 의미로 말줄임표(“…”) 표시합니다

text-decoration 속성 - 텍스트에 줄 표시하기

텍스트에 밑줄을 긋거나 가로지르는 줄을 표시할 수 있습니다.

text-decoration: 속성값; 

none : 밑줄을 표시하지 않습니다.
underline : 밑줄을 표시합니다.
overline : 영역 위로 선을 그립니다.
line-through : 영역을 가로지르는 선을 그립니다.

속성의 값을 underline과 overline，line-through, 그리고 overlinc과 underline을동시에 적용

응용사례

a태그는 문서의 이동을 표시하기 위하여 밑줄이 표시됩니다. a테그의 밑줄을 삭제합니다.

/* 링크된 텍스트에 밑줄을 표시하지 않음 */
a  {
  text-decoration: none;   
}   

text-indent 속성 - 텍스트 들여쓰기

문단의 첫 글자를 조금씩 들여쓰면 문단 의 시작을 쉽게 일아볼 수 있습니다

/* 텍스트 단락의 첫 글자를 10px만큼 들여씀 */
p {   
  text-indent: 10px;  
}  

texWransform 속성 - 텍스트 대,소문자 변환하기

텍스트를 대문자 또는 소문자로 변환합니다.

text-transform: 속성값;

capitalize : 시작하는 첫 번째 글자를 대문자로 변환합니다.
uppercase : 모든 글자를 대문자로 변환합니다
lowercase : 모든 글자를 소문자로 변환합니다
none

텍스트 간격 조절

여백을 조절하거나 글자 간격, 줄간격을 조절하는 여러 속성을 살펴보겠습니다.

letter-spacing과 word-spaing 속성 - 텍스트 간격 조절하기

글자 사이의 간격을 조절해서 좀 더 여유 있게 표시하면 읽기 편합니다.

letter-spacing 속성은 낱글자와 낱글자 사이의 간격을 조절하고，

letter-spacing: 속성값;

word-spacing 속성은 단어와 단어 사이의 간격을 조절합니다.
```
word-spacing:속성값;
```

line-height 속성 - 줄간격 조절하기

line-height 속성을 이용하면 줄간격을 원하는 대로 조절할 수 있습니다.

line-he丄ght:속성 값;

white-space 속성

텍스트에 함께 입력된 공백을 어떻게 처리할 것인지 지정하는 것입니다.

white-space:속성 값;

normal : 기본 값으로 연속하는 공백을 하나로 처리합니다.
nowrap : 연속하는 공백을 하나로 처리하고 줄바꿈을 하지 않습니다
pre : 연속하는 공백을 원본 그대로 표시하고 줄바꿈도 합니다. 원본 그대로 표시됩니다.
pre-line : 연속하는 공백은 하나로 취급하고 줄바꿈을 합니다.
pre-wrap : 연속하는 공백을 원본 그대로 표시하고 줄바꿈도 합니다.