CSS — Background

Background를 다양하게 활용하는 방법에 대해서 알아보자.

큰 그림을 그려보자.

1. 배경화면에는 하나의 색이 올 수 있다.
2. 배경화면에는 색 대신에 그림을 배치할 수 있다.
3. 배경화면에서는 여러 색의 조합을 배치할 수 있다.

rgba vs color

1. 색상 이름

• blue, red, green, 등

background: red;

2. 숫자 색상 값 (rgb) — Color Picker를 활용하면 쉽게 사용가능

• rgb는 red, green, blue의 약자
• 16진수 형태로 표현이 가능
• rgba(255, 0 ,0) = #f00000

background: rgba(0, 128, 0, 0.3) 
/* Green background with 30% opacity */

3. 숫자 색상 값 + 투명도(rgba)

rgba(red, green, blue, alpha(투명도))

• alpha 0.0(완전 투명) ~ 1.0(완전 불투명)

4. HSL, HSLA 이 두개는 관심 있으면 찾아보세요

Hue (색조), Saturation (채도), Lightness (명도)

HTML Color Codes - What's your color

background-image

background-image: url("...");

By default (기본값)으로 background-image는 수직&수평으로 이미지를 반복해서 나열한다.

background-repeat: no-repeat;
background-repeat: repeat-x; // 수평으로만
background-repeat: repeat-y; // 수직으로만

background-position

background-position 속성은 반복되지 않는 배경 이미지의 상대 위치를 설정하는데 사용한다. (단, width or height을 명확히 명시하지 않을 경우 혹은 background-size를 명시한 경우 예측과 다르게 동작할 수 있다.)

background-position: 가로위치 세로위치
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

background-attachment

background-image를 이용했을때 배경의 사진이 마우스 스크롤 발생시 position: fixed 처럼 정의 한 위치에 고정할지 아니면 마지 한 페이지 처럼 다음 페이지에서는 보이지 않게 할지 결정하는데 사용하는 프로퍼티다.

background-attachment: scroll || fixed

background-shorthand

background: color url repeat attachment position;
background: #ffffff url("img_tree.png") no-repeat right top;

background-origin

background-origin은 배경이 적용되는 박스의 어느 부분을 기준으로 적용할지 정의하는데 사용한다.

background-size

background의 크기를 정의하는데 사용한다.

auto: 기본값이다
cover: 이미지가 깨질지라도 배경화면이 적용되는 박사의 크기를 맞춰 채운다.
contain: 이미지가 깨지지 않는 수준에서 최대한의 크기로 맞춘다.

background-size: auto;
background-size: cover;
background-size: contain;
// x축 100% y축 100%
background-size: 100% 100%;
// x축 75% y축 50%
background-size: 75% 50%;

Practice

CSS background-size property

linear-gradient (선형 그레디언트)

• gradient — 기울어짐의 정도 혹은 변화 비율

CSS에서 gradient는 한 방향에서 다른 방향으로 색이 점차 흐려지거나, 색이 변화하는 효과를 줄 때 사용하는 속성이다.

색이 점차 흐려지거나 변화한다는 말은 적어도 기준점이 되는 색이 두개는 존재해야함을 의미한다.

• 왼쪽 → 오른쪽 (to right)
• 오른쪽 → 왼쪽 (to top right)
• 아래 → 왼쪽(to bottom left)
• odeg 아래 → 위
• 45deg 하단 왼쪽 → 상단 오른쪽 (45도)
• 90deg 왼쪽 → 오른쪽
• 180deg 상단 → 하단

background: linear-gradient(to right, color, color)
background: linear-gradient(180deg, color, color)

CSS Gradient - Generator, Maker, and Background

box-shadow

박스에 그림자 효과를 만들어주는 프로퍼티

box-shadow: x축, y축, 흐림도, 확장도, 색, 그림자 기준
- inset: 그림자 요소를 안쪽에
- initial: 기본값
- inherit: 부모 요소의 속성값을 상속

Box Shadow CSS Generator