CSS로 예쁘게 꾸미기 — 색상, 폰트, 레이아웃 기초

CSS의 마법: 같은 구조, 완전히 다른 느낌

이전 글에서 HTML로 자기소개 페이지를 만들었습니다. 구조는 완성됐지만, 솔직히 예쁘지는 않았죠? 하얀 배경에 검은 글씨, Times New Roman 폰트... 1990년대 웹사이트 같은 느낌입니다.

오늘은 CSS를 사용해서 같은 HTML을 세련된 디자인으로 변신시켜보겠습니다.

CSS 기본 문법

CSS의 기본 구조는 아주 간단합니다: 누구를(선택자) + 어떻게(속성: 값) 꾸밀지 정하는 것입니다.

예를 들어 "모든 문단의 글자색을 네이비로 바꿔줘"를 CSS로 쓰면:

p { color: navy; }

이게 전부입니다! p는 선택자(누구를), color: navy;는 속성과 값(어떻게)입니다.

바로 써먹는 CSS 속성 10가지

• color — 글자 색깔
• background-color — 배경 색깔
• font-size — 글자 크기
• font-family — 글꼴 (폰트)
• font-weight — 글자 굵기 (bold 등)
• margin — 요소 바깥 여백
• padding — 요소 안쪽 여백
• border — 테두리
• border-radius — 둥근 모서리
• text-align — 텍스트 정렬 (center, left, right)

실습: 자기소개 페이지 꾸미기

1. 예쁜 폰트 적용하기

기본 폰트 대신 Google Fonts에서 무료 폰트를 가져와 적용합니다. "Noto Sans KR"은 한국어에 최적화된 깔끔한 폰트입니다.

2. 배경색과 카드 디자인

전체 배경을 연한 회색으로 하고, 콘텐츠 영역을 흰색 카드로 만들면 훨씬 세련되어 보입니다. box-shadow 속성을 추가하면 카드가 살짝 떠 있는 효과도 줄 수 있습니다.

3. Flexbox로 레이아웃 잡기

CSS의 핵심 개념 중 하나인 Flexbox를 사용하면 요소들을 가로로 나란히 배치하거나, 가운데 정렬하는 것이 매우 쉬워집니다. display: flex; 한 줄만 추가하면 마법이 시작됩니다.

4. 반응형 디자인

PC에서는 넓게, 모바일에서는 세로로 쌓이도록 하는 반응형 디자인. @media 쿼리를 사용합니다. 화면 너비가 768px 이하이면 모바일로 판단하고 레이아웃을 변경합니다.

색상 고르는 팁

색상 조합이 어렵다면 이 도구들을 활용해보세요:

• Coolors.co — 스페이스바 한 번으로 색상 조합 생성
• Google Material Design Colors — 검증된 색상 팔레트
• ColorHunt.co — 다른 디자이너가 만든 색 조합 참고

마치며

CSS를 처음 배울 때는 속성이 너무 많아서 압도당하는 느낌이 들 수 있습니다. 하지만 위에서 소개한 10가지 속성만으로도 충분히 멋진 디자인을 만들 수 있습니다. 나머지는 필요할 때 하나씩 배우면 됩니다.

다음 글에서는 JavaScript의 세계로 들어갑니다. 버튼을 클릭하면 반응하는, 살아 있는 웹페이지를 만들어봅시다!