IT 강좌 CSS 기초 021_값 유형, 단위, 크기, 색상

숫자 유형

CSS에서 다양한 속성에 다양한 숫자 값이 사용됩니다. 일반적인 숫자 유형:

문자열: 작은따옴표 또는 큰따옴표로 감싼 텍스트.
숫자: 정수 또는 소수. 1024, -100, 0.255 등.
단위: 단위가 있는 숫자 유형, 예: 45deg, 5s, 10px.
백분율: 백분율 숫자 유형, 예: 50%.
색상값: 16진수, RGB, RGBA, HSL, HSLA 등.
키워드: 특정 의미를 가진 단어, 예: auto, initial, inherit 등.

단위

CSS의 단위는 길이, 각도, 시간, 주파수 등의 속성값을 나타냅니다.

길이 단위:

상대 길이 단위:

em: 부모 요소의 글꼴 크기 기준. 1.5em은 부모 글꼴 크기의 1.5배.
rem: 루트 요소(html)의 글꼴 크기 기준. 1rem = 루트 글꼴 크기.
ex: 소문자 “x”의 높이 기준.

예시:

1
.example {
2
  font-size: 16px;
3
  padding: 1.5em;
4
  margin: 2rem;
5
  height: 2ex;
6
}

절대 길이 단위:

px: 픽셀, CSS에서 가장 기본적이고 널리 사용되는 단위.
in: 인치, 1인치 = 96픽셀.
cm: 센티미터.
mm: 밀리미터.
pt: 포인트, 1pt = 1/72인치.
pc: 파이카, 1pc = 12pt = 16픽셀.

예시:

1
.example {
2
  width: 200px;
3
  height: 2in;
4
  margin: 1cm;
5
  font-size: 12pt;
6
}

상대 백분율 단위:

%: 부모 요소 기준 백분율.

예시:

1
.example {
2
  width: 50%;
3
  padding: 10%;
4
}

뷰포트 단위:

vw: 1vw = 뷰포트 너비의 1%.
vh: 1vh = 뷰포트 높이의 1%.
vmin: vw와 vh 중 작은 값.
vmax: vw와 vh 중 큰 값.

예시:

1
.example {
2
  width: 50vw;
3
  height: 30vh;
4
}

각도 단위:

deg (도):

deg는 가장 일반적인 각도 단위, 한 바퀴 = 360도.

예시:

1
.example {
2
  transform: rotate(45deg);
3
  background: linear-gradient(45deg, red, yellow);
4
}

rad (라디안):

rad, 한 바퀴 = 2π 라디안.

예시:

1
.example {
2
  transform: rotate(1rad);
3
}

grad (그래디언):

grad, 한 바퀴 = 400 그래디언.

1
.example {
2
  transform: rotate(50grad);
3
}

turn (회전):

turn은 한 바퀴 = 360도.

1
.example {
2
  transform: rotate(0.5turn);
3
}

시간 단위:

s (초)

s는 초 단위.

예시:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9
.example{
10
    transition: background-color 1s ease;
11
}

ms (밀리초)

ms, 1초 = 1000밀리초.

예시:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9

10
.example{
11
    transition: background-color 2000ms ease;
12
}

주파수 단위:

Hz (헤르츠)

헤르츠는 가장 일반적인 주파수 단위.

예시:

1
.example {
2
  animation: shake 1s infinite;
3
}

kHz (킬로헤르츠)

1 kHz = 1000 Hz.

예시:

1
.example {
2
  audio {
3
    frequency: 5kHz;
4
  }
5
}

해상도 단위:

dpi (인치당 도트)

dpi는 인치당 도트 수.

예시:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 300dpi;
5
}

dppx (픽셀당 도트)

dppx는 화면의 픽셀당 도트 수.

예시:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 2dppx;
5
}

dpcm (센티미터당 도트)

dpcm는 센티미터당 도트 수.

예시:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 2dpcm 3dpcm;
4
}

크기

CSS의 크기는 요소의 치수를 제어합니다.

width와 height 속성

요소의 너비와 높이를 설정합니다.

예시:

1
.example {
2
  width: 300px;
3
  height: 200px;
4
}

max-width와 max-height 속성

최대 너비와 높이를 설정합니다.

예시:

1
.example {
2
  max-width: 100%;
3
  max-height: 500px;
4
}

min-width와 min-height 속성:

예시:

1
.example {
2
  min-width: 200px;
3
  min-height: 100px;
4
}

색상

키워드 색상

미리 정의된 키워드 색상: red(빨강), blue(파랑), green(초록) 등.

예시:

1
.example {
2
  color: red;
3
  background-color: blue;
4
}

16진수 색상

6자리 또는 3자리 16진수 RGB 색상. #RRGGBB 또는 #RGB 형식.

예시:

1
.example {
2
  color: #ff0000;
3
  background-color: #00f;
4
}

RGB, RGBA 색상

rgb()는 세 매개변수(0-255). rgba()는 투명도 매개변수(0-1) 추가.

예시:

1
.example1 {
2
  color: rgb(255, 0, 0);
3
  background-color: rgb(0, 0, 255);
4
}
5

6
.example2 {
7
  color: rgba(255, 0, 0, 0.5);
8
  background-color: rgba(0, 0, 255, 0.7);
9
}

HSL, HSLA 색상

hsl()은 색조(0-360), 채도(0%-100%), 명도(0%-100%). hsla()는 투명도(0-1) 추가.

예시:

1
.example1 {
2
  color: hsl(0, 100%, 50%);
3
  background-color: hsl(240, 100%, 50%);
4
}
5

6
.example2 {
7
  color: hsla(0, 100%, 50%, 0.5);
8
  background-color: hsla(240, 100%, 50%, 0.7);
9
}

RGB 색상 대조표 (oschina.net)