문제의 상황 및 요구사항
- 이미지 자체 흰색 배경때문에 이미지의 경계가 불분명함
- 유저에게 어색한 UI 제공
해결 방안
- 가상 요소
:before
img {
&:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
z-index: 1;
}
}- box-shadow
img {
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}=> border보다는 box-shadow를 줬다. border는 영역을 차지하고 box-shadow는 영역을 차지하지 않는다.
=> 경계를 줌으로써 조금은 더 자연스로운 UI를 보일 수 있다.
