1주차 팀 프로젝트(2) 팀원소개페이지 제작하기. 2024_08_28

SJ.CHO·2024년 8월 28일

CSS html js 팀과제 프로젝트

스파르타코딩클럽_Spring3기_본캠프

목록 보기

4/37

기능 추가사항

CSS 최적화.
사용 이미지 용도에 맞게 편집.
팀원 자기소개 카드 플립 애니메이션 추가.

사용 기술

HTML
CSS

진행과정

해당카드가 처음엔 뒷면 이었다가 앞면으로 변할때 애니메이션 + 간단 자기소개 페이지가 나오게 설계. CSS 카드애니메이션을 검색해보니 생각보다 많은 결과가 나왔다.
그런데 이미 적용된 CSS HTML + CSS 최적화를 하지않아 애니메이션을 적용하면서 여러 문제가 발생 CSS 최적화부터 다시 하나하나 진행..
최적화 전

<div class="card" style="width: 18rem; border: 3px outset; background-color: rgb(230, 129, 7);">
                <h5 class="card-title"
                    style="border: 3px outset; background-color: rgb(216, 156, 83); text-align:center">이 름</h5>
                <p class="star">⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐</p>
                <img src="..."
                    class="card-img-top" alt="..." style="border: 3px outset;">
                <div class="card-body" style="border: 3px outset;">
                    <p class="card-text"
                        style="border: 3px outset; background-color: beige; height: 50px; font-size: 200%; text-align:center"> ...
                    </p>
                    <a href="#" class="btn btn-primary"
                        style="height: 20px; display: flex; font-size: 10px; float: right; color: black; background-color: beige;">...</a>
                </div>
            </div>

최적화 후
HTML

<div class="card">
                <div class="front">
                </div>
                <div class="back">
                    <h5 class="card-title">이 름</h5>
                    <p class="star" style="text-align: right;">⭐⭐⭐⭐⭐⭐⭐⭐</p>
                    <img src="..."
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <p class="card-text">
                            ...
                        </p>
                        <button class="open-popup" data-target="popup-1">...</button>
                    </div>
                </div>
            </div>

       .card {
            width: 18.2rem;
            border: 3px outset;
            background-color: rgb(230, 129, 7);
            position: relative;
            perspective-origin: center;
            transition: transform 0.3s;
            transform: perspective(800px) rotateY(0deg);
            transform-style: preserve-3d;

        }

        .card-title {
            background-color: rgb(216, 156, 83);
            text-align: center;
            margin-top: 2%;
            border-width: 3px 3px 3px 3px;
            border-style: outset;
        }

        .card-text {
            height: 50px;
            font-size: 200%;
            text-align: center
        }

        .card-img-top {
            border-width: 3px 3px 1px 3px;
            border-style: outset;
        }

        .card-body {
            border-width: 3px 3px 1px 3px;
            border-style: outset;
            background-color: beige;
            height: 110px;
        }

제발 코딩전에 구현한다고 하드코딩하지말고 구조도를 먼저 설계부터해놓고 코딩을 시작하자고 15번정도 다짐했다.

완성본을 올리면 스포일러기 때문에 대충 적용한 결과물 예시로 대체.

		.card:hover {
            transform: perspective(800px) rotateY(180deg);
        }

        .card>* {
            backface-visibility: hidden;
        }

        .front {
            border: 3px outset;
            background-color: blue;
            margin-top: 0.75%;
            background-size: 140%;
            height: 450px;
            width: 260px;
            color: white;
            backface-visibility: hidden;
            position: absolute;
        }

        .back {
            transform: rotateY(180deg);
            backface-visibility: hidden;
            border: 3px outset;
            background-color: red;
            margin-top: 0.75%;
            background-size: 140%;
            height: 450px;
            width: 260px;
            color: white;
            backface-visibility: hidden;
            position: absolute;
        }

핵심키워드만 훑고 넘어가겠다.

backface-visibility : hidden - rotateY로 인해 180도 뒤집혔을 때 표시할 지 여부를 정하는 옵션.
transform : perspective - 3D 입체 효과를 주기 위한 원근감 옵션.
transform : rotateY - Y축을 기준으로 회전하는 속성.
position : absolute - 카드의 앞면과 뒷면이 겹칠수 있게 해줌 (조상의 위치를 기준으로 배치)

마주친 문제와 해결방안

1. 코드 최적화

위에서 정리한 항목중 하나, 정리는 위에 자세하게 적혀있으니 참고바람.
정말 코드는 치면서 생각하는게 아니라 생각을 다하고 치는거라 매번다짐함..

2. Git pull merge관련 에러

다른 팀원이 작성한 코드를 그대로 pull로 가져왔다가 발생한 에러.

Pull is not possible because you have unmerged files
로컬파일과 원격에 같은 파일이 있는데 머지가 잘 안됐다고 판단하여 Git 변경횟수와 터밀널횟수가 맞지않는 상태.

git commit -am '커밋메시지'
해당 명령어를 통해 해결할 수 있었다.
강제 push로도 해결은 가능하지만 협업에서는 그럴수가없다...

참조 : https://velog.io/@2ujin/%EA%B9%83-Pull-is-not-possible-because-you-have-unmerged-files-%EC%97%90%EB%9F%AC

3. front 카드와 Back 카드가 합쳐지지않는 문제.

위 문제로만 이번 기능을 넣는 소요시간의 80%는 해당 이슈로 잡아먹혔다.
분명 front back Tag 전부 분리하고 visible 특성또한 전부 제대로 했는데도....

position: absolute
해당 명령어를 통해 해결 가능했다. 기능은 가장 가까운 위치에 있는 조상요소를 기준으로 배치하는 기능으로 위치값을 따로 지정해주지않아 조상요소와 겹치게끔 만들어 해결하였다.

참조 :
https://velog.io/@njt6419/%EC%B9%B4%EB%93%9C%EB%92%A4%EC%A7%91%EA%B8%B0
https://solo5star.tistory.com/40
https://velog.io/@pexe99/Boarlog-%EC%95%84%EB%A6%84%EB%8B%A4%EC%9A%B4-%EC%B9%B4%EB%93%9C-Flip-%ED%9A%A8%EA%B3%BC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
https://gurtn.tistory.com/157