[CSS 3강] 보기 좋은 글이 읽기도 좋다! 텍스트 스타일과 색상

[CSS 3강] 보기 좋은 글이 읽기도 좋다! 텍스트 스타일과 색상

"웹사이트의 분위기를 결정하는 폰트와 컬러 스타일링을 마스터해봅시다."

안녕하세요! 지난 시간에는 박스 모델을 통해 레이아웃의 기초를 다졌습니다. 오늘은 웹사이트의 정보를 전달하는 가장 중요한 요소인 텍스트를 예쁘게 꾸미고, 다양한 방식으로 색상을 표현하는 방법을 알아보겠습니다.

1. 텍스트 스타일링 (Typography)

글꼴의 크기, 굵기, 정렬 등 가독성을 높여주는 핵심 속성들입니다.

✅ font-family: 글꼴 종류 설정 (예: '나눔고딕', sans-serif)

✅ font-size: 글자 크기 (px, em, rem 등 단위 사용)

✅ font-weight: 글자 두께 (normal, bold 또는 100~900 숫자)

✅ line-height: 줄 간격 (가독성에 매우 중요! 보통 1.5~1.8 추천)

✅ text-align: 텍스트 정렬 (left, center, right, justify)

2. CSS에서 색상을 표현하는 3가지 방법

색상을 지정할 때는 단순히 'red' 같은 이름 외에 정밀한 코드를 사용합니다.

• 🎨 Hex Code: 16진수 표현법 (예: #ff4757) - 가장 많이 사용됨
• 🌈 RGB / RGBA: 빛의 3원색 (예: rgba(255, 0, 0, 0.5)) - 투명도 조절 가능
• 🔡 Color Name: 미리 정의된 이름 (예: skyblue, tomato)

3. 텍스트와 색상 적용 예제 (실습)

아래 코드를 스타일 시트에 적용하여 본문의 가독성을 직접 개선해 보세요.

/* 본문 텍스트 스타일링 */ .post-content { font-family: 'Noto Sans KR', sans-serif; font-size: 16px; line-height: 1.8; /* 줄 간격을 넓혀 가독성 확보 */ color: #2f3542; /* 완전한 검정색보다는 진한 회색이 눈에 편함 */ } /* 강조 텍스트 스타일링 */ .highlight { color: #2ecc71; /* 포인트 컬러 적용 */ font-weight: bold; text-decoration: underline; /* 밑줄 추가 */ } /* 제목 중앙 정렬 */ h2 { text-align: center; letter-spacing: -1px; /* 자간을 살짝 좁혀 세련되게 표현 */ }

디자인의 절반은 타이포그래피!

폰트와 줄 간격만 잘 조절해도 웹사이트의 퀄리티가 2배 이상 좋아 보입니다.

다음 4강에서는 레이아웃의 꽃, 'Flexbox 레이아웃'에 대해 배워볼게요!