CSS) Animation / 이미지 크기 조정 / object-fit 속성 정리

Front/CSS

CSS) Animation / 이미지 크기 조정 / object-fit 속성 정리

pogun 2025. 2. 23. 01:58

1. CSS Animation 속성이란?

: CSS animation 속성을 활용하면 HTML 요소에 다양한 애니메이션 효과를 적용할 수 있다.

: 이번 글에서는 @keyframes를 사용한 색상 변경 및 위치 이동 애니메이션을 예제로 작성했습니다.

1-1. 색상이 바뀌는 애니메이션

: @keyframes를 이용하여 요소의 배경색이 변경되는 애니메이션을 만들 수 있다.

.box1 {
    animation-name: ani1;
    animation-duration: 1s;
}

@keyframes ani1 {
    from { background: red; }
    to { background: blue; }
}

설명:

: animation-name: ani1; → 적용할 애니메이션 이름을 ani1로 지정

: animation-duration: 1s; → 애니메이션이 1초 동안 실행됨

: @keyframes ani1 → from과 to를 사용하여 애니메이션의 시작과 끝 상태를 정의

- from { background: red; } → 시작 시 배경색이 빨간색

- to { background: blue; } → 종료 시 배경색이 파란색

1-2. 위치가 바뀌는 애니메이션

: 요소의 위치를 변경하는 애니메이션

.box2 {
    animation-name: ani1;
    animation-duration: 1s;
    animation-iteration-count: infinite; /* 무한 반복 */
    animation-delay: 1s;  /* 애니메이션 시작 전 대기 시간 */
    animation-direction: reverse; /* 역방향 진행 */
    animation-timing-function: ease-out; /* 애니메이션 속도 변화 */
    animation-fill-mode: none; /* 애니메이션이 끝난 후 상태 */
}

@keyframes ani1 {
    0% { background: red; top: 0; left: 0; }
    25% { background: yellow; top: 0; left: 100px; }
    50% { background: blue; top: 100px; left: 100px; }
    75% { background: green; top: 100px; left: 0; }
    100% { background: red; top: 0; left: 0; }
}

설명:

: animation-iteration-count: infinite; → 애니메이션을 무한 반복

: animation-delay: 1s; → 1초 후 애니메이션 시작

: animation-direction: reverse; → 애니메이션을 역방향으로 진행

- alternate: 정방향 → 역방향 반복

- alternate-reverse: 역방향 → 정방향 반복

: animation-timing-function: ease-out; → 애니메이션 속도 조절

- ease: 천천히 시작 → 빠르게 진행 → 천천히 끝남

- linear: 일정한 속도로 진행

- ease-in: 천천히 시작 후 빠르게 진행

- ease-out: 빠르게 시작 후 천천히 끝남

- ease-in-out: 천천히 시작 → 빠르게 진행 → 천천히 끝남

: animation-fill-mode: none; → 애니메이션이 끝난 후 원래 상태로 돌아감

- forwards: 애니메이션이 끝난 상태 유지

- backwards: 애니메이션이 시작하기 전 상태 유지

- both: 시작 전과 끝난 후 모두 상태 유지 (유용함)

@keyframes ani1 애니메이션 설명

1. 0% (시작) → background: red; (배경색 빨강), top: 0; left: 0; (좌표 원점)

2. 25% → background: yellow; (배경색 노랑), left: 100px; (오른쪽으로 이동)

3. 50% → background: blue; (배경색 파랑), top: 100px; left: 100px; (아래로 이동)

4. 75% → background: green; (배경색 초록), top: 100px; left: 0; (왼쪽으로 이동)

5. 100% (종료) → 다시 0% 위치로 복귀 (배경색 빨강, 원래 위치)

애니메이션 흐름

: 상단 왼쪽 → 상단 오른쪽 → 하단 오른쪽 → 하단 왼쪽 → 원래 자리로 복귀

: 결과적으로 정사각형을 그리면서 이동

2. 이미지 크기 조정

: 애니메이션 외에도 이미지의 크기를 조정하는 스타일

img { width: 100%; } /* 부모 요소의 너비를 꽉 채움 */
img { max-width: 100%; } /* 이미지가 원래 크기보다 커지지 않도록 설정 */
a { color: inherit; } /* 부모 요소의 글자색을 상속 */

설명:

: width: 100%; → 부모 요소의 크기에 맞춰 이미지 크기 조정

: max-width: 100%; → 이미지가 원래 크기보다 커지지 않도록 제한

: color: inherit; → 링크의 색상을 부모 요소에서 상속받도록 설정

3. CSS object-fit이란?

: object-fit 속성은 이미지나 비디오가 부모 요소(컨테이너) 안에서 어떤 방식으로 맞춰질지를 결정하는 것

: 이미지의 원래 비율을 유지하면서 크기를 조정할 수 있다.

3-1. object-fit 속성 값 비교

: fill (기본값)

- 이미지를 부모 요소 크기에 맞게 늘리거나 줄여서 채움

- 이미지 비율이 깨질 수도 있음

: contain

- 이미지의 비율을 유지하면서 컨테이너 안에 맞춰 조정

- 컨테이너보다 작은 경우 남는 공간이 생길 수 있음

- 이미지 전체를 볼 수 있도록 조정됨

: cover (가장 선호하는 방법)

- 이미지 비율을 유지하면서 컨테이너를 완전히 덮도록 조정

- 컨테이너보다 이미지가 크면 일부가 잘릴 수도 있음

- 배경 이미지를 꽉 채울 때 유용

: none

- 이미지의 원래 크기를 유지하고, 축소 또는 확대하지 않음

- 컨테이너보다 이미지가 크면 넘칠 수 있음

: scale-down

- none 또는 contain 중 더 작은 크기를 유지하는 방식으로 적용

3-2. object-position 속성

: object-position 속성을 사용하면 이미지를 어떤 위치를 기준으로 표시할지 조정할 수 있다.

: 기본값은 center이며, left, right, top, bottom 등으로 조정 가능

: object-position: 20px 30px;처럼 px 값을 사용하여 세밀하게 조정 가능

img {
    object-position: left; /* 왼쪽 정렬 */
}

3-3. 예제코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>object-fit</title>
<style>
    div {
        width: 200px; height: 200px;
        border: 3px solid;
        background: #fc6;
        margin-bottom: 50px;
    }
    img {
        max-width: 100%;
        width: 200px;
        height: 200px;
        object-position: left; /* 원하는 위치를 보기 위해 조정 */
        object-fit: contain; /* 이미지 비율을 유지하며 박스 안에 맞춤 */
    }
</style>
</head>
<body>
    <div>
        <img src="./가져올_사진.jpg" alt="사진을 불러올 수 없습니다.">
    </div>
    <div>
        <img src="./가져올_사진.jpg" alt="사진을 불러올 수 없습니다.">
    </div>
</body>
</html>

CSS object-fit 마무리

: object-fit을 사용하면 이미지가 박스 안에서 적절하게 크기 조정되도록 설정할 수 있다.

: contain, cover, none 등의 값을 적절히 활용하면 반응형 웹에서도 유용하게 적용할 수 있다.

: object-position을 함께 사용하면 이미지의 위치를 더욱 세밀하게 조정할 수 있다.

'Front > CSS' 카테고리의 다른 글

CSS) Transform 속성 정리 : 다양한 변형 (0)	2025.02.23
CSS) transition 속성 : 애니메이션 만들기 (0)	2025.02.22
CSS) 속성관련 선택자 사용 방법 (0)	2025.02.20
CSS) 많이 쓰이는 주요 스타일 속성 정리 (0)	2025.02.19
CSS) 그룹 선택자 / 가상 클래스 선택자 / 수열 선택자 정리 (0)	2025.02.18

현재글CSS) Animation / 이미지 크기 조정 / object-fit 속성 정리

pogun 코딩 공부 저장소