[css]_11(use css)

CSS 예제만들어 보기

CSS를 배운 것들을 활용하여 카드가 돌아가는 모습을 만들어 보자

결과물

See the Pen xxbQvpZ by duckey-kim (@duckey-kim) on CodePen.

3개의 카드가 있고 클릭을 하면 뒷면을 보여주는 예제이다.

첫번째 과정

일단 3개의 카드의 형태를 만들어주자.

<div class="cards">               카드들의 묶음
    <div class="card">             묶음에 들어가는 card
      <div class="face face-front">   card의 앞면
        <img src="https://miro.medium.com/max/318/1*1OKmA2EdGln8O6RCVORgGg.png" alt="깃허브">
      </div>                       
      <div class="face face-back">  card의 뒷면
      <img src="https://heropy.blog/css/images/vendor_icons/html5.png" alt="html"></div>
    </div>
</div>

카드의 묶음 cards을 만들고 그안에 card를 만든다.
card는 앞면과 뒷면을 만든다. 앞면과 뒷면은 같은 사이즈로 만들기 위해 또 하나의 클래스 face를 만든다.
각각의 앞면과 뒷면은 다른 이미지를 클래스를 이용하여 넣어준다.

두번째 과정

카드 하나의 크기와 앞면과 뒷면의 크기를 지정한고 이미지의 크기를 지정한다.

.card{
  width: 180px;
  height: 250px; 
}
.card .face {
  width: 180px;
  height: 250px;
  border:1px dashed lightgray;
  border-radius:10px;
}

카드가 들어가는 .card와 .face의 크기를 비슷하게 만든다.외각을 알수 있게 border을 입력한다.

.card .face-front img{
  width: 150px;
}
.card .face-back img {
  height: 200px;  
}

앞면과 뒷면의 img의 크기를 지정해 준다. .card 이면서 앞면,뒷면인 img태그의 css를 지정한다.

세번째 과정

1. 앞면과 뒷면의 이미지가 card에 중앙에 위치시킨다.
2. 같은 위치에서 보이게 해야한다. position을 이용하여 바꿀 수 있다.

중앙에 위치시키기
다음 css를 추가한다.

.card .face {       앞면과 뒷면의 css를 정의해보자
display:flex;
justify-content:center;       수평 가운데 정렬
align-items:center;           수직 가운데 정렬
}

같은 위치에 보이게 하기
position을 이용하여 위치시킬 수 있다. position:absolute;을 사용하여 card에 기준을 고정시켜서 합칠 수 있다. 단! 부모요소에 position:relative;가 작성되어 있어야한다. 부모요소에 기준점이 없다면 조샹요소까지 올라가기 때문인다.
다음 css를 추가한다.

.card .face {
    position:absolute;  
}
.card {
    position:relative;
}

4번째 과정

앞면과 뒷면이 함께보이기 때문에 각각의 이미지만 보이게 한다.
backface-visibility:hidden;과 앞면과 뒷면에 rotateY()을 활용한다.
다음 css를 추가한다.

.card .face {
    backface-visibility:hidden;  뒷면을 보이지 않게 한다.
}
.card .face-front{
    transform:rotateY(0deg);    0도를 회전시키기 때문에 앞면은 보인다.
}
.card .face-back{
    transform:rotateY(180deg);  180도를 회전시키기 때문에 뒷면이 되면서 보이지 않게된다.
}

이렇게 되면 앞면만 보이는 카드가 만들어 진다.

5번째 과정

앞면을 클릭하면 뒷면이 보이고 클릭을 때면 다시 앞면으로 돌아오는 것을 만든다. 변화하는 과정을 보이게 만든다.

조건부 선택자인 :active을 활용한다. 그리고 카드들의 변화하는 과정을 보이기 위해 transition을 .face에 적용한다.
다음 css를 추가한다.

.card .face {
    transition:1s;  변화과정을 1초동안 보여준다.
}
.card:active  .face-front{     카드가 클릭이 되면 앞면을 회전시킨다.
    transform:rotateY(180deg);   클릭이 180도 회전하면서 앞면은 사라지게된다.
                                 backface-visibility:hidden;때문에
}
.card:active .face-back{
    transform:rotateY(0deg); 카드가 클릭이 되면 뒷면이 보여야 하기때문에 회전시킨것을
                             0도로 다시 돌린다.
}

이렇게 하면 앞면과 뒷면이 합쳐져 있는 .card를 클릭하면 앞면이 안보이고 뒷면을 보이게 할 수 있다.

마지막 과정

3개의 카드를 왼쪽 정렬로 보여주고 margin을 주어 보기 편하게 하자.

.card {
    float:left;         왼쪽정렬을 시킨다.
    margin-right:10px;  오른쪽 에 margin을 준다.
}
.card:last-child{
    margin-right:0px;      card의 마지막에는 오른쪽 margin이 필요없기때문에
                           초기화 시킨다.
}

card들이 왼쪽이 왼쪽정렬로 3개가 나오고 margin을 주어서 보기 편하게 바꾼다.