[CSS] 자주 사용되는 CSS 단위 & 컬러 코드 정리-2025-02-13

✅ 자주 사용되는 CSS 단위 & 컬러 코드 정리

📏 자주 사용되는 px, rem, em 크기

1️⃣ 폰트 크기 (font-size)

px	rem	em	설명
12px	0.75rem	0.75em	아주 작은 텍스트 (부가설명)
14px	0.875rem	0.875em	일반적인 본문 텍스트
16px	1rem	1em	브라우저 기본 글자 크기
18px	1.125rem	1.125em	강조된 본문 텍스트
24px	1.5rem	1.5em	소제목 (h4, h5 등)
32px	2rem	2em	중간 크기 제목 (h3)
40px	2.5rem	2.5em	큰 제목 (h2)
48px	3rem	3em	매우 큰 제목 (h1)

---

2️⃣ 여백 (margin, padding)

px	rem	설명
4px	0.25rem	아주 작은 간격 (아이콘, 텍스트 여백)
8px	0.5rem	일반적인 내부 여백
12px	0.75rem	컨텐츠 간 중간 여백
16px	1rem	일반적인 박스 여백
24px	1.5rem	큰 여백
32px	2rem	섹션 간 간격
40px	2.5rem	아주 큰 여백 (컨텐츠 그룹)

---

3️⃣ 버튼 크기 (width, height)

px	rem	설명
32px	2rem	작은 버튼 (아이콘 버튼)
40px	2.5rem	일반적인 버튼 크기
48px	3rem	넉넉한 버튼 크기
56px	3.5rem	큰 버튼
64px	4rem	매우 큰 버튼

---

🎨 자주 사용되는 컬러 코드

(color & background-color)

🔵 기본 컬러

색상명	HEX 코드	RGB 값
흰색 (White)	#FFFFFF	rgb(255, 255, 255)
검은색 (Black)	#000000	rgb(0, 0, 0)
회색 (Gray)	#808080	rgb(128, 128, 128)
연한 회색 (Light Gray)	#D3D3D3	rgb(211, 211, 211)
짙은 회색 (Dark Gray)	#A9A9A9	rgb(169, 169, 169)

---

🔴 강조 색상

색상명	HEX 코드	RGB 값
빨강 (Red)	#FF0000	rgb(255, 0, 0)
파랑 (Blue)	#0000FF	rgb(0, 0, 255)
초록 (Green)	#008000	rgb(0, 128, 0)
노랑 (Yellow)	#FFFF00	rgb(255, 255, 0)
주황 (Orange)	#FFA500	rgb(255, 165, 0)

---

🎨 부드러운 색상

색상명	HEX 코드	RGB 값
연한 파랑 (Light Blue)	#ADD8E6	rgb(173, 216, 230)
파스텔 핑크 (Pastel Pink)	#FFB6C1	rgb(255, 182, 193)
베이지 (Beige)	#F5F5DC	rgb(245, 245, 220)
연한 녹색 (Light Green)	#90EE90	rgb(144, 238, 144)
코발트 블루 (Cobalt Blue)	#0047AB	rgb(0, 71, 171)

---

🌈 트렌디한 네온 컬러

색상명	HEX 코드	RGB 값
네온 그린 (Neon Green)	#39FF14	rgb(57, 255, 20)
네온 핑크 (Neon Pink)	#FF10F0	rgb(255, 16, 240)
네온 블루 (Neon Blue)	#1F51FF	rgb(31, 81, 255)
네온 옐로우 (Neon Yellow)	#E9FF00	rgb(233, 255, 0)

---

🏆 실전에서 많이 쓰이는 컬러 조합

1️⃣ 깔끔한 UI용

• 배경: #F5F5F5 (연한 회색)
• 기본 텍스트: #333333 (진한 회색)
• 버튼: #007BFF (파란색)

2️⃣ 다크 모드용

• 배경: #121212 (거의 검정)
• 텍스트: #E0E0E0 (연한 회색)
• 강조: #BB86FC (연보라)

---