[Web] CSS 태그(5) - flex / animation / transition / transform

 

---

 

1. flex

 

flex는 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. 여기서 flex container와 flex item가 있는데 container란 flex의 영향을 받는 전체 공간을 의미하고 item은 설정된 속성에 따라 어떠한 형태로 배치되는 것을 말합니다.

    <div class="container">
        <div class="item">box1</div>
        <div class="item">box2</div>
        <div class="item">box3</div>
        <div class="item">box4</div>
        <div class="item">box5</div>
        <div class="item">box6</div>
    </div>

이렇게 요소들이 있을 때, 아직 컨테이너가 만들어지지 않았기 때문에 요소들은 위에서 아래로 배치되어 있기만 합니다. 하지만 컨테이너클래스의 display를 flex로 지정하면 아이템들은 하나의 컨테이너로 묶여 설정된 속성에 따라 묶이게 됩니다.

        .container{
            display: flex;
        }

이때 flex-direction 속성으로 아이템들이 배치되는 축의 방향을 결정하고 flex-wrap속성으로 아이템들의 줄 바꿈을 결정합니다.

 

※ flex-direction 속성 값

속성 이름	설명
row	가로 방향 배치, 기본값
row-reverse	가로 역순 배치
column	세로 배치
column-reverse	세로 역순 배치

 

※ flex-wrap 속성 값

속성 이름	설명
nowrap	줄바꿈X , 기본값
wrap	줄바꿈O
wrap-reverse	줄바꿈O, 역순 배치

 

justify-content를 이용해 메인축의 아이템 정렬을 지정하고 align-item을 이용해 수직축 방향 아이템 정렬을 지정합니다.

 

※ justify-content 속성 값

속성 이름	설명
flex-start	시작점 정렬, 기본값
flex-end	끝점 정렬
center	가운데 정렬
space-between	아이템 사이 균일한 여백
space-evenly	아이템 사이와 양 끝 균일한 여백
space-around	아이템 둘레 균일한 여백

 

---

 

2. 애니메이션(animation)

 

애니메이션(animation)은 요소에 적용되는 스타일을 다른 스타일로 부드럽게 전환시켜 주는 속성입니다.

속성 이름	설명
animation-delay	이벤트 발생 후 몇 초 후에 재생할지 지정
animation-direction	애니메이션 진행 방향을 설정
animation-duration	애니메이션을 몇 초 동안 재생할지 지정
animation-iteration-count	애니메이션 반복 횟수를 지정
animation-name	애니메이션 이름을 지정
animation-play-state	애니메이션 재생 상태를 지정
animation-timing-function	수치 변형 함수를 지정
animation-fill-mode	애니메이션/끝 상태를 제어

animation-iteration-count은 반복 횟수를 지정하는데 값을 infinite로 설정할 경우 무한반복하게 됩니다.

animation-direction은 진행 방향을 설정합니다.

normal로 설정하면 매 사이클마다 정방향으로 재생하며 순환할 때마다 시작 상태로 재설정됩니다.

reverse는 매 사이클마다 역방향으로 재생하며 순환할 때마다 종료 상태로 재설정됩니다.

alternate는 매 사이클마다 각 주기의 방향을 뒤집으며 첫 번째 반복은 정방향으로 진행합니다. alternate-reversesms 첫 번째 반복은 역방향으로 진행합니다.

애니메이션의 움직임을 제어하기 위해서는 @keyframes을 사용합니다.

        @keyframes 애니메이션이름 {
            from {

            }
            to {
            
            }
        }

from에서는 애니메이션 시작 시점의 상태를 설정하고 to에서는 애니메이션의 도착 시점의 상태를 설정합니다.

 

---

 

3. 트랜지션(transition)

 

트랜지션(transition)은 요소에 적용되는 속성 값이 변화할 때, 일정 시간에 걸쳐 일어나도록 하는 것입니다.

속성 이름	설명
transition-delay	이벤트 발생 후 몇 초 후에 재생할지 지정
transition-direction	몇 초 동안 재생할지 지정
transition-property	어떤 속성을 변형할지 지정
transition-timing-function	수치 변형 함수를 지정

트랜지션의 적용방식은 두 가지로 나뉩니다. 첫 번째는 요소에 직접 적용하는 방식입니다.

        .box{
            width: 200px;
            height: 200px;
            background-color: #ffbd99;
            background-image: url(https://item.kakaocdn.net/do/49a292677e5b578a8985bb315c19700c9f5287469802eca457586a25a096fd31);
            background-size: cover;

            transition-duration: 2s;            
            transition-property: background-image;
        }

hover를 통해 속성값에 변화를 준다고 가정하고, 이렇게 요소에 직접 트랜지션 속성을 주게 되면 마우스를 올릴 때와 내릴 때 모두 트랜지션이 적용되게 됩니다.

두 번째 방법으로 요소가 아닌 이벤트에 적용하게 되면 요소에 직접 적용할 때와는 다르게 마우스를 올릴 때만 트랜지션이 적용되고 마우스를 내릴 때는 적용되지 않습니다.

        .box:hover{
            background-image: url(./img/KakaoTalk_20230724_210719035.jpg);            
            border-radius: 40%;

            transition-duration: 2s;
        }

 

---

 

4. 트랜스폼(transform)

 

트랜스폼(transform)은 요소에 회전, 크기 조절, 기울이기, 이동 효과 등 변형을 주는 것입니다.

속성 이름	설명
translate	요소의 위치를 이동
scale	요소의 크기를 확대 또는 축소
rotate	요소를 회전
skew	요소를 기울임

위의 속성들은 X축과 Y축을 가지고 있기 때문에 속성명뒤에 X, Y를 붙여 각각 주어진 만큼 변형을 줄 수 있습니다. 아래와 같이 축 이름을 적지 않고 한 번에 값을 줄 수도 있습니다.

 

transform: translateX(x)
transform: translateY(y)
transform: translate(x,y)