CSS (8) : CSS 헷갈리는 것들 정리 (Day 8)

1. header + main + footer에서 main을 세로 가운데로 정렬하는 법
   (1) 전체 세로 길이의 가운데

       display : flex;
       flex-direction: column;
       justify-center : space-between;

 (2) (스크롤 있을 때) viewport의 가운데
 position: fixed;
 top: 50%;
 transform: translate(-50%, -50%);
     

2. 시맨틱 구조
  1) body는 div.wrap으로 감쌀 것
  2) main: main>section>
  3) footer: footer>div

3. 화면의 가로 중앙에 정렬하는 법
  (1) 부모요소에
      display: flex;
      flex-direction: center;
  (2) width: 100%
      margin: 0 auto;

4. 클릭 시 이미지 나타나게 하는 법
  (1) transform: translate 사용

  (2) position: absolute 사용
    ```
   section.content .project .bottom li a .name {
     position: absolute;
     opacity: 0;
     transition: 1s;
   }

    
   section.content .project .bottom li a:hover .name {
     animation: show-name 1s;
   }

   @keyframes show-name {
     0% {
      opacity: 0;
      bottom: -30px; 
     }
    100% {
     opacity: 1;
     bottom: 10px;
    }
  }
  
5. 커튼 효과커튼효과

/* 커튼효과 /
section.sns ul li .img-box::before {
content:'';
width: 0; / hover해야 나타나도록 /
height: 100%;
background: rgba(255, 131, 66, 0.75);
/ z-index를 해야 .img-box를 뚫고 올라옴 /
/ z-index를 하려면 position 설정 필요 */
position: absolute;
z-index: 500;
left: 0;
top: 0;
}

section.sns ul li a:hover .img-box::before {
width: 100%;
}

6. 박스의 정중앙으로 위치하게 하는 법

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)

7. transition vs keyframes(animation 효과)
 - transition은 :active/focus/hover를 사용했을 때의 효과 관련된 것