한눈에 보는 정의
카드나 버튼 같은 요소 뒤에 그림자를 그려 떠 있는 느낌을 주는 CSS 효과. box-shadow 속성으로 지정한다.
이런 말로 들어요
- 카드에 그림자를 아주 살짝만 넣어 주세요.
- 그림자가 진해서 화면이 지저분해 보여요.
그림으로 보기
box-shadow는 가로·세로 위치, 흐림, 퍼짐, 색으로 그림자를 정합니다. 본문 카드에는 옅은 그림자가 무난합니다.
하캄솔루션 자체 제작 설명도식직접 해 보기
그림자 없음box-shadow: none
직접 조절아래 슬라이더로 바꿔 보세요
진한 그림자무거워 보일 수 있음
box-shadow: 0 4px 12px rgba(0,0,0,.14);자세히 알아보기
그림자 효과는 평평한 화면에서 무엇이 위에 놓였는지 알려 줍니다. box-shadow에는 그림자가 옆으로·아래로 얼마나 밀릴지, 얼마나 흐릴지, 얼마나 퍼질지, 어떤 색일지를 적습니다. 흐리고 옅은 그림자는 카드를 정돈해 보이게 하고, 마우스를 올릴 때 그림자를 키우면 누를 수 있다는 신호가 됩니다. 그림자를 여러 겹 쉼표로 이어 더 자연스럽게 만들 수도 있습니다.
실무 예시
예를 들어 서비스 소개 카드에 box-shadow: 0 4px 12px rgba(0,0,0,.08)처럼 옅은 그림자를 주면, 배경과 카드가 구분되면서도 화면이 무거워지지 않습니다.
함께 살펴볼 점
그림자만으로 버튼과 일반 상자를 구분하면 잘 안 보이는 사람이 있습니다. 테두리나 색 대비도 함께 쓰고, 큰 그림자를 많이 쓰면 스크롤이 버벅일 수 있습니다.
AI에게 이렇게 요청해 보세요
서비스 소개 카드 3개에 옅은 그림자를 넣고, 마우스를 올리거나 키보드로 포커스하면 그림자가 조금 더 커지게 CSS를 짜 줘. 동작 줄이기 설정도 지켜 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- box-shadow - MDN 새 창
box-shadow가 요소 테두리 주변에 그림자를 더하고, X·Y 위치, 흐림, 퍼짐, 색으로 정하며 쉼표로 여러 개를 이을 수 있다는 설명을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정