[CSS] #05 스타일 속성, CSS 텍스트 스타일 속성 완전 정복! 글자 색상, 크기, 정렬까지 한 번에 배우기

 

 

안녕하세요, 토스트데브입니다!
오늘은 CSS에서 텍스트 스타일링에 자주 사용하는 속성들을 알아보겠습니다.

텍스트는 웹페이지에서 가장 중요한 콘텐츠 중 하나이기 때문에, 글자의 색상, 크기, 정렬, 간격 등을 세심하게 조정하는 것은 디자인의 완성도를 높이는 핵심입니다.

그럼 바로 하나씩 살펴볼까요?

 

 

1️⃣ color – 글자 색상 지정

글자 색상을 설정합니다. 색상 값은 이름, 16진수, rgb(), hsl() 등 다양하게 지정 가능합니다.

p {
  color: red;
}

h1 {
  color: #333333;
}

 

 

2️⃣ font-size – 글자 크기 조절

글자의 크기를 지정합니다. 단위는 px, em, rem, % 등을 사용할 수 있습니다.

h2 {
  font-size: 24px;
}

p {
  font-size: 1.2em;
}

💡 em은 부모 요소의 글꼴 크기를 기준, rem은 html 기준입니다.

 

 

3️⃣ font-weight – 글자의 두께

글자의 굵기를 지정합니다.

strong {
  font-weight: bold;
}

또는 숫자로 지정 가능:

p {
  font-weight: 700;
}

 

값	의미
normal	일반 두께
bold	굵게
100 ~ 900	수치로 세밀 조절 가능 (100은 가장 얇음)

 

 

4️⃣ font-style – 글자 스타일 (기울임)

글자를 이탤릭체로 기울입니다.

em {
  font-style: italic;
}

 

값	의미
normal	기본
italic	기울임
oblique	기울이기 (기기 따라 다를 수 있음)

 

 

5️⃣ font-family – 글꼴 설정

웹에서 사용할 글꼴을 지정합니다. 여러 글꼴을 우선순위로 지정할 수 있고, 공백이 있는 글꼴은 " "로 감쌉니다.

body {
  font-family: "Noto Sans KR", Arial, sans-serif;
}

💡 기본 글꼴이 없을 경우 대체 폰트로 적용됨.

 

 

6️⃣ text-align – 정렬

텍스트를 좌우 또는 가운데로 정렬할 수 있습니다.

p {
  text-align: center;
}

 

값	의미
left	왼쪽 정렬
center	가운데 정렬
right	오른쪽 정렬
justify	양쪽 정렬

 

 

7️⃣ line-height – 줄 간격

줄과 줄 사이의 간격을 조절합니다.

p {
  line-height: 1.6;
}

일반적으로 1.4 ~ 1.8 사이를 권장하며 % 형식으로도 가능 ex) 140%

 

 

8️⃣ letter-spacing – 글자 간격

글자 사이의 간격을 조절합니다.

p {
  letter-spacing: 0.05em;
}

 

 

9️⃣ word-spacing – 단어 간격

단어 사이의 간격을 조절합니다.

p {
  word-spacing: 8px;
}

 

 

🔟 text-decoration – 텍스트 꾸밈 효과

주로 밑줄, 취소선 등을 지정할 때 사용합니다.

a {
  text-decoration: none; /* 링크 밑줄 제거 */
}

 

값	의미
none	없음
underline	밑줄
line-through	취소선
overline	윗줄

 

 

🔁 보너스: 단축 속성으로 한 번에 지정하기

p {
  font: italic bold 16px/1.5 "Noto Sans", sans-serif;
}

👉 순서: font-style font-weight font-size/line-height font-family

 

 

✅ 정리하며…

텍스트 관련 CSS 속성은 웹페이지의 읽기 편한 레이아웃을 만드는 핵심 요소입니다.
텍스트 하나만 바꿔도 전체 분위기가 달라질 수 있기 때문에, 이 속성들을 잘 이해하고 활용하는 것이 중요해요!

 

#CSS텍스트속성 #font속성 #웹디자인기초 #CSS기초 #텍스트스타일링 #글자스타일 #프론트엔드기초 #웹폰트 #CSS정렬 #lineHeight