(CSS코딩일기) 그림자 넣기, 불투명도 조절하기

카드에 그림자를 넣고 카드 요소 일부분에 반투명하게 만드는 방법에 대해 알아보겠습니다.

1. 그림자 box-shadow

가로, 세로 위치, 흐린 정도(Blur), 퍼지는 정도(Spread), 색상의 순서로 씁니다.

box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
/*
가로: 5px
세로: 10px
흐린 정도(Blur): 15px
퍼지는 정도(Spread): 8px
색상: rgba(0, 0, 0, 0.6)
*/

참고로, 구글에서 box shadow generator라고 검색하면 여러 그림자를 만드는 속성을 볼 수 있습니다. 

 

2. 불투명도 opacity

요소 전체의 불투명도를 조절할 때 사용합니다. 0에서 1 사이의 소수 값으로 단위 없이 쓰면 됩니다.

opacity: 0; /* 투명 */
opacity: 0.6;
opacity: 1; /* 불투명 */