Web·UI·CSS

카드 그림자의 흐림과 확장 조절하기

사용할 도구

카드를 살짝 띄우려고 그림자를 넣었는데 회색 안개처럼 보일 수 있습니다. 흐림을 키우면 부드러워져도 경계가 약해집니다. 크기 하나로 보지 말고 위치·흐림·확장·투명도를 나눠 한 값씩 바꾸며 CSS와 화면을 연결하세요.

위치만 확인하는 출력

box-shadow: 4px 8px 0px 0px rgb(15 23 42 / 0.18);

#0F172A·x=4·y=8·흐림=0·확장=0·alpha=0.18·inset 끔이면 오른쪽 4px 아래 8px입니다. 윤곽이 선명해야 방향이 잘 보입니다. 음수 x는 왼쪽, 음수 y는 위입니다.

그림자는 레이아웃 간격을 확보하지 않습니다. 이웃 카드와 간격은 gap·여백으로 정하세요. 그림자가 겹쳐도 상자 위치는 그대로일 수 있으므로 실제 배치와 그려진 영역을 구분합니다.

흐림 24·확장 0

box-shadow: 0px 8px 24px 0px rgb(15 23 42 / 0.18);

x를 0으로 돌리고 흐림만 24로 올리면 경계가 부드러워집니다. 양수 확장은 기본 모양을 키우고 음수는 줄입니다. 둘을 같은 크기 조절로 다루면 의도치 않은 진한 테두리가 생길 수 있습니다.

음수 흐림은 오류지만 위치와 확장은 음수가 가능합니다. 오류를 없애려고 부호만 지우지 말고 항목을 확인하세요. 안쪽 그림자는 위치를 억지로 바꾸기보다 inset을 검토합니다.

모양을 정한 뒤 alpha 0.10·0.18·0.30을 비교하세요. 0은 투명, 1은 불투명입니다. 같은 값도 밝고 어두운 배경에서 다릅니다. 어두운 테마 때문에 전역 농도를 올리면 밝은 테마에서 무거울 수 있습니다.

색 자체에 alpha가 있어도 출력에 쓰이는 별도 alpha 설정을 보세요. 남은 설정 때문에 색만 바꿔도 예상대로 투명도가 바뀌지 않을 수 있습니다. 최종 rgb(... / 0.18)을 읽습니다.

검정에 가까운 면 위 검은 그림자는 잘 안 보일 수 있습니다. 테두리·면 밝기·여백이 더 명확할 때도 있습니다. 선택·클릭 가능성을 그림자만으로 전달하지 말고 키보드 초점과도 구분하세요.

부모 overflow가 그림자를 자를 수 있습니다. 키우기 전에 적용처의 잘림 영역을 보세요. 미리보기에는 있고 실제엔 없어도 복사 실패가 아니라 레이아웃 차이일 수 있습니다.

카드 하나의 은은한 그림자도 열 개면 무거울 수 있습니다. 실제 수·간격·글과 작은 화면·스크롤을 확인하세요. 그림자 존재감보다 읽기와 조작 명확성을 우선합니다.

현재 기본 화면은 한 그림자를 조정합니다. CSS는 쉼표로 여러 층을 쓸 수 있지만 이 화면에 전용 층 추가 조작은 없습니다. 먼저 한 층으로 만들고 필요하면 적용처에서 각 층 역할을 검증하세요.