CSS에서 사용되는 주요 단위와 값

CSS에서 사용되는 주요 단위와 값

1. 픽셀 (px)

• 절대 단위로, 화면의 픽셀을 기준으로 한다.
• 예: width: 100px;
• 고정된 크기가 필요할 때 주로 사용한다.

2. 퍼센트 (%)

• 상대 단위로, 부모 요소의 크기를 기준으로 한다.
• 예: width: 50%;
• 반응형 디자인에 유용하다.

3. em

• 상대 단위로, 현재 요소의 font-size를 기준으로 한다.
• 예: margin: 1em; (현재 폰트 크기와 같은 마진)
• 텍스트 관련 속성에 주로 사용된다.

4. rem

• 상대 단위로, 루트 요소(일반적으로 )의 font-size를 기준으로 한다.
• 예: font-size: 1.5rem;
• 일관된 크기 조정에 유용하다.

5. vh와 vw

• 뷰포트 높이(vh)와 뷰포트 너비(vw)의 1%를 나타낸다.
• 예: height: 100vh; (화면 전체 높이)
• 반응형 레이아웃에 유용하다.

6. 색상 값

• 키워드: color: red;
• HEX: color: #FF0000;
• RGB: color: rgb(255, 0, 0);
• RGBA: color: rgba(255, 0, 0, 0.5); (알파 채널 포함)

7. 불투명도

• 0(완전 투명)부터 1(완전 불투명)까지의 값을 사용한다.
• 예: opacity: 0.5;

8. flex

• Flexbox 레이아웃에서 사용되며, 공간 분배를 제어한다.
• 예: flex: 1; (남은 공간을 동등하게 분배)

이러한 단위와 값들을 적절히 조합하여 사용하면 다양한 디자인과 레이아웃을 구현할 수 있다. 특히 반응형 웹 디자인에서는 픽셀과 같은 절대 단위보다는 %, em, rem, vh, vw 같은 상대 단위를 사용하는 것이 더 효과적일 수 있다.

인사이트

• 반응형 디자인이 얼마나 중요한지 깨달았다. 다양한 기기에 대응하려면 상대 단위를 잘 활용해야 한다.
• 상대 단위를 사용하면 나중에 유지보수하기가 훨씬 쉬워진다는 걸 알게 됐다.
• rem 같은 단위를 쓰면 사용자의 설정을 존중하는 접근성 높은 디자인을 만들 수 있다.
• 단위를 잘 선택하면 성능도 최적화할 수 있다는 걸 배웠다. 불필요한 리플로우나 리페인트를 줄일 수 있으니까.
• 여러 브라우저에서 일관된 레이아웃을 만들려면 다양한 단위를 이해하고 적절히 사용해야 한다는 걸 알았다.

결론

• 절대 단위와 상대 단위를 상황에 맞게 섞어 쓸 줄 알아야 한다. 유연한 접근이 필요하다.
• CSS는 계속 발전하고 있으니, 나도 계속 공부해야 한다. 새로운 단위나 기술이 나오면 바로 배워야겠다.
• 이론만으로는 부족하다. 다양한 프로젝트를 직접 해보면서 실전 감각을 키워야 한다.
• CSS 전처리기나 포스트 프로세서 같은 도구들도 배워야겠다. 이걸 쓰면 더 효율적으로 일할 수 있을 것 같다.
• '예쁜' 디자인보다는 모든 사용자가 편하게 쓸 수 있는 디자인을 만들어야 한다. 사용자 중심으로 생각하는 습관을 들여야겠다.
• CSS를 쓸 때마다 "이게 성능에 어떤 영향을 줄까?"라고 생각하는 습관을 들여야겠다.