etc | box-shadow, overflow, transform, visibility

Box Shadow

box-shadow | 요소에 그림자 효과를 주는 속성, 아래의 다섯가지 속성값을 적용

1. h-offset | 그림자의 x축 방향(+, -) 길이
2. v-offset |  그림자의 y축 방향(+, -) 길이
3. blur
   • px단위
   • 0에 가까워지면 선명해 짐
4. spread | shadow size
   • 보통 0으로 지정 
5. color | shadow color
   • 주로 rgba()를 이용해서 투명도를 지정

box-shadow 속성 별 예시

 

 

+)  어떻게 사용하느냐에 따라 아래와 같이 다양한 디자인을 구현할 수 있다.

neumorphism generator 사이트

Neumorphism(좌) 다양한 shadow(우)

 

Overflow 

overflow | width와 height을 갖는 요소의 컨텐츠나 자식요소가, 그 요소의 사이즈를 벗어났을 때의 처리 방법을 설정할 수 있다. 다음과 같은 값을 갖는다. 

1. visible | 기본값, 컨테이너를 벗어난 컨텐츠를 있는 그대로 출력
   • 이 때 컨텐츠가 overflow된 요소에게 형제 요소가 있다면, 형제 요소는 컨테이너에서넘친 컨텐츠를 무시하고, 자신을 위치시킨다. => layout 망가짐  
2. auto | 컨테이너를 벗어난 컨텐츠가 있으면 알아서 스크롤로 표시
3. scroll | 컨테이너를 벗어난 컨텐츠는 스크롤로 표시
   • auto와 매우 비슷
4. hidden | 컨테이너를 벗어난 컨텐츠는 화면에 표시하지 않음

 

Transform

transform | 요소의 appearance(모습, 모양)를 변형시키는 속성으로, 속성의 값으로 resize, rotate, translate...와 같은 transform-function을 사용한다. 다음은 가장 많이 사용되는 함수이다. 

1. translate(x, y) | 요소의 위치를 옮길 때 
   
   • px, %
     • % 단위로 값을 적용하면, %는 translate 속성을 적용하고 있는 요소 자신의 사이즈를 기준으로 한다
   • position과 함께 가운데 정렬할 때 자주 이용
2. scale(n) 또는 scale(x, y) | 요소의 사이즈를 크게 또는 작게 할 때
   • 요소의 실제 사이즈를 1로 함
   • 실수(real number)
3. rotate(ndeg) | 요소를 회전할 때
   • 예를 들어 rotate(90deg)는 요소를 시계방향으로 90도 만큼 회전

 

+) img 회전

 

img {
  width: 110%;
  height: 100%;
  object-fit: cover;
  transform: rotateZ(-5deg) translateY(-3rem) translateX(-1rem);
}

 

+) transform과 관련된 어떤 함수를 적용하더라도, 모든 요소는 자신의 원래 위치, 사이즈 등을 기억함 => 주변 요소의 레이아웃 재배치가 일어나지 않음

 

Opacity, Visibility, Display: none

opacity | 불투명도(0~1)

• 1 | 불투명
• 0 | 투명

visibility

• visible | 기본값
• hidden | 요소는 여전히 있으나, 화면 상에 보이지만 않게 한다 => 다른 요소의 배치에 영향을 끼치지 않는다.

 display: none 

• display는 박스의 타입을 결정해 주는 속성으로, 이 값이 none이라는 것은 해당 요소가 존재하지 않는다는 것을 의미한다. 
• visibility: hidden과 달리, 아예 없는 요소로 취급되어 다른 요소들이 해당 요소의 빈 자리를 채우는 재배치가 일어난다.