HTML/CSS 에센셜

텍스트 꾸미기

텍스트는 웹 페이지의 핵심 요소입니다. HTML로 텍스트를 작성하고 CSS로 폰트 스타일을 적용할 수 있습니다. 이번 장에서는 텍스트를 꾸미는 다양한 CSS 속성들을 살펴보겠습니다.

1. color 색상

텍스트의 색상은 color 속성으로 설정합니다. 폰트 색상을 나타내며, font- 접두사가 붙지 않습니다. 색상을 표현하는 방법에는 여러 가지가 있습니다.

1.1 키워드

색상 키워드는 CSS에서 미리 정의되어있는 값들을 의미합니다. red, black 등의 키워드로 단일 색상을 표현합니다. 키워드는 대소문자를 구별하지만 주로 소문자로 작성하고 유효하지 않는 값에 대해서는 무시합니다.

CSS 색상표

1.2 Hex 코드

HEX 코드는 #으로 시작하는 6자리 16진수 값으로, 각각 2자리씩 빨강(R), 초록(G), 파랑(B) 색상의 강도를 나타냅니다. 00은 해당 색상이 없음을, FF는 해당 색상이 최대 강도임을 의미합니다. 예를 들어, #FF0000은 빨강을 최대로, 초록과 파랑은 없는 순수한 빨간색입니다. #000000은 검은색, #FFFFFF는 흰색입니다.

두자리 씩 값이 같을 경우에는 3자리로 줄여서 표현할 수도 있습니다. 예를 들어 빨강은 #F00으로 표현할 수 있습니다.

뒤에 두개의 자리수를 추가하여 투명도를 나타내는 알파값을 설정할 수 있습니다. 알파값은 선택 사항입니다. #ffaa00aa를 입력하면 투명도가 설정된 색상을 확인할 수 있습니다.

1.3 RGB, RGBA

RGB는 빛의 삼원색인 Red(빨강), Green(초록), Blue(파랑)의 조합으로 색상을 표현하는 방식입니다. 각 색상은 0부터 255까지의 값을 가질 수 있으며, 0은 해당 색상이 없음을, 255는 최대 강도를 의미합니다. 예를 들어, rgb(255, 0, 0)은 빨간색, rgb(0, 0, 0)은 검은색, rgb(255, 255, 255)는 흰색을 나타냅니다.

RGBA는 RGB에 Alpha(투명도) 값을 추가한 형식입니다. 알파 값은 0부터 1 사이의 값을 가지며, 0은 완전 투명, 1은 완전 불투명을 나타냅니다. 예를 들어, rgba(255, 0, 0, 0.5)는 50% 투명도를 가진 빨간색입니다. 배경색과 같은 색상에 투명도를 적용하고 싶을 때 유용합니다.

다음과 같이 텍스트 색상을 설정할 수 있습니다.

1.4 currentColor

currentColor 키워드는 요소의 color 속성값을 나타냅니다. color에 적용된 색상을 다른 속성에도 적용할 수 있으며, color가 명시되지 않았다면 상속받은 color를 가져옵니다.

저시력 시각 장애(시력 저하, 색약, 색맹)를 위해 폰트의 색상과 배경의 명도 대비도 중요합니다! 최소한 4.5:1의 비율이 되어야합니다.

크롬 개발자 도구

2. font-family 글꼴

글꼴은 텍스트의 시각적 특성을 결정하는 중요한 요소입니다. font-family 속성을 사용하여 글꼴을 지정할 수 있습니다.

/* 기본 형식 */
font-family: 주 글꼴, 대체 글꼴1, 대체 글꼴2, ..., 일반 글꼴 계열;
 
/* 예시 */
font-family: 'Noto Sans KR', Arial, sans-serif;

/* 기본 형식 */
font-family: 주 글꼴, 대체 글꼴1, 대체 글꼴2, ..., 일반 글꼴 계열;
 
/* 예시 */
font-family: 'Noto Sans KR', Arial, sans-serif;

font-family 속성에는 여러 글꼴이 쉼표로 구분되어 작성됩니다. 왼쪽부터 순서대로 사용자의 컴퓨터에 설치된 글꼴을 찾아 적용합니다. 마지막에는 항상 일반 글꼴 계열을 지정하는 것이 좋습니다.

일반 글꼴 계열(Generic Font Families)

특정 글꼴명이 아닌, 글꼴의 스타일 카테고리를 나타냅니다. serif(명조체), sans-serif(고딕체), monospace(고정폭), cursive(필기체), fantasy(장식체), system-ui 등이 있으며, 특정 글꼴이 사용자 시스템에 없을 때, 브라우저가 해당 카테고리에서 적절한 글꼴을 자동으로 선택합니다.

Generic name

사용자의 컴퓨터에 특정 글꼴이 설치되어 있지 않다면 원하는 디자인을 정확히 표현할 수 없습니다. 이러한 한계를 극복하기 위해 웹폰트를 사용합니다. 웹폰트는 사용자의 기기에 설치되어 있지 않더라도 웹서버에서 폰트 파일을 다운로드하여 적용함으로써, 모든 사용자에게 일관된 디자인과 브랜드 아이덴티티를 제공할 수 있게 해줍니다.

[폰트 모음 사이트]

Google Fonts 눈누

2.1 `<link>` 방식으로 웹폰트 적용하기

<link> 태그를 사용하여 HTML 문서의 <head> 요소 내에 직접 웹폰트를 삽입하는 방법입니다. HTML 문서가 로드될 때 바로 폰트를 불러오기 시작하므로 폰트 로딩 시간이 단축될 수 있고 CSS 파일을 분리하여 관리할 때도 쉽게 적용할 수 있습니다. 하지만 여러 HTML 파일에서 동일한 폰트를 사용할 경우 각 파일마다 <link> 태그를 추가해야하는 불편함이 있습니다.

사용 방법

Google Fonts와 같은 웹폰트 서비스에서 원하는 폰트를 선택합니다.
제공되는 <link> 코드를 복사하여 HTML 문서의 <head> 섹션에 붙여넣습니다.
CSS에서 font-family 속성으로 해당 폰트를 지정합니다.

2.2 `@import` 방식으로 웹폰트 적용하기

CSS 파일 내에서 @import 구문을 사용하여 웹폰트를 불러오는 방법입니다. CSS 파일 내에서 모든 스타일 관련 요소를 관리할 수 있어 코드 관리가 용이하며 여러 HTML 파일에서 동일한 CSS 파일을 사용할 경우 HTML에 따로 폰트를 불러오지 않아도 됩니다. 하지만 CSS 파일이 완전히 로드될 때까지 폰트 다운로드가 시작되지 않아 <link> 방식보다 로딩이 늦을 수 있고 CSS 파싱을 차단하여 페이지 렌더링 속도에 영향을 줄 수 있습니다.

사용 방법

CSS 파일 또는 <style> 태그 내 최상단에 @import 규칙을 작성합니다.
그 아래에 font-family 속성으로 해당 폰트를 지정합니다.

2.3 `@font-face` 방식으로 폰트 적용하기

@font-face 규칙을 사용하여 폰트 정의를 직접 작성할 수 있습니다. 외부 서비스에 있는 웹폰트를 가져올 수도 있고, 사용자가 서버에 올린 폰트를 지정할 수도 있습니다. 하지만 폰트 파일을 직접 관리해야하거나 다양한 브라우저 지원을 위해 여러 형식의 폰트 파일이 필요할 수 있습니다. (woff, woff2, ttf 등).

브라우저별 지원하는 폰트 형식 | w3schools

2.3.1 웹 폰트로 적용하기

Google Fonts와 같은 웹폰트 서비스에서 원하는 폰트를 선택합니다.
CSS 파일에 @font-face 규칙을 선언합니다.
font-family 속성으로 폰트의 이름을 지정합니다.
src 속성으로 폰트 파일의 위치와 형식을 지정합니다.
필요에 따라 font-weight, font-style 등의 속성을 설정합니다.
이후 일반적인 font-family 속성으로 해당 폰트를 사용합니다.

font

2.3.2 폰트 파일을 다운로드 받아 적용하기

폰트 파일 준비하기

라이선스가 허용하는 폰트를 폰트 사이트(Google Fonts, 눈누 등)에서 다운로드합니다. 다운로드한 폰트는 주로 .ttf, .otf 파일 형식으로 제공됩니다.

브라우저 호환성을 위해 웹폰트 형식(.woff, .woff2)으로 변환하는 것이 좋습니다.

웹 폰트 변환 서비스 | Transfonter 웹 폰트 변환 서비스 | Font Squirrel

프로젝트에 폰트 파일 추가하기

다운로드한 폰트 파일을 프로젝트의 fonts 폴더에 넣어줍니다.

project/
    ├── css/
    │   └── style.css
    ├── fonts/
    │   ├── my-font.woff
    │   └── my-font.woff2
    └── index.html

project/
    ├── css/
    │   └── style.css
    ├── fonts/
    │   ├── my-font.woff
    │   └── my-font.woff2
    └── index.html

CSS에서 @font-face로 폰트 등록하기

@font-face {
  /* 폰트에 사용할 이름 (원하는 대로 지정 가능) */
  font-family: 'MyCustomFont';
  /* 해당 폰트 파일 경로와 형식 */
  src: url('../fonts/my-font.woff2') format('woff2'), url('../fonts/my-font.woff')
      format('woff');
  font-weight: 400;
}
 
/* 볼드 버전이 별도 파일로 있는 경우 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('../fonts/my-font-bold.woff2') format('woff2'), url('../fonts/my-font-bold.woff')
      format('woff');
  font-weight: 700; /* 굵은 버전 */
}

@font-face {
  /* 폰트에 사용할 이름 (원하는 대로 지정 가능) */
  font-family: 'MyCustomFont';
  /* 해당 폰트 파일 경로와 형식 */
  src: url('../fonts/my-font.woff2') format('woff2'), url('../fonts/my-font.woff')
      format('woff');
  font-weight: 400;
}
 
/* 볼드 버전이 별도 파일로 있는 경우 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('../fonts/my-font-bold.woff2') format('woff2'), url('../fonts/my-font-bold.woff')
      format('woff');
  font-weight: 700; /* 굵은 버전 */
}

CSS에서 폰트 사용하기

body {
  font-family: 'MyCustomFont', Arial, sans-serif;
}
 
/* 볼드 버전 사용 */
strong,
h1,
h2 {
  font-weight: 700;
}

body {
  font-family: 'MyCustomFont', Arial, sans-serif;
}
 
/* 볼드 버전 사용 */
strong,
h1,
h2 {
  font-weight: 700;
}

폰트를 “” 으로 묶은 것도 있고 그렇지 않는 것도 있는데 왜 그런건가요?

font-family: 'Hi Melody', HakgyoansimDunggeunmisoTTF-B, sans-serif;

font-family: 'Hi Melody', HakgyoansimDunggeunmisoTTF-B, sans-serif;

한글일 경우에는 "" 를 사용합니다.
영문이지만 공백이 포함될 경우 "" 를 사용합니다.
한글폰트의 한글 이름, 영문이름을 제대로 인식 못하는 경우를 대비해서 한글과 영문명을 같이 작성해 주는 것이 좋습니다.
generic(sans-serif, serif와 같은 기본 폰트)인 경우 "" 를 사용하지 않습니다
한글은 한글 폰트로, 영문은 영문폰트으로 나오길 원한다면, 영문폰트명, 한글폰트명 순으로 적어줍니다!

Pretendard 폰트를 다운로드하여 font-face에 추가해보세요

Pretendard

<div class="regular">Pretendard Regular</div>
<div class="bold">Pretendard Bold</div>

<div class="regular">Pretendard Regular</div>
<div class="bold">Pretendard Bold</div>

@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
 
body {
  font-family: 'Pretendard', sans-serif;
}
.bold {
  font-weight: 700;
}

@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./fonts/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
 
body {
  font-family: 'Pretendard', sans-serif;
}
.bold {
  font-weight: 700;
}

3.font-size 글꼴 크기

font-size 속성으로 글꼴의 크기를 조절할 수 있습니다. 크기 단위로는 절대 단위인 px와 상대 단위인 em, rem 등이 자주 사용되며 그 외 다양한 방법으로 글꼴 크기를 지정할 수 있습니다.

3.1 숫자 값

글꼴의 크기는 여러 단위를 사용하여 숫자로 지정할 수 있습니다.

px: 절대 단위, 화면의 최소 단위인 픽셀 기준
em: 현재 요소의 부모 요소에 설정된 글꼴 크기 상대 단위
rem: 루트요소(html)에 설정된 글꼴 크기 상대 단위

실무에서는 어떤 단위를 주로 사용하나요?

반응형 웹페이지 개발, 유지보수 등에 용이하기 때문에 em, rem과 같은 상댄 단위를 사용합니다.
em은 내부 요소의 크기를 조절하기 위해 주로 사용
일반적으로 rem을 기반으로 설계가 됩니다.
px은 고정된 단위로 필요할때만 제한적으로 사용하는 것을 권장합니다.

그래서 몇 rem인지 어떻게 계산해요? rem은 루트요소(html)에 설정된 글꼴 크기의 배수로 사용합니다. 대부분의 브라우저 기본 font-size는 16px입니다. 그렇다면 24px은 몇 rem일까요? CSS에서 rem/em 단위의 계산을 할 때 10 단위가 더 직관적이기 때문에 html의 font-size를 변경하여 주로 사용합니다.

html {
  font-size: 10px;
}
body {
  font-size: 1.6rem;
}

html {
  font-size: 10px;
}
body {
  font-size: 1.6rem;
}

또는

html {
  font-size: 62.5%; /* 기본값 16px * 62.5% = 10px */
}
 
body {
  font-size: 1.6rem;
}

html {
  font-size: 62.5%; /* 기본값 16px * 62.5% = 10px */
}
 
body {
  font-size: 1.6rem;
}

루트요소의 폰트 크기 기본갑싱 16px로 되어있기 때문에 배수 계산이 어려울 수 있습니다.

3.2 키워드

CSS에서는 키워드를 사용하여 글꼴 크기를 지정할 수 있습니다.

절대 크기 키워드

상대 크기 키워드

부모 요소를 기준으로 상대적인 크기를 지정할 수 있습니다.

4. font-weight 글꼴 굵기

font-weight 속성으로 텍스트의 굵기를 조절할 수 있습니다. 글꼴 굵기는 텍스트의 시각적 중요도를 나타내는 데 중요한 역할을 합니다.

4.1 숫자 값

100부터 900까지 100 단위로 지정할 수 있습니다:

100: 가장 가벼운 굵기 (Thin)
200: Extra Light (Ultra Light)
300: Light
400: Normal
500: Medium
600: Semi Bold (Demi Bold)
700: Bold
800: Extra Bold (Ultra Bold)
900: Black (Heavy)

4.2 키워드

normal: 기본 굵기 (400에 해당)
bold: 굵은 글꼴 (700에 해당)
lighter: 부모 요소보다 한 단계 가볍게 (100, 400, 700)
bolder: 부모 요소보다 한 단계 굵게 (400, 700, 900)

모든 폰트가 9단계의 굵기를 모두 지원하는 것은 아닙니다!

대부분의 폰트는 normal(400)과 bold(700) 만 제공합니다. 폰트가 특정 굵기를 지원하지 않는 경우, 브라우저는 가장 가까운 굵기로 대체합니다. 웹 폰트를 사용할 때는 필요한 굵기의 폰트 파일을 모두 로드해야 합니다.

5. text-transform 텍스트 변형하기

text-transform 속성은 텍스트의 대소문자를 변형하는 데 사용됩니다. 이 속성은 특히 영문 텍스트를 다룰 때 유용합니다. 주요 값으로는 다음과 같은 것들이 있습니다

none: 변형 방지 (기본값)
uppercase: 모든 텍스트를 대문자로 변환
lowercase: 모든 텍스트를 소문자로 변환
capitalize: 모든 단어의 첫 글자를 대문자로 변환

6. text-decoration 텍스트 장식하기

text-decoration 속성은 텍스트에 장식을 추가하는 단축 속성입니다. 이 속성은 다음과 같은 개별 속성들을 포함합니다.

text-decoration-line: 선의 위치 (underline, overline, line-through), 여러 위치를 한 번에 지정할 수 있습니다.
text-decoration-color: 선의 색상
text-decoration-style: 선의 스타일 (solid, double, dashed, wavy 등)
text-decoration-thickness: 선의 두께

6.1 다양한 활용 사례

링크 스타일링

기본적으로 링크(<a> 태그)에는 밑줄이 적용되어 있습니다. 이를 수정하거나 다양한 상태에 따라 다르게 스타일링할 수 있습니다.

중요한 텍스트 강조

삭제된 텍스트 표시

7. text-shadow 텍스트 그림자

text-shadow 속성은 텍스트에 그림자 효과를 추가합니다. 이 속성은 다음과 같은 값들을 사용합니다. offset-x, offset-y, blur-radius는 순서를 지켜서 작성해야 합니다.

offset-x: 그림자의 수평 오프셋 (왼쪽: 음수, 오른쪽: 양수)
offset-y: 그림자의 수직 오프셋 (위쪽: 음수, 아래쪽: 양수)
blur-radius: 그림자의 흐림 정도 (선택적)
color: 그림자의 색상

여러 그림자 효과를 콤마로 구분하여 나열할 수 있습니다.

다양한 텍스트 그림자 효과

텍스트 그림자는 단순한 그림자 효과뿐 아니라 다양한 시각적 효과를 만들 수 있습니다.

그림자 속성

box-shadow 속성은 요소의 박스 모델에 그림자를 추가하는 데 사용됩니다. text-shadow와 유사하지만, 텍스트가 아닌 요소 자체에 그림자를 적용합니다.

8. text-align 텍스트 가로 정렬

text-align 속성은 텍스트의 가로 정렬을 설정합니다. 블록 레벨 요소에서 설정할 수 있으며, 내부의 인라인 콘텐츠(텍스트, 인라인 요소)의 정렬에 영향을 미칩니다.

left: 왼쪽 정렬 (기본값)
right: 오른쪽 정렬, 날짜나 숫자
center: 중앙 정렬, 제목이나 특별한 강조가 경우
justify: 양쪽 정렬 (마지막 줄 제외)

흰 강 현상(River of white) 양쪽 정렬 적용 시 불규칙한 여백이 생기는 흰 강 현상이 발생할 수 있고, 이는 가독성에 좋지 않기 때문에 권장하지 않습니다.

흰 강 현상 예시

9. vertical-align 세로 정렬

vertical-align 속성은 인라인/인라인 블록 요소나 테이블 셀 요소의 수직 정렬을 조정합니다. 이 속성은 블록 레벨 요소에는 적용되지 않는다는 점에 주의해야 합니다.

블록 레벨에서 수직정렬하고 싶다면 추후 배울 flex를 사용하면 됩니다!

주요 값은 다음과 같습니다.

baseline : 베이스라인을 부모의 베이스 라인에 맞추어 정렬합니다.
sub: 베이스라인을 부모의 subscript(아래첨자)-baseline 에 맞추어 정렬합니다.
super : 베이스라인을 부모의 superscript(윗첨자)-baseline에 맞추어 정렬합니다.
top: 상단의 위치를 전체 라인의 상단으로 정렬합니다.
text-top: 상단의 위치를 부모 엘리먼트의 상단으로 정렬합니다.
bottom: 하단의 위치를 전체 라인의 하단으로 정렬합니다.
text-bottom: 하단의 위치를 부모 엘리먼트의 하단으로 정렬합니다.
middle : 폰트의 중간 위치를 부모의 baseline + x-height의 절반에 해당하는 위치로 정렬합니다.

간혹 이미지를 사용했을 때 위 아래 여백 생기는 이슈가 있다면 vertical-align: bottom을 사용해보세요. 이미지도 인라인이기 때문에 font에 영향을 받습니다.

10. line-height 행간 조정

line-height 속성은 텍스트 줄 사이의 간격, 즉 행간을 설정합니다. 이 속성은 텍스트의 가독성에 큰 영향을 미치므로 적절히 조정하는 것이 중요합니다. line-height는 다음과 같은 값으로 사용할 수 있습니다.

normal: 기본값. 폰트의 종류에 따른 글자의 기본 높이.
숫자: 요소의 글꼴 크기에 대한 배수. 1은 font-size의 값과 동일합니다.
단위: px, em, % 등의 단위. %는 요소 자신의 font-size를 기준으로 합니다.

일반적으로 본문 텍스트의 경우 1.5~1.8 사이의 값을 사용하면 좋은 가독성을 얻을 수 있습니다.

11. 서체의 기준선 목록

다음 이미지는 서체의 여러 기준선을 나타냅니다. 서체는 이런 기준선에 따라 화면에 렌더링됩니다.

Ascender: 기준선(baseline) 위의 최대 높이 (예: h, l, d의 위쪽 부분)
Descender: 기준선 아래의 최대 깊이 (예: g, j, p의 아래쪽 부분)
Cap Height: 대문자의 높이
X-Height: 소문자 x의 높이
Baseline: 문자가 놓이는 기준선

일반적으로 디자이너들은 어센더와 디센더 바깥 쪽에 여백을 남기게 됩니다. 텍스트가 여러줄에 걸쳐서 작성이 되었을 때, 상하 간격이 너무 붙으면 읽기 어려우므로, 디자이너가 폰트를 제작할 때 기본적으로 여유 공간을 설정하게 됩니다. 하지만 폰트의 종류마다 여백의 크기가 모두 다릅니다.

폰트의 구조적 특성(어센더, 디센더, 캡 하이트, x-하이트 등)은 웹 개발에서 CSS 스타일을 적용할 때 다양한 영향을 미칩니다.

폰트 구조가 CSS 스타일링에 미치는 영향

폰트 크기(font-size) 차이: x-height의 크기에 따라 동일한 폰트 크기도 시각적으로 크거나 작게 보일 수 있습니다.

행간(line-height) 설정: 다양한 폰트는 서로 다른 어센더와 디센더 길이를 가지고 있어 같은 행간 조정값을 설정해도 다르게 보일 수 있습니다.

수직 정렬(vertical-align): 텍스트의 수직 정렬은 폰트의 베이스라인, x-하이트, 캡 하이트에 따라 달라집니다. 따라서 같은 vertical-align 속성이라도 폰트마다 다르게 보일 수 있습니다.

정확한 높이 계산: 요소의 높이를 정확하게 계산할 때 폰트의 실제 차지하는 공간을 고려해야 합니다. 폰트마다 실제 차지하는 공간이 다르므로 정확한 계산을 위해서는 해당 폰트의 특성을 고려해야 합니다.

.text-container {
  font-size: 16px;
  height: calc(1em + 10px); /* 폰트 크기 + 여유 공간 */
}

.text-container {
  font-size: 16px;
  height: calc(1em + 10px); /* 폰트 크기 + 여유 공간 */
}

그러므로 px을 사용하기 보다는 em이나 rem을 사용하여 폰트 특성에 더 유연하게 대응할 수 있습니다. 폰트 구조에 대한 이해는 정밀한 CSS 디자인에 큰 도움이 되며, 특히 다양한 폰트를 사용하는 디자인에서 일관된 사용자 경험을 제공하는 데 필수적입니다.

15. letter-spacing 자간 조정

letter-spacing 속성은 글자 사이의 간격, 즉 자간을 조절합니다. 이 속성을 사용하면 텍스트의 밀도를 조정하거나 특별한 시각적 효과를 줄 수 있습니다. 값은 길이 단위(px, em 등)로 지정하며, 음수 값도 사용할 수 있습니다.

9. text-indent 들여쓰기

text-indent를 이용해서 텍스트가 시작하기 전 빈 공간, 즉 들여쓰기를 설정할 수 있습니다. 블록 요소에 적용할 수 있으며, 첫 번째 줄에만 들여쓰기를 할 수 있습니다.

10. word-break 줄바꿈

word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 넘칠 경우 줄바꿈 동작을 지정합니다. 이 속성은 단어의 끊어짐을 제어하여 텍스트 레이아웃을 최적화하는 데 도움이 됩니다.

normal: 기본값. 일반적인 줄바꿈 규칙을 사용합니다. 영어와 같은 언어에서는 공백이나 하이픈에서만 줄바꿈이 발생하며, 한중일 등의 문자는 문자 단위로 줄바꿈이 발생합니다.
break-all: 글자 넘침을 방지하기 위해 모든 문자 사이에서 줄바꿈이 발생할 수 있습니다. 영어와 같은 단어도 중간에서 끊어질 수 있으며, 한중일 문자는 영향을 받지 않습니다(이미 문자 단위로 줄바꿈 되기 때문).
keep-all: 한중일 텍스트에서 단어 사이에서만 줄바꿈이 발생합니다. 즉, 한중일 단어는 중간에서 끊기지 않고 단어 단위로 줄바꿈이 일어납니다. 비 한중일 텍스트(영어 등)에서는 normal과 동일하게 동작합니다.

사용 시 고려사항

가독성: break-all은 단어를 중간에서 끊어 가독성을 해칠 수 있으므로 영어 등의 텍스트에서는 주의해서 사용해야 합니다.
레이아웃 안정성: keep-all은 한중일 텍스트에서 단어 단위로 줄바꿈을 하므로, 긴 단어가 있을 경우 컨테이너 밖으로 텍스트가 넘칠 수 있습니다. 이 경우 overflow-wrap: break-word와 함께 사용하는 것이 좋습니다.
반응형 디자인: 화면 크기가 변하는 반응형 디자인에서는 적절한 word-break 설정이 중요합니다.

11. text-overflow 말줄임표

text-overflow 속성은 부모 컨테이너를 넘어간 컨텐츠가 어떻게 보여질지 결정하는 속성입니다.

clip : 기본값입니다. 컨테이너의 끝에서 텍스트를 자릅니다.
ellipsis : 잘린 텍스트를 말줄임표("...")로 나타냅니다.

text-overflow 속성은 그 자체만으로 넘친 컨텐츠를 만들어서 처리하지 않습니다. 컨테이너에 overflow: hidden, white-space: nowrap 속성이 같이 사용되어야 합니다.

실무 Tip

모바일 디자인에서는 공간 제약으로 인해 말줄임표 처리가 자주 사용됩니다.
말줄임표 처리된 텍스트에는 보통 전체 텍스트를 볼 수 있는 방법(툴팁, 확장 버튼 등)을 함께 제공하는 것이 좋습니다.
여러 줄 말줄임은 브라우저 호환성 이슈가 있을 수 있으므로 테스트가 필요합니다.

텍스트 꾸미기

1. color 색상

1.1 키워드

1.2 Hex 코드

1.3 RGB, RGBA

1.4 currentColor

2. font-family 글꼴

2.1 <link> 방식으로 웹폰트 적용하기

2.2 @import 방식으로 웹폰트 적용하기

2.3 @font-face 방식으로 폰트 적용하기

2.3.1 웹 폰트로 적용하기

2.3.2 폰트 파일을 다운로드 받아 적용하기

3.font-size 글꼴 크기

3.1 숫자 값

3.2 키워드

4. font-weight 글꼴 굵기

4.1 숫자 값

4.2 키워드

5. text-transform 텍스트 변형하기

6. text-decoration 텍스트 장식하기

6.1 다양한 활용 사례

7. text-shadow 텍스트 그림자

8. text-align 텍스트 가로 정렬

9. vertical-align 세로 정렬

10. line-height 행간 조정

11. 서체의 기준선 목록

15. letter-spacing 자간 조정

9. text-indent 들여쓰기

10. word-break 줄바꿈

11. text-overflow 말줄임표

2.1 `<link>` 방식으로 웹폰트 적용하기

2.2 `@import` 방식으로 웹폰트 적용하기

2.3 `@font-face` 방식으로 폰트 적용하기