[CSS] border 안쪽으로 주기 box-shadow

모바일 웹 개발 중에, '내비게이션에 마우스 올리면 아래쪽에 두껍게 흰색 선 넣어주세요~~'라는 요청을 받았다. 불편하게 PC에서 모바일 웹을 볼 일이 있나 싶지만.. 어려운 일이 아니기 때문에 해놓기로 한다. 보통 아래쪽에 흰색 선이라고 하면 border-bottom을 생각하기 쉽지만, 다른 메뉴들과 라인을 맞춰주면서 해당 컴포넌트 안쪽으로 선을 넣어줘야 하기 때문에 box-shadow의 inset 속성을 사용한다. .menu-btn:hover { color: #c09e16; background-color: #dce255e0; border-color: #dce255e0; font-weight: bold; box-shadow: 0px -3px 0 0 #c09e16 inset; } 속성은 {두께(우,하,좌..

2023.07.05