23-06-01 T.I.L position: relative / absolute

문제설명

나는 카드를 뒤집는 기능을 구현하고 싶었다. 그래서 이미지의 위치를 같은 곳에 두고 싶었다. 

같은 div에 이미지를 넣는걸로는 해결되지 않는다.

 

시도

카드를 뒤집는 방식의 CSS는 많은 사람들이 구현했고 경험을 적었을 것 같은 생각이 들었다.

인터넷에 CSS 카드 뒤집기를 검색하고 그들이 어떤 코드를 사용했는지 분석했다.

해결

 position: relative;
 position: absolute;

이 두 CSS로 이미지가 겹치는 것을 구현할 수 있었다.

 position: relative;은 상위 DIV에 절대적인 위치를 지정한다. 그리고 position: absolute;는 정해진 그 위치에 강제적으로 위치시킨다.

 /* transform-style: preserve-3d;는 카드가 3차원으로 움직일 수 있도록 설정한 것,  position: relative;,하위 요소에 대한 절대적인 위치를 설정 */
        .flip {
            width: 100%;
            height: 100%;
            text-align: center;
            transform-style: preserve-3d;
            transition: 0.5s;
            position: relative;
 /* position: absolute; 상위 요소의 절대적인 위치에 설정 backface-visibility: hidden; 앞면카드와 뒷면카드의 '뒷면'을 투명하게 한다.  */ 
            .front,
        .back {
            border-radius: 20px;
            position: absolute;
            backface-visibility: hidden;
            width: 100%;
            height: 100%;
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.2);
        }

알게된 점

position: relative과 position: absolute이 어떤식으로 연계되는이 알았다.

이미지를 겹치게 하는 방법과 카드이미지를 만드는 방식에 대해서 좀 더 능숙해졌다.