Files

Elex 7936270d10 2025-02-03T13:25:31

2025-02-03 13:25:31 +09:00

6.2 KiB

Raw Blame History

글꼴 및 텍스트 스타일

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

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

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

font-kerning

font-feature-settings

text-align

텍스트의 정렬 방식을 지정하는 속성

값: left, right, center, justify

p { /* 텍스트를 중앙 정렬 */
  text-align: center;
}

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

text-align-last

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

text-rendering

text-orientation

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

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

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) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.

6.2 KiB Raw Blame History