234 lines
6.2 KiB
Markdown
234 lines
6.2 KiB
Markdown
# 글꼴 및 텍스트 스타일
|
|
웹페이지에서 텍스트를 멋지게 스타일링하려면 글꼴(Font)과 텍스트(Text) 관련 CSS 속성을 잘 활용해야 해!
|
|
|
|
| 속성 | 설명 |
|
|
|---|---|
|
|
| font | |
|
|
| text-align | |
|
|
| text-decoration | |
|
|
| text-shadow | |
|
|
| text-transform | |
|
|
| text-indent | |
|
|
| letter-spacing | |
|
|
| word-spacing | |
|
|
| line-height | |
|
|
| white-space | |
|
|
|
|
## font
|
|
font 속성을 사용하면 font-style, font-variant, font-weight, font-size, font-family를 한 줄로 설정할 수 있음.
|
|
```css
|
|
p {
|
|
font: italic small-caps bold 20px Arial, sans-serif;
|
|
}
|
|
```
|
|
|
|
font- 접두어가 붙은 속성들은 글꼴 스타일을 지정하는 역할을 해. 글자 크기, 두께, 스타일, 종류 등을 설정할 수 있어!
|
|
|
|
|
|
### font-family
|
|
텍스트의 글꼴을 설정하는 속성. 여러 개의 글꼴을 쉼표(,)로 나열할 수 있음!
|
|
> 브라우저에 없는 글꼴은 적용되지 않으므로, 백업용 폰트도 설정하는 게 좋음!
|
|
* serif | sans-serif | monospace | cursive | fantasy
|
|
```css
|
|
p {
|
|
font-family: Arial, sans-serif;
|
|
/* 첫 번째 글꼴(Arial)이 없으면, 대체 글꼴(sans-serif)이 적용됨 */
|
|
}
|
|
```
|
|
#### 웹 폰트 적용 (Google Fonts 예제)
|
|
```css
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
|
|
|
p {
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
```
|
|
### font-size
|
|
텍스트의 크기를 설정하는 속성
|
|
* 단위: px, em, rem, %, vw, vh 등
|
|
```css
|
|
p {
|
|
font-size: 1.2em; /* 부모 요소의 1.2배 크기 */
|
|
}
|
|
h1 {
|
|
font-size: 2rem; /* `html` 기본 크기(16px)의 2배 → 32px */
|
|
}
|
|
```
|
|
> em은 부모 요소의 크기를 기준으로 하고, rem은 `<html>` 요소를 기준으로 함.
|
|
|
|
#### font-size-adjust
|
|
|
|
### font-weight
|
|
글자의 굵기를 설정하는 속성
|
|
* 400 (기본), 700 (굵음) 같은 숫자 값을 사용하거나, normal, bold, lighter, bolder 같은 키워드를 사용 가능
|
|
```css
|
|
p {
|
|
font-weight: bold; /* 굵게 */
|
|
}
|
|
h1 {
|
|
font-weight: 700; /* 700 (굵은 폰트) */
|
|
}
|
|
```
|
|
> 숫자로 설정하면 세밀한 굵기 조정이 가능함!
|
|
* 100 : 매우 가늘게
|
|
* 400 : 기본값 (normal)
|
|
* 700 : 굵게 (bold)
|
|
* 900 : 가장 굵게
|
|
|
|
### font-style
|
|
글자의 기울임 스타일을 지정하는 속성
|
|
* 값: normal, italic, oblique
|
|
```css
|
|
p {
|
|
font-style: italic; /* 이탤릭체 */
|
|
}
|
|
h2 {
|
|
font-style: oblique; /* 기울어진 텍스트 */
|
|
}
|
|
```
|
|
> 이탤릭(italic)과 oblique(기울어진 텍스트)는 비슷하지만, 폰트에 따라 다르게 보일 수 있음!
|
|
|
|
### font-variant
|
|
small-caps 값 사용 시 소문자를 작은 대문자로 변환
|
|
```css
|
|
p {
|
|
font-variant: small-caps;
|
|
}
|
|
```
|
|
#### 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
|
|
|
|
## text-align
|
|
텍스트의 정렬 방식을 지정하는 속성
|
|
* 값: left, right, center, justify
|
|
```css
|
|
p { /* 텍스트를 중앙 정렬 */
|
|
text-align: center;
|
|
}
|
|
```
|
|
```css
|
|
p { /* 텍스트가 좌우 균형을 맞춰 정렬됨 */
|
|
text-align: justify;
|
|
}
|
|
```
|
|
|
|
## text-align-last
|
|
|
|
## text-decoration
|
|
텍스트에 밑줄, 취소선 등을 추가할 때 사용
|
|
* none : 기본값 (장식 없음)
|
|
* underline : 밑줄
|
|
* overline : 위줄
|
|
* line-through : 취소선
|
|
```css
|
|
/* 밑줄과 취소선을 동시에 적용 */
|
|
p {
|
|
text-decoration: underline line-through;
|
|
}
|
|
```
|
|
### text-decoration-line
|
|
* none, underline, overline, line-through
|
|
### text-decoration-style
|
|
* solid, double, dotted, dashed, wavy
|
|
### text-decoration-color
|
|
|
|
### text-underline-position
|
|
### text-rendering
|
|
|
|
## text-orientation
|
|
|
|
## text-shadow
|
|
그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 색상을 순서대로 지정합니다. 쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다.
|
|
|
|
## text-transform
|
|
텍스트를 자동으로 대문자, 소문자로 변환
|
|
* uppercase : 모두 대문자 변환
|
|
* lowercase : 모두 소문자 변환
|
|
* capitalize : 단어의 첫 글자만 대문자
|
|
```css
|
|
p { /* 텍스트를 모두 대문자로 변환 */
|
|
text-transform: uppercase;
|
|
}
|
|
```
|
|
|
|
## text-indent
|
|
문단의 첫 줄을 들여쓰기 할 때 사용하는 속성
|
|
```css
|
|
p {
|
|
text-indent: 30px;
|
|
}
|
|
```
|
|
음수 값을 사용해서, 첫 줄을 왼쪽으로 당길 수도 있음!
|
|
```css
|
|
p {
|
|
text-indent: -20px;
|
|
}
|
|
```
|
|
> 모든 줄을 들여쓰기 하려면 margin-left 사용!
|
|
|
|
## text-overflow
|
|
|
|
## letter-spacing
|
|
글자 사이의 간격을 조절
|
|
```css
|
|
p {
|
|
letter-spacing: 2px;
|
|
}
|
|
```
|
|
|
|
## word-spacing
|
|
단어 사이의 간격을 조절
|
|
```css
|
|
p {
|
|
word-spacing: 5px;
|
|
}
|
|
```
|
|
|
|
## line-height
|
|
줄 간격을 조절
|
|
```css
|
|
p { /* 줄 간격을 1.5배로 조절 */
|
|
line-height: 1.5;
|
|
}
|
|
```
|
|
|
|
## white-space
|
|
공백, 줄바꿈, 자동 줄바꿈(줄바꿈 방지) 등을 설정하는 속성
|
|
* normal : 여러 개의 공백을 하나로 줄이고, 텍스트가 넘치면 자동 줄바꿈됨!
|
|
* nowrap : 줄바꿈 없이 한 줄로 표시됨!
|
|
- 가로 스크롤이 생길 수도 있음
|
|
- 버튼이나 제목처럼 한 줄로 유지해야 하는 경우 유용!
|
|
* pre : HTML 코드에서 입력한 공백과 줄바꿈을 그대로 유지함!
|
|
- 소스 코드 표시(`<pre>`) 같은 경우에 적합!
|
|
* pre-wrap : 공백과 줄바꿈을 유지하면서도, 요소의 너비를 넘기면 자동 줄바꿈됨!
|
|
- 반응형 웹 디자인에서 유용!
|
|
* pre-line : 줄바꿈은 유지하지만, 여러 개의 공백은 하나로 줄임!
|
|
```css
|
|
p {
|
|
white-space: pre-wrap;
|
|
}
|
|
```
|
|
|
|
## line-break
|
|
|
|
## word-break
|
|
텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정
|
|
* normal | break-all | keep-all | break-word
|
|
|
|
## word-wrap = overflow-wrap
|
|
어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용
|
|
* normal | break-word
|
|
|
|
## direction
|
|
|
|
## hypens
|
|
|
|
## writing-mode
|
|
글 쓰기 방향
|
|
* horizontal-tb | vertical-rl | vertical-lr
|
|
|
|
쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.
|