EnJinnier

[CSS] 그림자(box-shadow), 불투명도(opacity) 본문

웹 개발/CSS

[CSS] 그림자(box-shadow), 불투명도(opacity)

공학도진니 2024. 3. 27. 17:44

그림자: box-shadow

box-shadow: {그림자 가로 위치} {세로 위치} [블러 정도(경계)] [그림자 퍼지는 크기] {색깔} ;

 

이 값의 순서를 외우기보다는 코드를 이해하는 정도로 알면 됨 (보통 이런 코드를 직접 쓰지는 않고 복사 붙여넣기함)

만약 헷갈리면 MDN 같은 사이트에서 그때그때 찾아보면 된다.

또한, 구글에서 box shadow generator라고 검색해보면 값을 조절해서 코드를 만들 수도 있다.

 

불투명도: opacity

opacity: {불투명도} ;

불투명도는 0~1 사이에서 조절할 수 있으며 1에 가까울수록 불투명하고 0일수록 투명하다.

단, 요소 전체를 반투명하게 하는 방법이다.