감각적인 스타일링을 위한 폰트, 컬러, 아이콘 사용법 및 인터랙션 효과로 포트폴리오의 퀄리티를 한 단계 올려봅니다.

4-1. 폰트와 컬러 조합의 기본

4-1-1. 폰트 스타일링 기본

• 폰트 지정

  <aside>

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

  </aside>

  • sans-serif : 깔끔하고 현대적인 느낌, 웹에서 기본
  • serif : 신문, 책 느낌, 전통적
  • monospace : 개발 코드 느낌, 터미널, 코드 박스 등

• 추천 웹폰트 예시

  • Noto Sans KR : 한글 포함, 깔끔
  • Pretendard : 국문 웹에서, 인기
  • Roboto, Inter : 영문 중심 사이트

• 폰트 크기, 줄간격 설정

  <aside>

  body { line-height: 1.6; font-size: 1em; }

  </aside>

  • font-size : 일반 텍스트는 16px, 제목은 24px ~ 32px 권장
  • line-height : 가독성을 위해 1.4 ~ 1.8 사이 추천

4-1-2. 컬러 조합의 기본

• 색상 기본 구조

<aside>

:root { --primary-color: #8ac007; --secondary-color: #09f; --bg-color: #fff; --text-color: #333; }

</aside>

이렇게 CSS 변수로 지정해두면 나중에 수정도 쉬워집니다.

• 텍스트 & 배경 색상 조화