# 텍스트 관련 스타일

## 글꼴 관련 스타일

[글꼴 관련 CSS규약](https://www.w3.org/TR/css-fonts-3/)\


* `font-family` : 글꼴 지정하기(사용자 시스템에 설치된 글꼴)

```
{font-family: <글꼴이름>,<글꼴>....}
```

* `@font-face`속성 : 웹 폰트 사용하기
  *   [구글 웹 폰트](https://fonts.google.com/earlyaccess)

      ```css
      @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
      .ng-font{
        font-family: 'Nanum Gothic', 돋움;
      }
      ```
  * 직접 웹폰트 업로드해 사용
    * `.ttf` 확장자 : 파일 크기가 너무 크다.
    * `.eof`(Embedded Open Type) [ttf->eof변환](http://eotfast.com)
    * `.woff`(Web Open Font Format) [ttf->woff변환](http://people.mozilla.com/~jkew/woff/)
  *   웹 폰트 적용

      ```css
      @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; /* 웹 폰트 지정 */
      }
      ```
* `font-size` : 글자 크기 조절

| 속성 값    | 설명                                                                       |
| ------- | ------------------------------------------------------------------------ |
| <절대 크기> | 브라우저에서 지정한 크기 xx-small, x-small, small, medium, large, x-large, xx-large |
| <상대 크기> | 부모 요소의 글자크기를 기준으로 더 크게 표시하거나 작게 표시 larger, smaller                       |
| <크기>    | 브라우저와 상관없이 글자 크기 직접 지정                                                   |
| <백분율>   | 부모요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시                                         |

| 단위 | 설명                          |
| -- | --------------------------- |
| em | 해당 글꼴의 대문자 M의 너비를 기준으로 크기조절 |
| ex | 해당 글꼴의 소문자 x의 높이를 기준으로 크기조절 |
| px | 픽셀                          |
| pt | 포인트                         |

* `font-weight` : 글자 굵기 지정

| 속성 값                 | 설명                                                |
| -------------------- | ------------------------------------------------- |
| **normal**           | 일반적인 형태로 기본값                                      |
| bold , light, bolder | 굵게, 원래 굵기보다 더 가늘게, 더 굵게                           |
| 100\~900             | 400은 normal, 700은 bold에 해당하며, 좀 더 세밀히 글꼴 두께 조절 가능 |

* `font-variant` : 작은 대문자로 표시

| 속성 값       | 설명           |
| ---------- | ------------ |
| **normal** | 일반적인 형태로 기본값 |
| small-caps | 작은 대문자로 표시   |

* `font-style` : 글자 스타일 지정

| 속성 값       | 설명                        |
| ---------- | ------------------------- |
| **normal** | 일반적인 형태로 기본값              |
| italic     | 이탤릭체 표시(기울어진 글꼴이 디자인되어있음) |
| oblique    | 이탤릭체 표시(글꼴을 기울어지게함)       |

* `font` : 글꼴 속성 한꺼번에 묶어 표현

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

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

### 텍스트 스타일

* `color` : 글자색 지정 (rgb, 16진수, hsl)
* `text-decoration` : 텍스트에 줄 표시하기 / 없애기

| 속성 값         | 설명                |
| ------------ | ----------------- |
| **none**     | 밑줄을 표시하지 않는다.     |
| underline    | 밑줄을 표시합니다.        |
| overline     | 영역 위로 선을 그림       |
| line-through | 영역을 가로지르는 선을 그린다. |

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

| 속성 값       | 설명                                             |
| ---------- | ---------------------------------------------- |
| **none**   | 변환하지 않는다.                                      |
| capitalize | 시작하는 첫 번째 글자를 대문자로 변환                          |
| uppercase  | 모든글자 대문자 변환                                    |
| lowercase  | 모든 글자 소문자 변환                                   |
| full-width | 가능한 모든 문자 전각문자(고정 폭 영문자 너비의 두 배 정도 너비의 문자)로 변환 |

*   `text-shadow` : 그림자 효과 추가

    ```css
    text-shadow: none | <가로 거리> <세로 거리> <흐림 정도> <번짐 정도> <색상>
    ```

| 속성 값    | 설명                                                                 |
| ------- | ------------------------------------------------------------------ |
| <가로 거리> | 텍스트부터 그림자까지의 가로 거리(양수 오른쪽, 음수 왼쪽), 필수                              |
| <세로 거리> | 텍스트부터 그림자까지의 세로 거리(양수 아래쪽, 음수 위쪽), 필수                              |
| <흐림 정도> | 0이 디폴트 값으로 진한 그림자를 표시하며, 값이 커질 수록 그림자가 부드러워진다.                     |
| <번짐 정도> | 그림자가 번지는 정도. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져나감. 음수는 그림자가 모든 방향으로 축소되어보임 |
| <색상>    | 한 가지 이상색을 공백으로 지정할 수 있음                                            |

* `white-space` : 공백 처리하기

| 속성 값       | 설명                                           |
| ---------- | -------------------------------------------- |
| **normal** | 여러 개의 공백을 하나로 표시                             |
| nowrap     | 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않음 |
| pre        | 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않음 |
| pre-line   | 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꿈     |
| pre-wrap   | 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꿈     |

* `letter-spacing` / `word-spacing` : 텍스트 간격 조정

### 문단 스타일

*   `direction` : 글자 쓰기 방향 지정

    ```css
    direction: ltr | rtl
    ```
*   `text-align` : 텍스트 정렬

    ```css
    text-align: start | end | left | right | center | justify(양쪽) | match-parent(부모 요소에 따라)
    ```
*   `text-justify` : 정렬 시 공백 조절

    ```css
    text-justify: auto | none | inter-word(단어사이 공백 조절) | distribute(인접한 글자 사이 공백 똑같이 맞춤)
    ```
*   `text-indent` : 텍스트 들여 쓰기

    ```css
    text-indent: <크기> | <백분율>
    ```
*   `line-height` : 줄 간격 조절하기

    ```css
    line-height: normal | <숫자> | <크기> | <백분율> | <inherit>
    ```
*   `text-overflow` : 넘치는 텍스트 표기

    ```css
    text-overflow: **clip**(넘치는 텍스트 자르기) | ellipsis(말 줄임표로 잘린 텍스트 있다고 표시)
    ```

[CSS 검사기](https://jigsaw.w3.org/css-validator/)\


### 목록과 링크 스타일

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

    ```css
    list-style-type: none | <순서 없는 목록의 불릿>|<순서 목록의 번호>|
    ```

    * 순서 없는 목록의 불릿
      * **disc**(●)
      * circle(○)
      * square(◼︎)
      * none
    * 숫자 바꾸기
      * **decimal**(1로 시작하는 10진수)
      * decial-leading-zero(01,02,03,...)
      * lower-roman(소문자 로마 숫자)
      * upper-roman(대문자 로마 숫자)
      * lower-alpha or lower-latin(소문자 알파벳)
      * upper-alpha or upper-latin(대문자 알파벳)
      * armenian(아르메니아 숫자)
      * georgian(조지 왕조시대 숫자)
*   `list-style-image` : 불릿 대신 이미지 넣기

    ```css
    list-style-image: none | <이미지> url("images.jpg")
    ```
*   `list-style-position` : 목록에 들여 쓰는 효과 내기

    ```css
    list-style-position: inside | outside
    ```
* `list-style` : 목록 속성 한꺼번에 표시하기

## 참고

* [Do it! HTML5+CSS3 웹 표준의 정석](https://book.naver.com/bookdb/book_detail.nhn?bid=15975063)
