[멋사🦁] 2주차(수) 특강, 카드 플립 애니메이션, preserve-3d 이해

쟈몽·2021년 11월 10일

개발뉴비(21/10/23~)

목록 보기

15/20

멋쟁이 사자처럼🦁 프론트엔드 스쿨 1기 2주차(수) 회고 - November 10, 2021.

[ 회고 ]

수업 후 독일에서 근무하시는 이수진 개발자님의 특강을 듣고 배움에는 끝이 없다는 생각과, 그럼에도 나 또한 이 길이 적성에 맞다고 생각하기 때문에 열정이 더 생기는 것을 느꼈다. 비전공자로 시작하셨기 때문에 중간중간 '처음의 힘듦'을 말씀하실 때 더 이입이 됐던 것 같다.

지금은 이미 경지에 오르신 상태라 내가 알아듣는 내용보다 못 알아듣는 내용이 훨씬 많았지만😂 오늘 특강 내용 메모한 거 잘 정리해뒀다가 필요한 순간에 적극 활용할 것이다. 그리고 영어와 친숙해져야겠다고 느꼈다. 유익한 시간이었다 😊

여러모로 아침부터 생각이 많았던 날이다. 내가 너무 부족하고 배울 내용은 또 너무 많이 남아있다는 생각에 압박감을 느껴와서, 계속 잠을 줄여가면서 공부하니까 몸이 많이 지치는 것을 느꼈다.

평일 주말 구분할 것 없이 지금까지 너무 달려와서 오늘은 조금 쉬어가는 날로 정했다 😥 배운 내용 빠르게 복습하고 평소보다 일찍 잘 것이다. 컨디션 관리도 실력이니까 💪!!

장기전이다. 50미터 달리기처럼 달리지 말자.

(+) ㅜㅜ 하다보니 또 늦어졌어........

[ 공부 ]

[ 강의요약 ]

컨벤션 살펴보기

회사 컨벤션들을 살펴보았고, 클래스 네이밍 방법을 배웠다.
컨벤션의 주 목적은 업무 효율을 높이고 유지보수 투자 비용을 최소화하는 것이다.
유지보수를 위해 z-index를 10단위로 조정하는 방법은 여러 기업에서 많이 쓰인다. 추가 및 예외사항 발생 시 1단위로 더 세밀히 조절할 수 있기 때문.
시작주석, 종료주석을 달아주는 것도 좋은 방법
 , 
지원할 회사의 컨벤션을 (공개되어 있다면) 미리 보고 가는 것이 좋다.
HTML/CSS 클래스 네이밍을 '형태-의미' 형식의 Kebab case로 쓰게되면 형태만 혹은 의미만 선택해 변경하기 용이하다.
BEM 방법론으로 클래스 작명하는 회사는 그렇게 많지 않다.
특히 대기업에서는 CSS 난독화를 통해 크롤링을 방어하고자 한다.
크롤링: 웹에 있는 정보를 내 컴퓨터(서버)로 가져오는 것. 서버에 부하를 주게 되기 때문에 차단 당한다. 규모가 큰 회사에서는 API 서버를 따로 만든다.

`button` 만들기

천하제일 버튼 경진대회

거창한 이름이 붙었다 🤣 오늘도 느끼지만 잘하는 분들은 버튼으로 작품을 내놨다. 대단해... 나는 배운 내용을 응용해봤다.

`animation` - card flip 🌟

어제 구현해봤던 카드 플립을 오늘은 animation으로 만들어보면서 보충 설명을 들었다. 다시 복습하면서 속성 하나하나를 주석처리 해보니 이제 이해가 좀 되는 것 같았다 💡 나는 글로 써야 머릿속에 딱 정리가 잘되기 때문에 공부하려고 핵심만 풀어 써봤다.

1. 컨테이너 안에 회전 패널이 있고, 그 속에 카드 앞면 아이템과 카드 뒷면 아이템이 있다.

    <div class="컨테이너">
        <div class="회전패널">
            <div class="카드앞">앞면</div>
            <div class="카드뒤">뒷면</div>
        </div>
    </div>

(두 카드가 구분되게 색깔을 줬다.)

        .카드앞 {
            background-color: #fc9090;
        }
        .카드뒤 {
            background-color: #fddc8a;
        }

2. 컨테이너와, 회전패널을 포함한 카드들의 크기는 모두 같아야 한다. 컨테이너에 일정 크기(카드 크기가 될 값)를 지정해준 뒤, 나머지 아이템들에 모두 width: 100%;, height: 100%값을 준다.
        .컨테이너 {
            width: 170px;
            height: 240px;
        }
        .회전패널, .카드앞, .카드뒤 {
            width: 100%;
            height: 100%;
        }
물론 카드앞, 카드뒤에 이미지를 삽입했다면, 이미지에도 똑같이 width, height 값을 100%로 맞춰줘야 한다.

3. 이제 카드앞, 뒤를 붙여주기 위해 카드 뒷면을 뒤집힌 상태로 만들어 준다.
        .카드뒤 {
            background-color: #fddc8a;
            transform: rotateY(180deg);
        }

4. 카드 앞, 뒤면을 함께 겹쳐진 상태로 만들기 위해, 카드 앞면을 position: absolute; 선언으로 절대위치화 시켜야 한다.
그런데 absolute는 static이 아닌 부모 위치를 참고하므로, 부모 컨테이너에 position: relative;를 주어야 한다. 이렇게 안하면 <body>를 참고할 것이다.
        .컨테이너 {
            width: 170px;
            height: 240px;
            position: relative;
        }
        .카드앞 {
            background-color: #fc9090;
            position: absolute;
        }

5. 카드가 컨테이너의 평면을 뚫고 회전해야 하므로 회전 패널에 transform-style: preserve-3d; 선언을 해야한다.
        .회전패널 {
            transform-style: preserve-3d;
        }

`preserve-3d` 이해하기 😶❗

preserve-3d 개념을 정확히 알기 위해 MDN 문서를 참고해보았다.
(https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style)

transform-style은 부모 컨테이너가 아닌 자식 요소에 지정해주는 것이다.
transform-style: flat;
자식 요소가 부모의 평면 위에서만 transform될 지,
transform-style: preserve-3d;
부모 평면상이 아닌 자식 요소만의 3D 공간에서 (preserve는 보존한다는 뜻) transform될 지를 정해주는 속성이다.
(MDN 예시를 보면 이해하기 쉽다. 부모 평면을 뚫고 지나간다)
이 속성은 inherit(상속)되지 않기 때문에, 3D 효과가 필요한 모든 'non-leaf descendents' 요소에 선언이 필요하다.
(이 부분은 해석이 잘 안돼서 검색해보니 leaf가 자식이 없는 노드들을 지칭한다고 한다. 따라서 여기서는 non-leaf니까, 컨테이너 속에서 자손을 가지는 그릇 역할(CSS diner 접시처럼) 아이템들에는 모두 transform-style: preserve-3d; 선언을 해줘야 한다는 뜻으로 보인다.)
그래서 이번 카드 플립 예시에서는 .회전패널에 해당 선언을 한 것이다.

6. 우리는 .카드앞과 .카드뒤가 하나의 카드가 되기를 원한다. (단순히 겹쳐진 상태 말고) 그러므로 .카드앞의 본래 뒷면 (rotateY(180deg)했을 때 모습)과 .카드뒤의 본래 앞면 (rotateY(0deg)했을 때 모습)은 보이지 않아야 할 것이다.
backface-visibility: hidden; 선언을 각각 해주자.
        .카드앞 {
            background-color: #fc9090;
            position: absolute;
            backface-visibility: hidden;
        }
        .카드뒤 {
            background-color: #fddc8a;
            transform: rotateY(180deg);
            backface-visibility: hidden;
        }

7. 이제 다 왔다. 애니메이션을 만들고

        @keyframes 카드플립 {
            from {
                transform: rotateY(0);
            }
            to {
                transform: rotateY(360deg);
            }
        }

8. 회전패널에 애니메이션을 주자!

        .회전패널 {
            transform-style: preserve-3d;
            animation: 카드플립 5s infinite;
        }

9. 이대로면 밋밋하게 회전하니까 perspective 원근법을 주면 완성이다.

        .컨테이너 {
            width: 170px;
            height: 240px;
            position: relative;
            perspective: 400px;
        }

카드에 여백을 주면 다음과 같은 애니메이션이 된다! 정리하니 뿌듯 :)

쟈몽

FE 개발자가 되기 위한 추진력을 얻는 중

이전 포스트

[TIL] 스터디 진행 상황, 코드 리뷰 회고

다음 포스트

[멋사🦁] 2주차(수) 특강, 카드 플립 애니메이션, preserve-3d 이해

개발뉴비(21/10/23~)

[ 회고 ]

[ 공부 ]

[ 강의요약 ]

컨벤션 살펴보기

`button` 만들기

천하제일 버튼 경진대회

`animation` - card flip 🌟

`preserve-3d` 이해하기 😶❗

[TIL] 스터디 진행 상황, 코드 리뷰 회고

[멋사🦁] 2주차(목) 반응형 웹, 크로스브라우징, 페이지 클론

0개의 댓글

[멋사🦁] 2주차(수) 특강, 카드 플립 애니메이션, preserve-3d 이해

개발뉴비(21/10/23~)

[ 회고 ]

[ 공부 ]

[ 강의요약 ]

컨벤션 살펴보기

button 만들기

천하제일 버튼 경진대회

animation - card flip 🌟

preserve-3d 이해하기 😶❗

[TIL] 스터디 진행 상황, 코드 리뷰 회고

[멋사🦁] 2주차(목) 반응형 웹, 크로스브라우징, 페이지 클론

0개의 댓글

`button` 만들기

`animation` - card flip 🌟

`preserve-3d` 이해하기 😶❗