elex/css-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
a3f0a4127dba055845afc4d38b4f2e3b96ecf927
css-examples/docs/06_글꼴 및 텍스트 스타일.md
Elex 3d9e93ae42 2025-02-03T19:29:18
2025-02-03 19:29:18 +09:00

8.9 KiB
Raw Blame History

글꼴 및 텍스트 스타일

웹페이지에서 텍스트를 멋지게 스타일링하려면 글꼴(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를 한 줄로 설정할 수 있음.

p {
  font: italic small-caps bold 20px Arial, sans-serif;
}

font- 접두어가 붙은 속성들은 글꼴 스타일을 지정하는 역할을 해. 글자 크기, 두께, 스타일, 종류 등을 설정할 수 있어!

font-family

텍스트의 글꼴을 설정하는 속성. 여러 개의 글꼴을 쉼표(,)로 나열할 수 있음!

브라우저에 없는 글꼴은 적용되지 않으므로, 백업용 폰트도 설정하는 게 좋음!

  • serif | sans-serif | monospace | cursive | fantasy
p {
  font-family: Arial, sans-serif;
  /* 첫 번째 글꼴(Arial)이 없으면, 대체 글꼴(sans-serif)이 적용됨 */
}

웹 폰트 적용 (Google Fonts 예제)

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

p {
  font-family: 'Roboto', sans-serif;
}

font-size

텍스트의 크기를 설정하는 속성

  • 단위: px, em, rem, %, vw, vh 등
p {
  font-size: 1.2em; /* 부모 요소의 1.2배 크기 */
}
h1 {
  font-size: 2rem; /* `html` 기본 크기(16px)의 2배 → 32px */
}

em은 부모 요소의 크기를 기준으로 하고, rem은 <html> 요소를 기준으로 함.

font-size-adjust

x-height(소문자 높이)를 기준으로 글꼴 크기를 조정하여, 폰트가 변경되었을 때 가독성을 유지

  • none, 0 ~ 1 사이 값 사용

font-weight

글자의 굵기를 설정하는 속성

  • 400 (기본), 700 (굵음) 같은 숫자 값을 사용하거나, normal, bold, lighter, bolder 같은 키워드를 사용 가능
p {
  font-weight: bold; /* 굵게 */
}
h1 {
  font-weight: 700; /* 700 (굵은 폰트) */
}

숫자로 설정하면 세밀한 굵기 조정이 가능함!

  • 100 : 매우 가늘게
  • 400 : 기본값 (normal)
  • 700 : 굵게 (bold)
  • 900 : 가장 굵게

font-style

글자의 기울임 스타일을 지정하는 속성

  • 값: normal, italic, oblique
p {
  font-style: italic; /* 이탤릭체 */
}
h2 {
  font-style: oblique; /* 기울어진 텍스트 */
}

이탤릭(italic)과 oblique(기울어진 텍스트)는 비슷하지만, 폰트에 따라 다르게 보일 수 있음!

font-variant

small-caps 값 사용 시 소문자를 작은 대문자로 변환

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
p { /* 텍스트를 중앙 정렬 */
  text-align: center;
}

p { /* 텍스트가 좌우 균형을 맞춰 정렬됨 */
  text-align: justify;
}

text-align-last

문단의 마지막 줄을 어떻게 정렬할지 결정

  • auto(기본값), left, right, center, justify

text-decoration

텍스트에 밑줄, 취소선 등을 추가할 때 사용

  • none : 기본값 (장식 없음)
  • underline : 밑줄
  • overline : 위줄
  • line-through : 취소선
/* 밑줄과 취소선을 동시에 적용 */
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 : 단어의 첫 글자만 대문자
p { /* 텍스트를 모두 대문자로 변환 */
  text-transform: uppercase;
}

text-indent

문단의 첫 줄을 들여쓰기 할 때 사용하는 속성

p {
  text-indent: 30px;
}

음수 값을 사용해서, 첫 줄을 왼쪽으로 당길 수도 있음!

p {
  text-indent: -20px;
}

모든 줄을 들여쓰기 하려면 margin-left 사용!

text-overflow

텍스트가 박스를 벗어날 경우 clip(잘라내기) 또는 ellipsis(... 말줄임표 표시) 적용

  • clip, ellipsis

letter-spacing

글자 사이의 간격을 조절

p {
  letter-spacing: 2px;
}

word-spacing

단어 사이의 간격을 조절

p {
  word-spacing: 5px;
}

line-height

줄 간격을 조절

p { /* 줄 간격을 1.5배로 조절 */
  line-height: 1.5;
}

줄바꿈 및 방향 관련 속성

white-space

공백, 줄바꿈, 자동 줄바꿈(줄바꿈 방지) 등을 설정하는 속성

  • normal : 여러 개의 공백을 하나로 줄이고, 텍스트가 넘치면 자동 줄바꿈됨!
  • nowrap : 줄바꿈 없이 한 줄로 표시됨!
    • 가로 스크롤이 생길 수도 있음
    • 버튼이나 제목처럼 한 줄로 유지해야 하는 경우 유용!
  • pre : HTML 코드에서 입력한 공백과 줄바꿈을 그대로 유지함!
    • 소스 코드 표시(<pre>) 같은 경우에 적합!
  • pre-wrap : 공백과 줄바꿈을 유지하면서도, 요소의 너비를 넘기면 자동 줄바꿈됨!
    • 반응형 웹 디자인에서 유용!
  • pre-line : 줄바꿈은 유지하지만, 여러 개의 공백은 하나로 줄임!
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) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.

Reference in New Issue View Git Blame Copy Permalink