[CSS] box shadow, opacity, overflow, transform, visibility

box shadow

• 요소의 그림자를 만들어주는 속성 neomorphism이 유행했다? 한다 하더라… 아이폰 감성인듯
• h-offset, v-offset, (blur), (spread), color 를 작성해야한다.
• transition과 같이 사용해서 요소에 hover하면 효과를 나타내기도 한다.

.cancel-button {
  background-color: red;
  transition: box-shadow 250ms ease-in;
}

.cancel-button:hover {
  box-shadow: 0 10px 16px 0 rgb(0, 0, 0);
}

• 요즘 ui 툴에는 box-shadow를 만들어주기도 한다. neomorphism box shadow를 만들어주는 사이트

opacity

• 0(완전 투명) ~ 1(완전 불투명)

overflow

• 자식요소가 부모요소를 벗어났을 때 어떻게 처리할지에 관한 속성
• visible(기본값. 넘쳐흐르게 내버려둠), auto, scroll, hidden
• auto, scroll은 유사하다. 자식요소가 넘쳐날 경우 scroll을 만들어준다.
• hidden : 넘쳐날 경우 스크롤도 안되고 부모요소를 넘치는 부분은 볼 수 없게 가린다.
• overflow-x , overflow-y 속성 따로 설정 가능

transform

• transform property는 굉장히 다양하기 때문에 다 다룰수 없다… 필요할때 알아서 검색하도록 MDN transform 공식문서
• translate(), scale(), rotate()

• translate() : 자기 자신의 원래 위치를 기준으로 이동할 수 있게 한다.

  • 이동해도 다른 요소들의 위치에 영향을 미치지 않는다.
  • transform : translate(40px, 50px) 기존 위치에서 오른쪽으로 40px, 아래로 50px이동
  • 음수라면 왼쪽으로, 위로 이동한다.
  • transform : translate(100%, 100%)라면 자신의 가로,세로 값을 기준으로 100%이동한다.

  .card-carousel {
    position: relative;
  }
  
  #prev,
  #next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  

부모요소(card-carousel)의 높이에서 가운데 위치하기 위해서 top : 50%;을 설정한다. 부모요소 길이의 1/2지점에 #prev와 #next 요소가 있기 때문에 #prev와 #next 요소의 길이만큼 아래로 치우쳐있어서 transform: translateY(-50%);를 추가해 부모요소의 정 가운데로 이동시킨다.

• scale(n) : n배 만큼 요소의 크기가 커진다.

  • scale(x,y) : 가로 x만큼, 세로 y만큼 커진다.

• rotate( N deg ) : N 각도만큼 회전한다.

visibility

• visible(기본값), hidden
• hidden : opacity : 0; 과 유사함 화면에 보이지만 않는다. 요소의 자리는 그대로 차지하고 있다.