[Front-end🦁] #7 CSS flex, grid / animation 맛보기

1. flex, grid

#6-2 에 이어서 정리했다.

2. 웹 개발 프로젝트

2-1. animation을 이용한 룰렛 구현

가운데 영역이 돌아가는 효과가 나는 코드이다. 코드를 똑같이 가져가서 8개(li 요소 9개)로도 만들어보았다.

소스코드(4개), 소스코드(8개)

애니메이션을 위한 주요 코드만 정리했다.

@keyframe ani {
    0% { transform: translateY(0px); }
    25% { transform: translateY(-20%); }
    50% { transform: translateY(-40%); }
    75% { transform: translateY(-60%); }
    100% { transform: translateY(-80%); }
}
.aespa {
    margin: 100px;
    font-size: 50px;
    text-align: center;
    color: cornflowerblue;
}
.aespa-member { 
/* list의 처음과 끝을 동일한 요소를 넣어주면 끊기는 것을 피할 수 있다. */
    position: relative;
    height: 100px;
    overflow: hidden;
}
.aespa-member-list { animation: ani 3s infinite; }

<div class="aespa">
    aespa
    <div class="aespa-member">
        <ul class="aespa-member-list">
            <li>Karina</li>
            <li>Giselle</li>
            <li>Winter</li>
            <li>Ningning</li>
            <li>Karina</li>
        </ul>
    </div>
    <h2 class="song-title">Savage</h2>
</div>

+ 나중에 js를 이용해서 두 값의 경계선에 있다면 어떤 값으로 인식할지에 대한 내용을 추가할 수 있다.

2-2. Jungle Cinema 구현

#8 에 한꺼번에 정리!

3. 느낀점

• 애니메이션 overflow가 overflow를 준 요소를 넘어서는 자식 요소를 가려주는 효과가 있다는 것을 알 수 있었다. float 속성을 위해서만 사용하는 것이 아니었다.

• 2-1 애니메이션을 구현할 때 애니메이션 관련 방법이 아니라 첫번째 요소를 마지막에 추가하는 착시 현상으로 해결할 수 있다는게 인상적이었다. SwiftUI 강의에서 들었던 애니메이션은 결국 모양의 연속이라는 말이 생각났다.

• 지금까지 일주일간의 과제는 눈에 보이는 만큼만 구획 나누고 ul li 이런식으로 (연습이라 다시 안쓸거라고 생각해서이긴 하지만) 전체 태그로 썼었는데, 연습 때 못한건 실전에서도 못한다는 생각으로 앞으로는 웹 접근성과 class 주기, 이름 규칙도 생각해봐야할 것 같다.

• ^= ~= *= + ~ 이 문법들이 자주 쓰인다는 점이 놀랍다. +의 경우 li가 5개 있는데 li+ li 이런식으로 잡으면 뒤의 4개가 전부 선택된다는 점이!!!! 생각해보면 맞는건데 지금까지 생각해 볼 일이 없었다.