06 텍스트 관련 스타일

06-1 글꼴 관련 스타일

font-family - 글꼴 지정

font-family:굴림; 과 같은 형태
글꼴이 없을 경우를 대비해 두 개 이상의 글꼴을 지정할 수도 있다.
```
body { font-family: "맑은 고딕", 돋움, 굴림 }
```

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

웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 글꼴을 시스템으로 다운로드 시키는 방식이다.

구글 웹 폰트 의 Link 항목에 있는 소스를 복사한다.

  <style>
  /* 구글 웹 폰트 사용하기 */
      @import url(https://fonts.googleapis.com.com/earlyaccess/nanumgothic.css);
      .ng-font {
          font-family:'Nanum Gothic', 돋움;
      }
  </style>

  ...
  <p class="ng-font">나눔고딕 웹 폰트 사용</p>

직접 웹 폰트를 업로드 해서 사용할 수도 있다. 폰트에 이용되는 트루타입 유형의 .ttf 폰트는 파일 크기가 너무 크기 때문에 eot와 woff 파일을 주로 사용한다.

  <style>
  /* 글꼴 직접 업로드*/
      @font-face {
          font-family: 'trana';
          src: local('trana'),
          url('trana.eot'),
          url('trana.woff'( format(woff),
          url('trana.ttf') format('truetype');
      }
      .w-font {
          font-family:'trana', sans-serif;
      }
  </style>

  ...
  <p class="w-font">웹 폰트로 Trana체 쓰기</p>

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

font-size: <절대크기> | <상태크기> | <크기> | <백분율>

절대크기 - 브라우저에서 지정한 글자 크기. xx-small x-small small medium large x-large xx-large를 값으로 사용할 수 있다.
상대크기 - 부모 요소의 글자 크기(font-size) 기준으로 더 크게 표시하거나 더 작게 표시. large small 사용할 수 있다.
크기 - 브라우저와 상관없이 글자 크기를 직접 지정
백분율 - 부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시한다.

font-size 옵션에서 쓸 수 있는 단위는 다음과 같다.

단위	설명
em	해당 글꼴의 대문자 M의 너비를 기준으로 크기 크기 조절
ex	x-height, 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절
px	픽셀, 모니터에 따라 상대적 크기가 됨
pt	포인트, 일반 문서에서 많이 사용

px - 폰트 크기가 고정되기 때문에 모바일기기로 볼 때 작은 글씨로 표현된다. 크기를 따로 지정하지 않으면 텍스트 문단의 크기는 16px로 표시된다.
em - 사용하는 글꼴의 대문자 M을 1em으로 계산한다. 크기를 따로 지정하지 않으면 <body>의 크기 16px이 기본 값인 1em으로 지정된다.
```
h1 { font-size: 3em; }
p { font-size: 1em; }
/* h1은 48px, p는 16px로 기본 설정 */
```

기본형 표기방식

| - 나열한 옵션 중 하나가 값이 되어야 함
```
  font-size: 값1 | 값2 | 값3
```
속성 값을 나열할 때 키워드(약속한 값)은 그대로 나열
```
  font-variant: normal | small-caps
```

속성이 값이 아니라 유형을 나타낼 때에는 < >로 묶음

  font-size: <절대크기> | <상대크기> | <크기> | <백분율>

font-wieght - 글자 굵기 지정

font-weight: normal | bold | bolder | lighter
 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

normal - 기본 값
bold bolder lighter - 굵게, 더 굵게, 더 가늘게
100-900 - 400이 normal, 700이 bold 기준

font-variant - 작은 대문자로 표시

소문자의 크기에 맞추어 작은 대문자를 표시하는 방식

font-variant: normal | small-caps

font-style - 글자 스타일 지정

이탤릭체 표시
italic은 처음부터 기울어진 모습대로 디자인됐지만 oblique는 본래 글꼴을 기울어 표시하는 방식이므로, 웹에서는 주로 italic을 사용한다.

font-style: normal | italic | oblique

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

소스가 너무 길어지는 것을 방지하기 위해 속성을 한꺼번에 묶음

font: <font-style><font-variant><font-weight><font-size/line-height>
<font-family> | caption | icon | menu | message-box | small-caption
 | status-bar

// font-size와 line-height는 슬래시로 연결하고 같이 사용한다

또한 특정 키워드를 입력해 어울리는 글꼴 스타일을 표시할 수도 있다

font-* - font-로 시작하는 글꼴 관련 속성을 한꺼번에 나열
caption - 캡션에 어울리는 글꼴 스타일 표시
icon - 아이콘에 어울리는 글꼴 스타일 표시
menu - 드롭다운 메뉴에 어울리는 글꼴 스타일 표시
messgae-box - 대화상자에 어울리는 글꼴 스타일 표시
small-caption - 작은 캡션에 어울리는 글꼴 스타일 표시
status-bar - 상태 표시줄에 어울리는 글꼴 스타일 표시

06-2 텍스트 스타일

color - 글자 색

16진수, rgb, hsl, 색상 이름으로 표기할 수 있다.

text-decoration - 텍스트에 줄 표시/없애기

text-decoration : none | underline | overline | line-through
/* 기본, 밑줄, 윗줄, 취소선 */

text-transform - 텍스트 대/소문자 변환

text-transform : none | capitalize | uppercase | lowercase | full-width
/* 기본, 첫글자 대문자, 모두 대문자, 모두 소문자, 전각문자 변환 */

text-shadow - 그림자 효과

text-shadow : none | <가로거리> <세로거리> <번짐정도> <색상>
/* 가로,세로만 지정하고 나머지는 기본값으로 사용할 수도 있다 */

가로 거리 - 텍스트부터 그림자까지의 가로 거리 (+오른쪽)
세로 거리 - 텍스트부터 그림자까지의 세로 거리 (+아래쪽)
번짐 정도 - 양수 값을 사용하면 모든 방향으로 퍼져나가 그림자가 크게 표시되며, 음수 값일 땐 모든 방향으로 축소되어 보인다. 기본값은 0
색상 - 한 가지 색상, 혹은 공백으로 구분하여 여러 색상을 지정할 수 있다. 기본값은 현재 글자 색

white-space - 공백 처리

white-space : normal | nowrap | pre | pre-line | pre-wrap

normal - (기본값) 여러 개의 공백을 하나로 표시
nowrap - 공백을 하나로 표시하고, 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시
pre - 여러 공백을 그대로 표시, 너비를 넘어가는 내용은 한 줄로 표시
pre-line - 여러 공백을 하나로 표시, 너비를 넘어가면 줄바꿈
pre-wrap - 여러 공백을 그대로 표시, 너비를 넘어가면 줄바꿈

letter-spacing, word-spacing - 텍스트 간격

letter-spacing - 각 글자 사이 간격 조절
word-spacing - 단어 사이 간격 조절

주로 letter-spacing을 많이 쓴다. 단위는 em으로 지정하는 것이 좋다.

06-3 문단 스타일

direction - 쓰기 방향 지정

ltr - left to right
rtl - right to left

text-align - 텍스트 정렬

start - 현재 텍스트 방향의 시작 위치에 정렬
end - 현재 텍스트 방향의 끝 위치에 정렬
left - 왼쪽 정렬
right - 오른쪽 정렬
center - 가운데 정렬
justify - 양쪽 정렬
match-parent - 부모 요소를 따라 정렬

text-justify - 정렬 시 공백 조정

text-align 에서 justify 속성을 줄 때, 글자 사이 간격이 어색하게 벌어질 수 있다. 이를 조정하는 속성이 text-justify이다.

auto - 웹 브라우저에서 자동으로 지정
none - 정렬하지 않음
inter-word - 단어 사이의 공백을 조절해 정렬
distribute - 인접한 글자 사이의 공백을 똑같이 맞추어 정렬

text-indent - 텍스트 들여쓰기

문단의 첫 글자를 들여쓰는데, 이 때 첫 글자를 얼마나 들여 쓸지 지정한다. 크기나 백분율을 이용해 ‘15px’, ‘5%’ 등 들여쓰기 할 크기를 지정한다.

line-height - 줄 간격 조절

normal - 기본
크기 - px로 간격 지정
숫자 - 글자의 몇 배수인지 지정
백분율 - 글자의 몇 %인지 지정
inherit

text-overflow - 넘치는 텍스트 표기

white-space: nowrap을 지정해 줄바꿈을 안 할 경우 텍스트가 기준선을 벗어날 수 있다. 이 때 text-overflow 속성으로 처리해줄 수 있다.

clip - 넘치는 텍스트를 자름
visible - 넘치는 텍스트 표시
ellipsis - 말줄임표로 잘린 텍스트가 있다고 표현

06-4 목록 스타일

list-style-type - 목록의 불릿과 번호 스타일 지정

순서 없는 목록에서 불릿 모양 바꾸기

disc - 채운 원 (●)
circle - 빈 원 (○)
square - 채운 사각형 (■)
none - 불릿 없애기. 주로 내비게이션(메뉴) 만들 때 사용

순서 목록에서 숫자 바꾸기

decimal - 1로 시작하는 십진수 (1,2,3…)
decimal-leading-zero - 앞에 0이 붙는 십진수 (01, 02, 03…)
lower-roman - 소문자 로마 숫자
upper-roman - 대문자 로마 숫자
lower-alpha lower-latin - 소문자 알파벳
upper-alpha upper-latin - 대문자 알파벳

이외에도 armenian이나 georgian 속성이 있다.

list-style-image - 불릿에 이미지 넣기

list-style-image: url('folder/image.jpg');

list-style-position - 목록에 들여쓰는 효과 넣기

inside - 불릿이나 숫자를 안쪽으로 들여 씀.
outside - 기본. 불릿이나 숫자를 밖으로 내어 씀.

list-style - 목록 속성 한꺼번에 표시

여러 개의 목록 스타일을 나열할 수도 있고, list-style-type:none;과 같은 속성은 list-style:none; 처럼 속성을 대체해 간단히 줄여 사용할 수 있다.

References

Do it! HTML5+CSS3

[CSS3] CSS 텍스트 관련 스타일

Study Note