# 글꼴 및 텍스트 스타일 웹페이지에서 텍스트를 멋지게 스타일링하려면 글꼴(Font)과 텍스트(Text) 관련 CSS 속성을 잘 활용해야 해! | 속성 | 설명 | 옵션 | |---|---|---| | 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를 한 줄로 설정할 수 있음. ```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은 `` 요소를 기준으로 함. #### font-size-adjust x-height(소문자 높이)를 기준으로 글꼴 크기를 조정하여, 폰트가 변경되었을 때 가독성을 유지 * none, 0 ~ 1 사이 값 사용 ### 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 폰트의 너비를 조정하여 가로로 압축 또는 확장 가능 * normal(기본값), condensed, expanded, ultra-condensed, ultra-expanded ### font-kerning 글자 간의 간격을 폰트에 내장된 커닝 정보에 따라 조정하여 가독성을 높임 * auto(기본값), normal, none ### font-feature-settings OpenType 폰트의 특정 기능을 활성화 * liga : 자동 문자 연결 * smcp : 작은 대문자 사용 ## 텍스트 정렬 및 스타일 ### text-align 텍스트의 정렬 방식을 지정하는 속성 * 값: left, right, center, justify ```css p { /* 텍스트를 중앙 정렬 */ text-align: center; } ``` ```css p { /* 텍스트가 좌우 균형을 맞춰 정렬됨 */ text-align: justify; } ``` #### text-align-last 문단의 마지막 줄을 어떻게 정렬할지 결정 * auto(기본값), left, right, center, justify ### 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 밑줄 위치를 조정 * auto(기본값), under, left, right #### text-rendering 텍스트 렌더링 최적화 * auto(기본값), optimizeSpeed, optimizeLegibility, geometricPrecision ### text-orientation 세로쓰기(`writing-mode: vertical-rl;`)에서 텍스트 방향 지정 * mixed(기본값), upright, sideways > (upright → 문자 회전 X, sideways → 문자 회전 O) ### 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 텍스트가 박스를 벗어날 경우 clip(잘라내기) 또는 ellipsis(... 말줄임표 표시) 적용 * clip, ellipsis ### 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-wrap : 공백과 줄바꿈을 유지하면서도, 요소의 너비를 넘기면 자동 줄바꿈됨!
    - 반응형 웹 디자인에서 유용!
* pre-line : 줄바꿈은 유지하지만, 여러 개의 공백은 하나로 줄임!
```css
p {
  white-space: pre-wrap;
}
```

### line-break
일본어, 중국어 등에서 줄바꿈 규칙을 적용
* auto(기본값), loose, normal, strict

### word-break
텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정
* normal, break-all, keep-all, break-word

### word-wrap = overflow-wrap
긴 단어가 박스를 넘칠 경우 자동 줄바꿈 가능
* normal, break-word

### direction
텍스트의 읽기 방향 설정
* ltr(왼쪽→오른쪽, 기본값), rtl(오른쪽→왼쪽)

### hypens
긴 단어를 하이픈(-)으로 자동 줄바꿈
* none(기본값), manual, auto

### writing-mode
텍스트 쓰기 방향을 결정
* horizontal-tb(기본값), vertical-rl, vertical-lr

쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.