elex/css-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2025-02-03T19:29:18

Browse Source
This commit is contained in:
Elex
2025-02-03 19:29:18 +09:00
parent 7936270d10
commit 3d9e93ae42
9 changed files with 545 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
docs/06_글꼴 및 텍스트 스타일.md
View File

@@ -1,18 +1,29 @@
# 글꼴 및 텍스트 스타일
웹페이지에서 텍스트를 멋지게 스타일링하려면 글꼴(Font)과 텍스트(Text) 관련 CSS 속성을 잘 활용해야 해!
| 속성 | 설명 |
|---|---|
| font | |
| text-align | |
| text-decoration | |
| text-shadow | |
| text-transform | |
| text-indent | |
| letter-spacing | |
| word-spacing | |
| line-height | |
| white-space | |
| 속성 | 설명 | 옵션 |
|---|---|---|
| font-family | 글꼴 지정 | sans-serif, monospace, serif |
| font-size | 글자 크기 지정 |
| font-weight | 글자 두께 조정 | normal, bold, lighter, bolder |
| font-style | 글자의 스타일 | normal, italic, oblique |
| text-align | 텍스트 정렬 방식 | left, right, center, justify |
| text-decoration | 텍스트에 밑줄, 취소선 등의 효과 적용 | none, underline, overline, line-through |
| text-orientation | 세로 텍스트 방향 설정 | mixed, upright, sideways |
| text-shadow | 텍스트에 그림자 효과 추가 | x-offset y-offset blur color |
| text-transform | 텍스트의 대소문자 변환 | none, uppercase, lowercase, capitalize |
| text-indent | 문단의 첫 줄 들여쓰기 설정 |
| text-overflow | 내용이 넘칠 때 표시 방법 설정 | clip, ellipsis |
| line-height | 줄 간격(행간) 조정 | normal |
| white-space | 공백과 줄바꿈 처리 방식 | normal, nowrap, pre, pre-wrap, pre-line |
| word-wrap | 긴 단어가 요소를 벗어날 경우 줄바꿈 처리 방식 | normal, break-word |
| word-break | 단어를 어디서 끊을지 결정 | normal, break-all, keep-all |
| line-break | 줄바꿈 규칙 설정 | auto, loose, normal, strict |
| hypens | 긴 단어를 하이픈(-)으로 나눌지 여부 | none, manual, auto |
| letter-spacing | 글자 간 간격 조정 | normal |
| word-spacing | 단어 간 간격 조정 | normal |
| direction | 텍스트 방향 지정 (RTL 언어 지원) | ltr, rtl |
| writing-mode | 글자 쓰기 방향 지정 (가로/세로) | horizontal-tb, vertical-rl, vertical-lr |
## font
font 속성을 사용하면 font-style, font-variant, font-weight, font-size, font-family를 한 줄로 설정할 수 있음.
@@ -24,7 +35,6 @@ p {
font- 접두어가 붙은 속성들은 글꼴 스타일을 지정하는 역할을 해. 글자 크기, 두께, 스타일, 종류 등을 설정할 수 있어!
### font-family
텍스트의 글꼴을 설정하는 속성. 여러 개의 글꼴을 쉼표(,)로 나열할 수 있음!
> 브라우저에 없는 글꼴은 적용되지 않으므로, 백업용 폰트도 설정하는 게 좋음!
@@ -57,6 +67,8 @@ h1 {
> em은 부모 요소의 크기를 기준으로 하고, rem은 `<html>` 요소를 기준으로 함.
#### font-size-adjust
x-height(소문자 높이)를 기준으로 글꼴 크기를 조정하여, 폰트가 변경되었을 때 가독성을 유지
* none, 0 ~ 1 사이 값 사용
### font-weight
글자의 굵기를 설정하는 속성
@@ -98,10 +110,21 @@ p {
#### font-variant-alternates / font-variants-caps / font-variant-east-asian / font-variant-ligatures / font-variant-numeric / font-variant-position`
### font-stretch
### font-kerning
### font-feature-settings
폰트의 너비를 조정하여 가로로 압축 또는 확장 가능
* normal(기본값), condensed, expanded, ultra-condensed, ultra-expanded
## text-align
### font-kerning
글자 간의 간격을 폰트에 내장된 커닝 정보에 따라 조정하여 가독성을 높임
* auto(기본값), normal, none
### font-feature-settings
OpenType 폰트의 특정 기능을 활성화
* liga : 자동 문자 연결
* smcp : 작은 대문자 사용
## 텍스트 정렬 및 스타일
### text-align
텍스트의 정렬 방식을 지정하는 속성
* 값: left, right, center, justify
```css
@@ -115,9 +138,11 @@ p { /* 텍스트가 좌우 균형을 맞춰 정렬됨 */
}
```
## text-align-last
#### text-align-last
문단의 마지막 줄을 어떻게 정렬할지 결정
* auto(기본값), left, right, center, justify
## text-decoration
### text-decoration
텍스트에 밑줄, 취소선 등을 추가할 때 사용
* none : 기본값 (장식 없음)
* underline : 밑줄
@@ -129,21 +154,29 @@ p {
text-decoration: underline line-through;
}
```
### text-decoration-line
#### text-decoration-line
* none, underline, overline, line-through
### text-decoration-style
#### text-decoration-style
* solid, double, dotted, dashed, wavy
### text-decoration-color
#### text-decoration-color
### text-underline-position
### text-rendering
#### text-underline-position
밑줄 위치를 조정
* auto(기본값), under, left, right
## text-orientation
#### text-rendering
텍스트 렌더링 최적화
* auto(기본값), optimizeSpeed, optimizeLegibility, geometricPrecision
## text-shadow
### text-orientation
세로쓰기(`writing-mode: vertical-rl;`)에서 텍스트 방향 지정
* mixed(기본값), upright, sideways
> (upright → 문자 회전 X, sideways → 문자 회전 O)
### text-shadow
그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 색상을 순서대로 지정합니다. 쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다.
## text-transform
### text-transform
텍스트를 자동으로 대문자, 소문자로 변환
* uppercase : 모두 대문자 변환
* lowercase : 모두 소문자 변환
@@ -154,7 +187,7 @@ p { /* 텍스트를 모두 대문자로 변환 */
}
```
## text-indent
### text-indent
문단의 첫 줄을 들여쓰기 할 때 사용하는 속성
```css
p {
@@ -169,9 +202,11 @@ p {
```
> 모든 줄을 들여쓰기 하려면 margin-left 사용!
## text-overflow
### text-overflow
텍스트가 박스를 벗어날 경우 clip(잘라내기) 또는 ellipsis(... 말줄임표 표시) 적용
* clip, ellipsis
## letter-spacing
### letter-spacing
글자 사이의 간격을 조절
```css
p {
@@ -179,7 +214,7 @@ p {
}
```
## word-spacing
### word-spacing
단어 사이의 간격을 조절
```css
p {
@@ -187,7 +222,7 @@ p {
}
```
## line-height
### line-height
줄 간격을 조절
```css
p { /* 줄 간격을 1.5배로 조절 */
@@ -195,7 +230,8 @@ p { /* 줄 간격을 1.5배로 조절 */
}
```
## white-space
## 줄바꿈 및 방향 관련 속성
### white-space
공백, 줄바꿈, 자동 줄바꿈(줄바꿈 방지) 등을 설정하는 속성
* normal : 여러 개의 공백을 하나로 줄이고, 텍스트가 넘치면 자동 줄바꿈됨!
* nowrap : 줄바꿈 없이 한 줄로 표시됨!
@@ -212,22 +248,28 @@ p {
}
```
## line-break
### line-break
일본어, 중국어 등에서 줄바꿈 규칙을 적용
* auto(기본값), loose, normal, strict
## word-break
### word-break
텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정
* normal | break-all | keep-all | break-word
* normal, break-all, keep-all, break-word
## word-wrap = overflow-wrap
어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용
* normal | break-word
### word-wrap = overflow-wrap
긴 단어가 박스를 넘칠 경우 자동 줄바꿈 가능
* normal, break-word
## direction
### direction
텍스트의 읽기 방향 설정
* ltr(왼쪽→오른쪽, 기본값), rtl(오른쪽→왼쪽)
## hypens
### hypens
긴 단어를 하이픈(-)으로 자동 줄바꿈
* none(기본값), manual, auto
## writing-mode
글 쓰기 방향
* horizontal-tb | vertical-rl | vertical-lr
### writing-mode
텍스트 쓰기 방향을 결정
* horizontal-tb(기본값), vertical-rl, vertical-lr
쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.