CSS - Background와 Transition

Background와 Transition

 

 

Background

- HTML 요소에 이미지나 색상 등을 넣는 속성으로 배경화면을 만드는데 주로 사용한다

 

background-color

 

- background-color는 요소의 배경 색상을 설정하는 속성이다.

- 색상은 일반적으로 색 이름, RGB, HEX 코드 등으로 지정할 수 있다.

 

 

background-image

 

- background-image는 요소의 배경으로 이미지를 설정하는 속성이다.

- 이미지 경로를 URL로 지정하여 사용한다.

 

 

 

background-position

 

- background-position은 배경 이미지가 요소 내에서 어디에 위치할지 설정하는 속성이다.

- 값은 left, center, right 또는 top, center, bottom 등의 키워드로 지정할 수 있다.

 

 

 

background-repeat

 

- background-repeat은 배경 이미지가 반복될지 여부를 설정하는 속성이다.

- repeat, no-repeat, repeat-x, repeat-y 값을 사용하여 이미지가 반복되도록 설정할 수 있다.

 

 

 

background- attachment

 

- background-attachment는 배경 이미지가 스크롤할 때 어떻게 동작할지를 설정하는 속성이다.

- scroll, fixed, local 값을 사용할 수 있다.

 

 

 

background-size

 

- background-size는 배경 이미지의 크기를 설정하는 속성이다.

- cover, contain 등을 사용할 수 있으며, 직접 크기를 설정할 수도 있다.

 

 

 .background-example {
      width: 300px;
      height: 200px;
      background-color: lightblue; /* 배경색 */
      background-image: url('https://via.placeholder.com/150'); /* 배경 이미지 */
      background-position: center; /* 이미지 위치 설정 */
      background-repeat: no-repeat; /* 이미지 반복 안함 */
      background-attachment: fixed; /* 스크롤 시 이미지 고정 */
      background-size: cover; /* 배경 이미지 크기를 영역에 맞게 커버 */
      border: 3px solid red; /* 경계선 추가 */
      text-align: center;
      line-height: 200px;
      color: white;
}

 

 

 

opacity

 

- opacity는 요소의 투명도를 설정하는 속성이다.

- 0부터 1 사이의 값을 가지며, 0은 완전 투명, 1은 불투명이다.

 

 

원래는 빨간색이다!

 

.opacity-example {
      width: 300px;
      height: 200px;
      background-color: red;
      opacity: 0.5; /* 50% 투명 */
      border: 3px solid black; /* 경계선 추가 */
      text-align: center;
      line-height: 200px;
      color: white;
}

 

Transitions

 

transition-property

 

transition-property는 애니메이션을 적용할 CSS 속성을 지정하는 속성이다.

여러 개의 속성을 동시에 설정할 수 있다.

 

 

 

transition-duration

 

transition-duration은 애니메이션이 완료되는 데 걸리는 시간을 설정하는 속성이다.

시간 단위는 s(초) 또는 ms(밀리초)로 지정한다.

 

 

transition-timing-function

 

transition-timing-function은 애니메이션의 진행 방식을 설정하는 속성이다.

linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier() 함수 등을 사용할 수 있다.

 

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• cubic-bezier(n,n,n,n)

 

transition-delay

 

transition-delay는 애니메이션 시작 전 대기하는 시간을 설정하는 속성이다.

시간 단위는 s(초) 또는 ms(밀리초)로 지정한다.

 

 

 

 

.transition-example {
  width: 200px;
  height: 200px;
  background-color: orange;
  transition: all 1s ease-in-out; /* 모든 속성에 대해 1초 동안 ease-in-out 타이밍 함수로 전환 */
  text-align: center;
  line-height: 200px;
  color: white;
}

.transition-example:hover {
  background-color: green; /* hover 시 배경색 변경 */
  transform: rotate(45deg); /* hover 시 회전 */
}

 

Transform

- 요소를 회전하거나 크기 조정, 이동을 시키는 속성이다

 

translate()

 

- translate()는 요소를 지정된 거리만큼 평행 이동시킨다

- translateX()와 translateY()로 각각 X축, Y축 이동도 가능하다

 

- 평행 이동 변환으로 입력한 값 만큼 요소의 좌표를 변환한다

 

 

rotate()

- 요소를 입력 한 값 만큼 회전시킨다

- 단위는 deg

 

scale()

- scale()은 요소의 크기를 비율로 조정한다

- scaleX()와 scaleY()로 각각 X축, Y축 비율을 독립적으로 조정할 수 있다

 

skew(), skewX(), skewY() 

- 요소를 기울여준다 (x축과 y축)

- 단위는 deg

.transform-example {
      width: 200px;
      height: 200px;
      background-color: purple;
      transform: rotate(45deg) scale(1.5) translate(50px, 50px); /* 회전, 크기 조정, 평행 이동 */
      text-align: center;
      line-height: 200px;
      color: white;
      border: 3px solid yellow;
    }