CSS 단위와 기능 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보~중급 웹 개발자, CSS 학습자

난이도: 중간 (CSS 기초 지식 필요)

핵심 요약

• CSS 단위 구분: 절대 단위(px)와 상대 단위(em, rem, %, vw, vh)로 반응형 디자인 가능
• 그래디언트 활용: linear-gradient, radial-gradient, conic-gradient로 시각적 효과 구현
• CSS 함수/규칙: calc(), var(), @media, @keyframes 등으로 동적 스타일링 및 반응형 디자인 가능

섹션별 세부 요약

1. CSS 단위

• 절대 단위(px)는 고정 크기, 상대 단위(em, rem)는 부모 요소/루트 폰트 크기에 기반
• %은 부모 요소 크기 비율, vw/vh는 뷰포트 너비/높이 기반
• ch는 "0" 글자 너비 기준, vmin/vmax는 뷰포트 최소/최대 크기 기준

1. 그래디언트 유형

• 선형 그래디언트: linear-gradient(direction, color-stop)으로 방향 및 색상 전환 지정
• 원형 그래디언트: radial-gradient(shape size at position, color...)으로 중심 기반 색상 확장
• 콘 그래디언트: conic-gradient(from direction, color...)으로 파이 형태 색상 분포
• 반복 그래디언트: repeating-linear-gradient/repeating-radial-gradient로 무한 반복 패턴 생성

1. CSS 함수

• calc()로 수치 계산: width: calc(100% - 20px)
• var()으로 커스텀 속성 정의: --main-color: #3498db; color: var(--main-color)
• rgba()/hsla()로 반투명 색상 정의: rgba(255, 99, 71, 0.5)
• url()로 외부 자원 로드: background-image: url('image.jpg')
• clamp()로 범위 제한: font-size: clamp(1rem, 2vw + 1rem, 2rem)

1. CSS @규칙

• @media로 반응형 디자인: @media (max-width: 600px) { body { font-size: 14px } }
• @keyframes로 애니메이션 정의: @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } }
• @font-face로 커스텀 폰트 적용: @font-face { font-family: 'MyCustomFont'; src: url('mycustomfont.woff2') }
• @supports로 브라우저 호환성 체크: @supports (display: grid) { .container { display: grid } }

결론

- 반응형 디자인에서 vw/vh와 rem 단위를 결합하여 유연한 레이아웃 구현

- 그래디언트와 rgba()/hsla() 조합으로 투명도 기반 시각적 효과 적용

- @media와 @keyframes를 통해 다양한 디바이스 및 애니메이션 최적화 가능