Box shadow, opacity, overflow, transform

box-shadow
   - 요소에 그림자 효과를 주려고 할 때 사용

   - h-offset v-offset blur spread color
   - x   y  흐린 정도 그림자 사이즈 색상

   - h-offset -면 왼쪽으로 치우쳐저
                 +면 오른쪽으로 치우쳐저 생김

   - v-offset -면 위로 그림자가 치우쳐저
                +면 위로 그림자가 치우쳐저 생김

   - blur 0이면 흐리지 않지만, 숫자가 커질수록 점점 흐려짐
           단위는 px
 
   - spread 그림자의 사이즈가 커짐
        디자이너는 spread 값을 쓰는 것을 좋아하지 않음

   - color 그림자의 색상    

  cf1) 상하좌우로 box shadow를 주고 싶다면
         box-shadow : 37px 37px 87px ...,
                            -37px -37px 87px ... 
                            처럼 여러 개를 쓰면 된다.  

  cf2) 커서를 올렸을 때만 그림자가 생기게 하고 싶다면
          가상 선택자와 transition을 사용해서 가능
              - 1. .cancel-button{
                       background-color : red;
                       transition : box-shadow 250ms ease-in;

              - 2. .cancel-button:hover{
                         box-shadow : 0 10px 16px 0 rgba(...)
                     }

neomorphism
    - google에 neomorphism box shadow 검색하면 
      css 코드를 얻을 수 있음




opacity
   - 투명도
           0(투명) ~ 1(불투명)

overflow
    - 자식 요소가 부모 요소를 벗어날 경우, 
      이를 어떻게 처리할지에 관한 속성

            - visible
                   - 전부 보이게 함

             - auto, scroll
                  - auto : 자동으로 처리(스크롤로 처리됨)
                  - scroll : 스크롤로 처리 

             - hidden 
                   - 안 보이게 함

     cf) overflow-x, overflow-y를 통해 x축, y축만 따로 지정 가능


transform
     - 타 요소가 적용된 요소의 원래 위치를 기억하고 있기 때문에,
       원래 영역을 타 요소가 침범하지 않음
     - position absolute의 가운데 배치에 주로 사용됨
     - translate(x, y)
           - 요소를 원하는 방향으로 옮기고 싶을 때
           - x축에 대해서만 이동시키고 싶다면
             translateX(50px) 처럼 작성, y축도 마찬가지
           - %도 작성 가능, %의 기준은 translate가 적용된 
              요소의 원래 width, height를 기준으로 함
                  ex) translate(100%, 100%), width : 50px height : 50px이면
                       오른쪽으로 50px, 아래로 50px 이동
     - scale(n(배율))
           - 요소의 사이즈를 키우거나 줄일 때 사용
           - n은 비율, 예를 들어 n이 1이면 원래 크기 
                                               2면 원래 크기의 2배

           - cf> scale(x, y) 두 개를 적는다면 x는 원래 width의 x배
                                                        y는 원래 height의 y배만큼 변화

     - rotate(N deg)
           - n 도만큼 요소가 회전(양수는 시계 방향, 음수는 반시계 방향)
           - ex) rotate(45deg) // 45도만큼 회전


visibility
     - 요소를 보여줄지 여부에 대한 속성
           - visible(default)
                 
           - hidden 
                - 요소를 보이지 않게 함
                     cf1) 보이지만 않게 하는 것이지, 
                           요소는 그대로 남아 있음
       
                    cf2) display : none의 차이
                           - display : none이 적용된다면
                             완전히 없는 취급됨