# 글꼴 및 텍스트 스타일 웹페이지에서 텍스트를 멋지게 스타일링하려면 글꼴(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은 `` 요소를 기준으로 함. #### 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-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) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.