Files

Elex 7936270d10 2025-02-03T13:25:31

2025-02-03 13:25:31 +09:00

5.9 KiB

Raw Blame History

배경 및 색상

웹페이지의 디자인을 풍부하게 만들려면 배경(Background)과 색상(Color) 관련 속성을 잘 활용해야 해!

속성	설명	옵션
background	요소의 배경
color	글자 색상을 지정
opacity	요소의 투명도	0 ~ 1

background

.box {
  background: lightblue url('background.jpg') no-repeat center/cover;
}

background-color

요소의 배경 색을 지정

색상 값: red, #ff0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), transparent 등

.box {
  background-color: lightblue;
}

background-image

배경에 이미지를 추가할 때 사용

.box1 {
  background-image: url('background.jpg');
}
.box2 {
  background-image: linear-gradient(to right, red, blue);
}

background-size

배경 이미지를 어떻게 크기 조정할지 결정

auto : 원본 크기 유지 (기본값)
cover : 요소를 덮도록 확대 (비율 유지)
contain : 요소 안에 맞춤 (비율 유지)
100px 200px : 가로 100px, 세로 200px 크기로 조정

.box {
  background-image: url('background.jpg');
  background-size: cover;
}

background-position

배경 이미지가 요소 안에서 어디에 배치될지를 지정

left top : 왼쪽 상단 (기본값)
center center: 정중앙
right bottom : 오른쪽 하단
50% 50% : 가로 50%, 세로 50% (중앙 정렬)

.box {
  background-image: url('background.jpg');
  background-position: center;
}

background-repeat

배경 이미지가 반복되는 방식 설정

repeat : 가로와 세로로 반복 (기본값)
repeat-x : 가로 방향으로만 반복
repeat-y : 세로 방향으로만 반복
no-repeat : 반복 없음

.box {
  background-image: url('pattern.png');
  background-repeat: no-repeat;
}

background-attachment

배경 이미지가 스크롤될 때 움직이는 방식 설정

scroll : 스크롤 시 배경도 함께 이동 (기본값)
fixed : 배경을 고정 (스크롤해도 움직이지 않음)
local : 콘텐츠 안에서만 스크롤됨

.box {
  background-image: url('background.jpg');
  background-attachment: fixed;
}

background-clip

배경이 요소의 어느 영역까지 확장될지를 결정

border-box : 테두리까지 확장 (기본값)
padding-box : 패딩까지만 적용
content-box : 내용 영역까지만 적용

.box {
  background-color: lightblue;
  background-clip: padding-box;
}

background-origin

배경 이미지가 시작되는 기준점을 결정

border-box : 테두리를 기준으로 시작
padding-box : 패딩을 기준으로 시작 (기본값)
content-box : 내용 영역을 기준으로 시작

.box {
  background-image: url('background.jpg');
  background-origin: content-box;
}

color

글자 색상을 지정

p {
  color: red; /* 글자를 빨간색으로 설정 */
}

p {
  color: rgba(255, 0, 0, 0.5);
}

opacity

요소 전체의 투명도를 조절

0 ~ 1 값 사용

.box {
  background-color: black;
  opacity: 0.5;
}

opacity를 사용하면 요소 전체가 투명해지므로, 배경만 투명하게 하려면 rgba()를 사용해야 함!
.box {
  background-color: rgba(0, 0, 0, 0.5); /* 배경만 투명 */
}

색상 값

CSS에서는 다양한 방식으로 색상을 표현할 수 있어.

색상 이름 (Color Keywords)

CSS는 기본적으로 140개 이상의 색상 이름을 제공해. red, blue, green, yellow 같은 이름을 사용하면 쉽게 색상을 지정할 수 있어.

기본 색상: red, blue, green, yellow, black, white
밝은 색상: lightblue, lightgreen, lightgray
어두운 색상: darkblue, darkred, darkgray
투명한 색상: transparent

h1 {
  color: red;   /* 빨간색 */
}
p {
  color: lightblue;  /* 연한 파란색 */
}

HEX 코드 (#RRGGBB)

HEX 코드(16진수)는 빨강(R), 초록(G), 파랑(B) 값을 조합하여 색상을 표현하는 방식이야. #RRGGBB 형식으로 사용되며, 각 값은 00(0%) ~ FF(100%) 사이의 숫자로 표현돼.

h1 {
  color: #ff0000; /* 빨강 */
}
p {
  color: #00ff00; /* 초록 */
}
span {
  color: #0000ff; /* 파랑 */
}

세 자리 HEX 값은 자동으로 확장됨! (#F00 = #FF0000)

h1 {
  color: #f00; /* 빨강 */
}

RGB (rgb(R, G, B))

RGB는 빨강(R), 초록(G), 파랑(B) 값을 0~255 범위의 숫자로 지정하는 방식이야. 16진수를 이해하기 어려울 때 더 직관적으로 사용할 수 있어!

h1 {
  color: rgb(255, 0, 0); /* 빨강 */
}
p {
  color: rgb(0, 255, 0); /* 초록 */
}
span {
  color: rgb(0, 0, 255); /* 파랑 */
}

RGBA (rgba(R, G, B, A))

RGBA는 RGB 색상에 투명도(A: Alpha) 값을 추가한 형식이야. A 값은 0(완전 투명) ~ 1(완전 불투명) 사이의 숫자로 설정돼.

h1 {
  color: rgba(255, 0, 0, 0.5); /* 반투명 빨강 */
}
p {
  color: rgba(0, 255, 0, 0.3); /* 더 투명한 초록 */
}
span {
  color: rgba(0, 0, 255, 0.8); /* 조금만 투명한 파랑 */
}

HSL (hsl(H, S, L))

HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness) 를 기준으로 색상을 지정하는 방식이야. 직관적으로 색상을 조절할 수 있는 장점이 있어!

H (색상) : 0~360 (빨강: 0, 초록: 120, 파랑: 240)
S (채도) : 0% (회색) ~ 100% (선명한 색)
L (밝기) : 0% (검정) ~ 100% (흰색)

h1 {
  color: hsl(0, 100%, 50%); /* 빨강 */
}
p {
  color: hsl(120, 100%, 50%); /* 초록 */
}
span {
  color: hsl(240, 100%, 50%); /* 파랑 */
}

HSLA (hsla(H, S, L, A))

HSLA는 HSL 색상에 투명도(A: Alpha) 값을 추가한 방식이야. RGBA와 동일하게 투명도를 0(완전 투명) ~ 1(완전 불투명) 범위로 조절 가능!

h1 {
  color: hsla(0, 100%, 50%, 0.5); /* 반투명 빨강 */
}
p {
  color: hsla(120, 100%, 50%, 0.3); /* 더 투명한 초록 */
}
span {
  color: hsla(240, 100%, 50%, 0.8); /* 조금만 투명한 파랑 */
}

5.9 KiB Raw Blame History