[2024.04.16] TIL 2일차

[ 본캠프 2일차 기록 ]

🖥️ 오늘 공부한 내용 🖥️

팀프로젝트 진행

1. 메인 페이지 구현

hover시 문 열리는 애니메이션

• hover 시 위 사진과 같이 문이 열리면서 각 팀원의 캐릭터와 한줄 소개가 나오는 형식
• 해당 링크 를 참고해서 만들었다

    <div class="content">
        <div class="content-inside">
            <p class="content-name">팀장 김선민</p>
            <img src="../Images/선민님.png" alt="sunmin" class="profileImg">
            <p class="content-text">
                안녕하세요 저는 ooo입니다. 
                <br> 앞으로 잘부탁드립니다~! 
                <br> 다들 화이팅해봐요!!!
            </p>
        </div>
        <div ></div>
        <img src="../Images/문이미지.png" class="door" alt="doorImg">
    </div>

1. "content"로 프로필 카드와 문이미지를 묶는다
2. "content-inside"에 문 안에 프로필 정보들을 넣어준다
3. css에서 아래와 같이 설정해준다

.content {
    width: 200px;
    height: 300px;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid;
    transform-style: preserve-3d;
    transform: perspective(1500px);
    margin-right: 10px;
    border: 1px solid lightgray;
    box-shadow: inset 0 0 10px rgb(108, 108, 108);

}

.content .content-inside {
    /* height: 300px; */
    display: flex;
    flex-direction: column;
}

.content .content-inside .content-name {
    font-size: 18px;
    font-weight: 800;
    margin-top: 20px;
}

.content .content-inside .profileImg {
    width: 150px;
    height: 160px;
    align-items: center;
    margin-left: 25px;
}

.content .content-inside .content-text {
    height: 100px;
    font-size: 14px;
    text-align: center;
    line-height: 25px;
}

.door {
    width: 200px;
    height: 300px;
    border: 1px solid;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    transform-style: preserve-3d;
    transform-origin: right;
    transition: all 1s;
}

// ::after를 쓰면 door 요소 뒤를 디자인 해준다
.door::after {
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 15px;
    background-color: white;
    border-radius: 50%;
}

// 문이 hover 되었을 때 문 이미지를 90도 만큼 Rotate 해라
.content:hover .door {
    transform: rotateY(90deg);
}