[프론트엔드 입문] 10-CSS Transforms & CSS Style Images

일자 : 24-2 11주차 (2)

1. CSS Transforms

[1] 변환(transform)

: 텍스트나 이미지를 회전, 확대 다양한 기하학적인 모양으로 출력

• 회전 각도의 단위는 deg이며 시계방향의 회전

1) 종류

• rotate
• skew
• translateY / translateX
• scale

[2] transform에 사용 가능한 2차원 변환 함수

2. CSS Style Images

[1] CSS Style Images, Image Filters

1) 특징

• CSS 필터는 이미지나 HTML 요소에 시각적 효과를 적용할 수 있는 속성이다.
• Internet Explorer(IE)에서는 필터 기능이 지원되지 않는다. 최신 브라우저(예: Chrome, Firefox, Edge, Safari)에서만 사용 가능하다.

2) 종류

CSS 필터는 다양한 효과를 제공하며, 각 효과는 숫자나 단위로 값을 설정하여 조정 가능하다.

1. blur()

   • 이미지를 흐리게 만드는 효과를 준다.
   • 매개변수: px 단위의 값 (예: blur(5px)).
   • 값이 클수록 더 흐릿해진다.

2. brightness()

   • 이미지의 밝기를 조정한다.
   • 매개변수: 백분율 또는 소수점 값 (예: brightness(1.5) → 150% 밝기).
   • 기본값은 1, 값이 작으면 어두워지고 크면 밝아진다.

3. contrast()

   • 이미지의 대비를 조정한다.
   • 매개변수: 백분율 또는 소수점 값 (예: contrast(2) → 대비가 200%).
   • 값이 낮으면 대비가 감소하여 흐릿한 효과가 생긴다.

4. grayscale()

   • 이미지를 흑백으로 변환한다.
   • 매개변수: 0~1 사이의 값 (예: grayscale(1) → 완전 흑백).
   • 기본값은 0, 값이 1이면 완전히 흑백.

5. hue-rotate()

   • 이미지의 색상을 회전(변환)시킨다.
   • 매개변수: deg 단위로 색상 이동 (예: hue-rotate(90deg)).
   • 360도를 기준으로 색상이 원형으로 회전한다.

6. invert()

   • 이미지의 색상을 반전시킨다.
   • 매개변수: 0~1 사이의 값 (예: invert(1) → 완전 반전).
   • 기본값은 0, 값이 1이면 완전히 반전.

7. opacity()

   • 요소의 투명도를 설정한다.
   • 매개변수: 0~1 사이의 값 (예: opacity(0.5) → 50% 투명).
   • 값이 0이면 완전 투명, 1이면 불투명.

8. saturate()

   • 이미지의 채도를 조정한다.
   • 매개변수: 백분율 또는 소수점 값 (예: saturate(2) → 채도가 200%).
   • 값이 0이면 흑백, 값이 클수록 색상이 더 강렬해진다.

9. sepia()

   • 이미지에 세피아(갈색 톤) 효과를 준다.
   • 매개변수: 0~1 사이의 값 (예: sepia(1) → 완전한 세피아 효과).
   • 기본값은 0, 값이 1이면 완전 세피아.

10. drop-shadow()

    • 이미지나 요소에 그림자를 추가한다.
    • 매개변수: drop-shadow(offset-x, offset-y, blur-radius, color) 형식 (예: drop-shadow(10px 10px 5px gray)).
    • 그림자의 위치, 흐림 정도, 색상을 조정할 수 있다.

[2] 활용 예시

img {
  filter: brightness(1.2) contrast(1.5) blur(2px);
}

• 이미지를 더 밝고, 대비를 높이며, 약간 흐릿하게 처리한다.

img:hover {
  filter: grayscale(1) sepia(0.5);
}

• 마우스를 이미지 위에 올리면 흑백과 세피아 효과가 적용된다.