[CSS] CSS 텍스트 꾸미기

jjee·2025년 8월 6일

CSS font text 텍스트꾸미기

CSS

목록 보기

7/24

썸네일

CSS 텍스트 꾸미기

가장 기초가 되는 텍스트 꾸미기에 대해 알아보자.

color

앞선 내용 정리에서 제일 많이 사용해봤던 속성으로, 폰트의 색상을 지정할 수 있다.
폰트와 관련된 속성이지만 유일하게 font-가 붙지 않는다.

색상 표현 방법

CSS에서 색상을 표현하는 방법에 대해 알아보자.

키워드

CSS에서 기본적으로 정의가 되어있는 값으로, red, black 등의 키워드로 색상 표현이 가능하다.
키워드는 대소문자를 구분하지만 일반적으로 소문자로 작성한다.
없는 키워드를 작성하는 경우 무시된다.

p {
  color: red;
}

Hex 코드

Hex 코드는 #으로 시작되는 6자리 16진수 값으로, 빨강(R), 초록(G), 파랑(B) 색상 각각 2자리씩 작성하여 색상을 나타낸다.
00~FF로 작성할 수 있고 00은 해당 색상이 없음, FF는 해당 색상의 최대를 가리킨다.

p {
  color: #FF0000; /* 빨강 */
}

만약 각 RGB 값의 두자리씩의 값이 각각 같은 경우 3자리 수로 표현할 수 있다.

p {
  color: #F00; /* 빨강 */
}

뒤에 두자리를 추가하여 투명도를 나타낼 수 있다.
이 두자리를 알파값이라고 하며, 선택사항이다.

p {
  color: #ff0000aa; /* 반투명한 빨강 */
}

RGB, RGBA

RGB는 빛의 삼원색인 Red(빨강), Green(초록), Blue(파랑)의 조합으로 색상을 표현할 수 있다.
각 색상은 0부터 255까지의 값을 가지며 0은 해당 색상이 없음을, 255는 최대 강도를 의미한다.

p {
  color: rgb(255, 0, 0); /* 빨강 */
}

RGBA는 RGB에 Alpha(투명도) 값을 추가한 형식이다.
알파 값은 0부터 1 사이의 값을 가지며, 0은 완전 투명, 1은 완전 불투명을 나타낸다.

p {
  color: rgba(255, 0, 0, 0.5); /* 반투명한 빨강 */
}

HSL

색조, 채도, 명도(HSL)를 사용하여 색상을 표현할 수 있다.

/* hsl( 색조 , 채도 , 명도 ) */
p {
  color: hsl(0, 100%, 50%); /* 빨강 */
}

색조
색상환에서 0에서 360까지로 0은 빨간색, 120은 초록색, 240은 파란색을 나타낸다.
채도
백분율 값으로, 0%는 회색 음영을 의미하고 100%는 전체 색상을 의미한다.
밝기
백분율 값으로, 0%는 검정색, 50%는 밝거나 어둡지 않음, 100%는 흰색을 의미한다.

currentColor

요소의 color 속성값을 나타낸다.
color에 적용된 색상을 다른 속성에도 적용할 수 있으며, color가 명시되지 않았다면 상속받은 color를 가져온다.

p {
  color: rgb(255, 0, 0); /* 빨강 */
  border: 1px solid currentColor; /* color 색상인 빨강 */
}

span {
  border: 1px solid currentColor; /* p의 color 색상인 빨강 */
}

font-family

폰트의 글꼴을 지정할 수 있다.
작성 시 한가지의 글꼴만 입력하는 것이 아닌 여러개의 글꼴을 입력하여, 앞서 작성한 글꼴이 적용되지 않을 때를 대비할 수 있다.

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

예시의 마지막에 작성된 글꼴인 sans-serif는 일반 글꼴로, 꼭 작성하는 것이 권장된다.

일반 글꼴

일반 글꼴은 특정한 어떤 글꼴이 아니라 글꼴 스타일의 카테고리를 나타낸다.

serif(명조체)
sans-serif(고딕체)
monospace(고정폭)
cursive(필기체)
fantasy(장식체)
system-ui

웹폰트

만약 개발자가 적용한 글꼴이 사용자의 컴퓨터에 없다면 해당 글꼴은 정상적으로 보여지지 않을 것이다.
이러한 것을 보완하기 위해 웹폰트를 사용한다.

사용자의 기기에 폰트가 설치되어 있지 않더라도 웹서버에서 폰트 파일을 다운로드하여 적용하기 때문에 모든 사용자에게 일관적인 디자인을 보여줄 수 있다.

웹폰트 사이트

웹폰트 적용 방법

웹폰트를 적용하는 방법이 세가지가 있다.

<link> - HTML 문서의 요소 내에 직접 웹폰트를 삽입

웹폰트 서비스에서 원하는 폰트를 선택하여 제공되는 <link> 코드를 복사하여 HTML 문서의 <head> 섹션에 붙여 넣고, CSS에서 font-family 속성으로 해당 폰트를 지정한다.
```

<head>
  ...
  <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet" />
  ...
  
  <style>
    body {
      font-family: 'Nanum Pen Script', cursive;
    }
	</style>
</head>
```
HTML 문서가 로드될 때 바로 폰트를 불러오기 시작해 폰트 로딩 시간이 단축될 수 있고 CSS 파일을 분리하여 관리할 때도 쉽게 적용할 수 있다.
하지만 여러 HTML 파일에서 동일한 폰트를 사용할 경우 각 파일마다 <link> 태그를 추가해야한다.
@import - CSS 파일 내 @import 구문 사용
CSS 파일 또는 <style> 태그 내 최상단에 @import 규칙을 작성 후 그 아래에 font-family 속성으로 해당 폰트를 지정한다.
```
@import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');

body {
  font-family: 'Hi Melody', sans-serif;
}
```
CSS 파일 내에서 모든 스타일 관련 요소를 관리할 수 있어 코드 관리가 용이하며 여러 HTML 파일에서 동일한 CSS 파일을 사용할 경우 HTML에 따로 폰트를 불러오지 않아도 된다.
하지만 CSS 파일이 완전히 로드될 때까지 폰트 다운로드가 시작되지 않아 <link> 방식보다 로딩이 늦을 수 있고 CSS 파싱을 차단하여 페이지 렌더링 속도에 영향을 줄 수 있다.

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

@font-face {
  font-family: 'HakgyoansimDunggeunmisoTTF-B';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2')
    format('woff2');
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: HakgyoansimDunggeunmisoTTF-B, sans-serif;
}

2. 폰트 파일
라이선스가 허용하는 폰트를 폰트 사이트에서 다운로드한다. (주로 .ttf, .otf 파일 형식)
다운로드한 폰트 파일을 프로젝트의 fonts 폴더에 넣고 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; /* 굵은 버전 */
 }

body {
 font-family: 'MyCustomFont', Arial, sans-serif;
}

/* 볼드 버전 사용 */
strong,
h1,
h2 {
 font-weight: 700;
}

브라우저 호환성을 위해 웹폰트 형식(.woff, .woff2)으로 변환하는 것이 좋다.
- 웹폰트 변환 서비스 Transfonter
- 웹폰트 변환 서비스 Font Squirrel

폰트와 큰따옴표(`""`)

폰트를 작성하다 보면 어떤 폰트는 그냥 작성이 되고 어떤 폰트는 큰따옴표("")로 감싸있다.

폰트명만 사용
generic(sans-serif, serif와 같은 기본 폰트)인 경우 큰따옴표("")를 사용하지 않는다.

큰따옴표("")와 사용
일반적으로 한글의 경우 큰따옴표("")를 사용한다.
또한 영문이지만 공백이 포함된 경우 큰따옴표("")를 사용한다.

주의 사항
한글폰트의 한글 이름, 영문이름을 제대로 인식 못하는 경우를 대비해서 한글과 영문명을 같이 작성해 주는 것이 좋다.
한글은 한글 폰트로, 영문은 영문폰트으로 나오길 원한다면, 영문폰트명, 한글폰트명 순으로 적어주면 된다.

font-size

글씨 크기를 조절할 때는 font-size를 사용할 수 있다.
사용할 수 있는 크기 단위가 다양하다.

숫자 값

기본적으로 숫자와 단위를 이용하여 글꼴 크기를 적용할 수 있다.

/* style.css */
.parent {
  font-size: 10px;
}
.pixels {
  font-size: 15px;
}
.em {
  font-size: 2em;
}
.rem {
  font-size: 2rem;
}

<!-- index.html -->
<section class="parent">
  <h2>폰트 크기</h2>
  <p class="pixels">px: 고정 폰트. 15px</p>
  <p class="em">em: 부모 기준 상대단위. 2em -> 20px</p>
  <p class="rem">rem: 루트(html) 기준 상대단위. 2rem -> 32px</p>
</section>

실무에서는 반응형 웹페이지 개발, 유지보수 등에 용이한 상대단위를 사용한다. (em, rem)
em은 내부 요소의 크기를 조절하기 위해 사용하며, 대체적으로 rem으로 설계가 된다.
고정된 단위가 필요한 경우에만 px을 사용하는 것을 권장한다.

rem 사용 방법

rem은 루트 요소인 html의 글꼴 크기를 기준으로 한다.
HTML에서 html 요소는 기본적으로 브라우저에서 16px로 표현이 되며 1rem은 16px, 2rem은 32px이다.
16px 기준으로 하면 계산이 번거롭기 때문에 약간의 편법을 이용하여 계산이 쉽게 만들기도 한다.

html {
  font-size: 10px; /* 또는 font-size: 62.5%; */
}
body {
  font-size: 1.6rem;
}

위와 같이 html 요소의 크기를 10px로 맞추고 body 태그는 다시 16px로 만들어서 사용한다.
body를 16px로 만드는 이유는, 기본적으로 브라우저에서 표현하는 텍스트 사이즈를 유지하기 위해서하고 생각하면 된다.

키워드

숫자가 아닌 키워드를 가지고 글꼴의 크기를 지정할 수 있다.

절대 크기

작성한 키워드에 맞춰서 글꼴의 크기를 지정한다.

.xx-small {
  font-size: xx-small;
}
.x-small {
  font-size: x-small;
}
.small {
  font-size: small;
}
.medium {
  font-size: medium;
}
.large {
  font-size: large;
}
.x-large {
  font-size: x-large;
}
.xx-large {
  font-size: xx-large;
}

상대 크기

부모 요소의 글꼴 크기를 기준으로 상대적인 크기를 지정한다.

.smaller {
  font-size: smaller; /* 부모 요소보다 작게 */
}
.larger {
  font-size: larger; /* 부모 요소보다 크게 */
}

font-weight

글꼴의 굵기를 조절할 수 있다.

숫자 값

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)

p {
  font-weight: 100;
}
p {
  font-weight: 400;
}
p {
  font-weight: 700;
}

키워드

키워드를 이용하여 글꼴의 굵기를 지정할 수 있다.
고정 굵기 키워드와 상대 굵기 키워드가 있다.

고정 굵기

normal: 기본 굵기 (400에 해당)
bold: 굵은 글꼴 (700에 해당)

상대 굵기

lighter: 부모 요소보다 한 단계 가볍게 (100, 400, 700)
bolder: 부모 요소보다 한 단계 굵게 (400, 700, 900)
```
p {
  font-weight: bold;
}
```

주의 사항

모든 폰트가 9단계의 굵기를 모두 지원하지는 않는다.
대부분의 폰트는 normal(400)과 bold(700) 만 제공하며, 특정 굵기를 지원하지 않는 경우 가장 가까운 굵기로 대체한다.
뭽폰트를 사용하는 경우 필요한 굵기의 폰트 파일을 모두 불러와야 한다.

text-transform

텍스트의 대소문자를 CSS로 변형할 수 있다.
영문 텍스트를 다룰 때 유용하다.

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

  p {
    text-transform: none;
  }
  p {
    text-transform: uppercase;
  }
  p {
    text-transform: lowercase;
  }
  p {
    text-transform: capitalize;
  }

만약 텍스트의 맨 처음 딱 한 글자만 대문자로 바꾸고 싶다면 아래와 같이 사용할 수 있다.

  
  .first-letter::first-letter {
    /* 텍스트의 첫 글자에 스타일을 줄 수 있는 가상 요소 */
    text-transform: uppercase;
  }

text-decoration

텍스트에 선과 같은 장식을 추가할 수 있다.

p {
	text-decoration: 5px wavy royalblue line-through underline overline;
}

text-decoration-line

선의 위치 (underline, overline, line-through)
여러 위치를 한 번에 지정할 수 있다.

.underline {
	text-decoration-line: underline;
}
.overline {
	text-decoration-line: overline;
}
.line-through {
	text-decoration-line: line-through;
}

text-decoration-color

선의 색상

.underline {
	text-decoration-line: underline;
	text-decoration-li-color: lime;
}

text-decoration-style

선의 스타일 (solid, double, dashed, wavy 등)

.underline {
	text-decoration-line: underline;
	text-decoration-li-color: lime;
	text-decoration-style: wavy;
}

text-decoration-thickness

선의 두께

.underline {
	text-decoration-line: underline;
	text-decoration-li-color: lime;
	text-decoration-style: wavy;
	text-decoration-thickness: 5px;
}

다양한 활용

링크 스타일링

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

.custom-link {
	text-decoration: none; /* 기본 밑줄 제거 */
	color: rgb(0, 0, 0);
}

.custom-link:hover {
	text-decoration: underline; /* 호버 시 밑줄 표시 */
	color: rgb(0, 140, 255);
}

중요한 텍스트 강조

p {
    text-decoration: underline;
    text-decoration-color: #ffcc00;
    text-decoration-thickness: 3px;
    text-decoration-style: wavy;
}

삭제된 텍스트 표시

p {
    text-decoration: line-through;
	color: #999;
}

text-shadow

텍스트에 그림자 효과를 추가할 수 있다.
여러 그림자 효과를 콤마로 구분하여 나열할 수 있다.

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

p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
span {
  text-shadow: 4px 4px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}

다양한 활용

/* 양각 효과 - 텍스트가 튀어나와 보임 */
h1 {
  color: #888;
  text-shadow: -2px -2px 4px rgba(0, 0, 0, 0.5), 1px 1px 1px rgba(255, 255, 255, 0.8);
}
 
/* 외곽선 효과 */
h2 {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0
      #000;
}
 
/* 네온 글로우 효과 */
h3 {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6,
    0 0 25px #0073e6;
}
 
/* 레트로 3D 효과 */
h4 {
  color: #fff;
  text-shadow: 2px 2px 0px #ff0000, 4px 4px 0px #0000ff;
}

텍스트가 아닌 요소 박스에 그림자를 넣고 싶을 때는 box-shadow 속성을 사용한다.
자세한 내용은 이후 박스 요소 스타일에서 알아보도록 하자.

text-align

텍스트의 가로 정렬을 설정할 수 있다.
블록 요소에서 설정할 수 있으며, 내부의 인라인 콘텐츠를 정렬한다.

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

/* style.css */
.cont {
  width: 500px;
  border: 1px solid black;
  text-align: center; /* center, left, right, center, justify */
}
.box {
  width: 300px;
  background-color: skyblue;
}
 
.text {
  background-color: pink;
}

<div class="cont">
  <div class="box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, modi
    alias quaerat distinctio saepe magnam, tenetur maxime quia similique
  </div>
  <span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et fugit
    accusamus consequatur harum voluptas voluptatibus excepturi inventore porro</span>
</div>

흰 강 현상(River of white)

justify를 사용하여 양쪽 정렬 적용 시 불규칙한 여백이 생기기도 하는데, 이를 흰 강 현상이라 한다.
특히 영어에서 더 눈에 띄게 일어날 수 있다.
흰 강 현상이 일어나면 가독성에 좋지 않기 때문에 권장하지 않습니다.

vertical-align

인라인/인라인 블록 요소나 테이블 셀 요소의 수직 정렬을 조정한다.
블록 요소에서는 적용되지 않는다.

baseline

베이스라인을 부모의 베이스 라인에 맞추어 정렬합니다.

p {
  vertical-align: baseline;
}

sub

베이스라인을 부모의 subscript(아래첨자)-baseline 에 맞추어 정렬합니다.

p {
  vertical-align: sub;
}

super

베이스라인을 부모의 superscript(윗첨자)-baseline에 맞추어 정렬합니다.

p {
  vertical-align: super;
}

top

상단의 위치를 전체 라인의 상단으로 정렬합니다.

p {
  vertical-align: top;
}

text-top

상단의 위치를 부모 엘리먼트의 상단으로 정렬합니다.

p {
  vertical-align: text-top;
}

bottom: 하단의 위치를 전체 라인의 하단으로 정렬합니다.

p {
  vertical-align: bottom;
}

text-bottom

하단의 위치를 부모 엘리먼트의 하단으로 정렬합니다.

p {
  vertical-align: text-bottom;
}

middle

폰트의 중간 위치를 부모의 baseline + x-height의 절반에 해당하는 위치로 정렬합니다.

p {
  vertical-align: middle;
}

이미지 여백

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

line-height

텍스트 줄 사이의 간격, 즉 행간을 설정한다.
텍스트의 가독성에 큰 영향을 미치므로 적절히 조정하는 것이 중요하다.
일반적으로 본문 텍스트의 경우 1.5~1.8 사이의 값을 사용하는게 좋다.

normal

기본값. 폰트의 종류에 따른 글자의 기본 높이.

숫자

요소의 글꼴 크기에 대한 배수. 1은 font-size의 값과 동일합니다.

p {
	line-height: 2;
}

단위

px, em, % 등의 단위. %는 요소 자신의 font-size를 기준으로 합니다.

p {
	line-height: 3em;
}

서체의 기준선 목록

서체에는 여러가지 기준선이 있다.
서체마다 기준선이 다를 수 있으며 화면에 렌더링 되는 모양이 다르게 보일 수 있다.

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

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

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

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

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

.arial {
  font-family: Arial;
  font-size: 16px; /* x-height가 큼 → 시각적으로 더 크게 보임 */
}

.times {
  font-family: 'Times New Roman';
  font-size: 16px; /* x-height가 작음 → 시각적으로 더 작게 보임 */
}

.georgia {
  font-family: Georgia;
  font-size: 16px; /* x-height 중간 정도 */
}

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

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
span {
  background: red;
  width: 150px;
}

/* 어센더/디센더가 긴 폰트 */
.font-long {
  font-family: 'Libre Baskerville', serif;
  line-height: 1.5;
}

/* 어센더/디센더가 짧은 폰트 */
.font-short {
  font-family: 'century-gothic', sans-serif;
  line-height: 1.5;
}

수직 정렬(vertical-align)
텍스트의 수직 정렬은 폰트의 베이스라인, x-하이트, 캡 하이트에 따라 달라진다.
따라서 같은 vertical-align 속성이라도 폰트마다 다르게 보일 수 있다.
```
span {
  font-size: 24px;
  vertical-align: top;
}

.arial {
  font-family: Arial;
}

.times {
  font-family: 'Times New Roman';
}

.georgia {
  font-family: Georgia;
}
```
정확한 높이 계산
요소의 높이를 정확하게 계산할 때 폰트의 실제 차지하는 공간을 고려해야 한다.
폰트마다 실제 차지하는 공간이 다르므로 정확한 계산을 위해서는 해당 폰트의 특성을 고려해야 한다.
```
.text-container {
  font-size: 16px;
  height: calc(1em + 10px); /* 폰트 크기 + 여유 공간 */
}
```
px을 사용하기 보다는 em이나 rem을 사용하여 폰트 특성에 더 유연하게 대응할 수 있다.
폰트 구조에 대한 이해는 정밀한 CSS 디자인에 큰 도움이 되며, 특히 다양한 폰트를 사용하는 디자인에서 일관된 사용자 경험을 제공하는 데 필수이다.

letter-spacing

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

.normal-spacing {
  letter-spacing: normal; /* 일반 자간 */
}
.wide-spacing {
  letter-spacing: 0.3em; /* 넓은 자간 */
}
.narrow-spacing {
  letter-spacing: -0.05em; /* 좁은 자간 */
}

text-indent

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

p {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 10px;
}
.indent-em {
  text-indent: 2em; /* 현재 폰트 크기를 기준 */
}
.indent-px {
  text-indent: 40px; /* 고정된 크기 */
}
.indent-percent {
  text-indent: 15%; /* 컨테이너 요소의 너비 */
}
.indent-negative {
  text-indent: -10px; /* 들여쓰기(내어쓰기) */
}

word-break

텍스트가 자신의 콘텐츠 박스 밖으로 넘칠 경우 줄바꿈 동작을 지정한다.
단어의 끊어짐을 제어하여 텍스트 레이아웃을 최적화하는 데 도움이 된다.
화면 크기가 변하는 반응형 디자인에서는 적절한 word-break 설정이 중요하다.

normal

기본값. 일반적인 줄바꿈 규칙을 사용.
영어와 같은 언어에서는 공백이나 하이픈에서만 줄바꿈이 발생하며, 한중일 등의 문자는 문자 단위로 줄바꿈이 발생한다.

div {
	word-break: normal;
}

break-all

글자 넘침을 방지하기 위해 모든 문자 사이에서 줄바꿈이 발생할 수 있다.
영어와 같은 단어도 중간에서 끊어질 수 있으며, 한중일 문자는 영향을 받지 않는다(이미 문자 단위로 줄바꿈 되기 때문).

div {
	word-break: break-all;
}

단어를 중간에서 끊어 가독성을 해칠 수 있으므로 영어 등의 텍스트에서는 주의해서 사용해야한다.

keep-all

한중일 텍스트에서 단어 사이에서만 줄바꿈이 발생.
즉, 한중일 단어는 중간에서 끊기지 않고 단어 단위로 줄바꿈이 일어난다.
비 한중일 텍스트(영어 등)에서는 normal과 동일하게 동작한다.

div {
	word-break: keep-all;
}

은 한중일 텍스트에서 단어 단위로 줄바꿈을 하므로, 긴 단어가 있을 경우 컨테이너 밖으로 텍스트가 넘칠 수 있다.
이 경우 overflow-wrap: break-word와 함께 사용하는 것이 좋다.

text-overflow

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

clip

기본값. 컨테이너의 끝에서 텍스트를 자른다.

/* 한 줄 말줄임 - clip */
.overflow-clip {
  overflow: hidden;
  white-space: nowrap; /* 텍스트의 공백을 만났을때 줄바꿈을 하지 않습니다. */
  text-overflow: clip; /* 요소의 크기를 넘친 텍스트를 자릅니다. */
}

ellipsis

잘린 텍스트를 말줄임표("...")로 나타낸다.

/* 한 줄 말줄임 - ellipsis */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* 요소의 크기를 넘친 텍스트를 말줄임 처리합니다. */
}

/* 여러 줄 말줄임 */
.multi-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 블록 컨텐츠의 라인 수를 제한하는 속성입니다.*/
}

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

jjee

내가 나에게 알려주는 개발 공부

이전 포스트

[CSS] CSS 단위

다음 포스트

[CSS] CSS 텍스트 꾸미기

CSS

CSS 텍스트 꾸미기

color

색상 표현 방법

키워드

Hex 코드

RGB, RGBA

HSL

currentColor

font-family

일반 글꼴

웹폰트

웹폰트 적용 방법

폰트와 큰따옴표("")

font-size

숫자 값

rem 사용 방법

키워드

절대 크기

상대 크기

font-weight

숫자 값

키워드

고정 굵기

상대 굵기

주의 사항

text-transform

text-decoration

text-decoration-line

text-decoration-color

text-decoration-style

text-decoration-thickness

다양한 활용

링크 스타일링

중요한 텍스트 강조

삭제된 텍스트 표시

text-shadow

다양한 활용

text-align

흰 강 현상(River of white)

vertical-align

baseline

sub

super

top

text-top

bottom: 하단의 위치를 전체 라인의 하단으로 정렬합니다.

text-bottom

middle

이미지 여백

line-height

normal

숫자

단위

서체의 기준선 목록

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

letter-spacing

text-indent

word-break

normal

break-all

keep-all

text-overflow

clip

ellipsis

[CSS] CSS 단위

[CSS] CSS 리스트 꾸미기

0개의 댓글

폰트와 큰따옴표(`""`)