85 lines
2.2 KiB
Markdown
85 lines
2.2 KiB
Markdown
# Styling Text
|
|
|
|
## 텍스트
|
|
|
|
* `color`
|
|
* `font`
|
|
* `font-family` : 둘 이상의 단어가 있는 글꼴 이름은 따옴표로 묶어야합니다
|
|
* Arial | Courier New | Georgia | Times New Roman | Trebuchet MS | Verdana
|
|
* serif | sans-serif | monospace | cursive | fantasy
|
|
* `font-size`
|
|
* `font-style` : normal | italic | oblique
|
|
* `font-weight` : normal | bold | lighter | bolder | 100~900
|
|
* `text-transform` : none | uppercase | lowercase | capitalize | full-width
|
|
* `text-decoration` : 값을 여러 개 중복해서 지정해도 됩니다.
|
|
* none | underline | overline | line-through
|
|
* `text-decoration-line`, `text-decoration-style`, `text-decoration-color`
|
|
* `text-shadow` : 그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 색상을 순서대로 지정합니다. 쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다.
|
|
|
|
```CSS
|
|
p {
|
|
font-family: "Trebuchet MS", Verdana, sans-serif;
|
|
}
|
|
```
|
|
|
|
```CSS
|
|
p {
|
|
text-shadow: 4px 4px 5px red;
|
|
}
|
|
```
|
|
### 그 외 속성들
|
|
|
|
* `font-variant`
|
|
* `font-variant-alternates`, `font-variants-caps`, `font-variant-east-asian`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-position`
|
|
* `font-size-adjust`
|
|
* `font-stretch`
|
|
* `font-kerning`
|
|
* `font-feature-settings`
|
|
* `text-underline-position`
|
|
* `text-rendering`
|
|
|
|
## 텍스트 레이아웃
|
|
|
|
* `text-align` : left | right | center | justify
|
|
* `line-height` : 일반적으로 단위 없는 값을 사용합니다.
|
|
|
|
|
|
```CSS
|
|
p {
|
|
line-height: 1.5;
|
|
}
|
|
```
|
|
|
|
### 그 외 속성들
|
|
|
|
* `text-indent`
|
|
* `text-overflow`
|
|
* `white-space`
|
|
* `word-break`
|
|
* `direction`
|
|
* `hypens`
|
|
* `line-break`
|
|
* `text-align-last`
|
|
* `text-orientation`
|
|
* `word-wrap`
|
|
* `word-spacing`
|
|
* `letter-spacing`
|
|
|
|
## 웹 폰트
|
|
```CSS
|
|
@font-face {
|
|
font-family: "myFont";
|
|
src: url("myFont.woff2");
|
|
}
|
|
html {
|
|
font-family: "myFont", "Bitstream Vera Serif", serif;
|
|
}
|
|
```
|
|
|
|
## 글 쓰기 방향
|
|
|
|
* `writing-mode` : horizontal-tb | vertical-rl | vertical-lr
|
|
|
|
쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.
|
|
|