CSS: 값과 단위

1. CSS에서 “값”이란?

CSS는 속성: 값; 형태로 스타일을 지정합니다.

예를 들어,

color: red;
font-size: 16px;

여기서 red, 16px이 바로 값(Value)입니다.
즉, 스타일을 어떻게 적용할지 구체적으로 지시하는 정보가 값입니다.

 

하지만 우리가 사용할 수 있는 값에는 생각보다 많은 종류가 있습니다. 예를들면 사용자의 화면 크기에 따라 반응하는 vw 단위가 있죠. 따라서 오늘은 다양한 CSS 값에 대해 알아보겠습니다.

 

---

2. CSS 값의 유형별 설명

2.1 숫자 값

• 단위가 없는 숫자.
• 예: z-index: 3, opacity: 0.75

숫자값은 어떤 속성에서는 그대로 사용되지만, 대부분의 CSS 속성에서는 단위와 함께 사용되어야 합니다.

---

2.2 길이 값 (Length)

CSS에서 길이는 텍스트 크기, 여백, 패딩, 박스 크기 등 거의 모든 레이아웃 요소에서 사용됩니다.
길이는 두 가지로 나뉩니다:

📌 절대 단위 (Absolute units)

단위	설명
cm, mm, in	실제 인쇄물 기준 단위 (센티미터, 밀리미터, 인치)
pt	포인트 (1pt = 1/72인치)
px	픽셀 (화면상 하나의 점)

→ 화면 해상도나 기기에 상관없이 항상 일정한 크기입니다.

📌 상대 단위 (Relative units)

단위	기준
em	현재 요소의 글자 크기 기준
rem	최상위 html 요소의 글자 크기 기준
%	부모 요소의 기준 %
vw	뷰포트 너비의 1%
vh	뷰포트 높이의 1%

→ 상황에 따라 유동적으로 변하는 단위로, 반응형 웹을 만들 때 주로 사용됩니다.

예시

font-size: 2em;     /* 현재 글자 크기의 2배 */
width: 80vw;        /* 화면 너비의 80% */
padding: 5%;        /* 부모 요소 너비의 5%만큼 안쪽 여백 */

---

2.3 백분율(%)

• 항상 어떤 기준값의 일부로 계산됩니다.
• 예: width: 50% → 부모 요소 너비의 절반
• margin-top: 10% → 부모의 너비 기준이 아닌, 컨텍스트에 따라 달라질 수 있음

---

2.4 색상 값(Color)

CSS는 색상을 지정하는 다양한 방법을 지원합니다:

방식	예시	설명
색상 키워드	red, blue, black	이름으로 지정
16진수	#ff0000, #333	RGB 값으로 표현
함수형	rgb(255, 0, 0), rgba(0,0,0,0.5)	빨강/녹색/파랑 + 투명도
hsl()	hsl(120, 100%, 50%)	색상(hue), 채도(saturation), 밝기(lightness) 기반

참고: rgba나 hsl은 색상에 투명도를 줄 때 매우 유용합니다.

---

2.5 이미지 관련 값

CSS 속성에 이미지 주소나 그래디언트를 전달할 수 있습니다.

background-image: url('배경.jpg');
background-image: linear-gradient(to right, red, blue);

→ 이처럼 url() 함수나 linear-gradient() 같은 것이 <image> 타입의 값입니다.

---

2.6 위치 관련 값 (Position)

배경 이미지나 요소 배치 등에 쓰이는 위치 지정값:

background-position: center top;

또는

top: 20px;
left: 50%;

→ 이런 값들은 요소나 배경의 위치를 결정하는 데 사용됩니다.

---

2.7 문자열, 식별자, 함수형 값

▪ 문자열 <string>

텍스트 그대로 전달할 때 사용됩니다.

content: "Hello, World!";
font-family: "Courier New";

▪ 식별자 <ident>

키워드처럼 쓰이는 식별 이름입니다.

display: block;
position: relative;

▪ 함수형 <function>

값이 어떤 계산 또는 참조로 결정될 때 쓰입니다.

width: calc(100% - 20px);
font-size: var(--main-font-size);

calc(), var(), attr() 등은 CSS 안에서 동적인 값을 생성하거나 참조할 때 매우 유용합니다.

 

---

3. CSS 값 작성 시 주의할 점

• 단위는 상황에 따라 생략 가능
  예: line-height: 1.5;는 단위 없이 숫자로 사용 가능
• 단위를 잘못 쓰면 적용되지 않음
  예: width: 50pt; → 웹에서는 pt가 권장되지 않음, 대신 px 또는 % 사용

 

---

4. 요약 정리

값 유형	예시	설명
숫자	1, -0.5	단위 없는 숫자
길이	16px, 1.2em	크기 관련
백분율	50%	부모 기준 비율
색상	#333, rgba(0,0,0,0.5)	배경, 글자 등
이미지	url('...')	배경 등
위치	top: 10px	요소 배치
문자열	"hello"	텍스트 값
함수형	calc(), var()	계산 및 변수

 

---

5. 실제 디자인에 어떻게 쓰이나?

• 폰트 크기 조절 → font-size: 1.1rem
• 여백 조절 → margin: 10px 5%
• 색상 테마화 → color: var(--theme-color)
• 반응형 레이아웃 → width: 100vw

 

출처

CSS 값과 단위 - Web 개발 학습하기 | MDN