문제 상황
특정 컴포넌트를 hover 했을 때, 레이아웃이 흔들리는 현상이 있었다. 정확히는 흔들리는 게 아니라 레이아웃이 미세하게 커져서 흔들리는 것처럼 보이는 현상이었다.
기존 코드
const DateComponent = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
width: 15px;
height: 15px;
text-align: center;
font-size: 14px;
color: #d5d5d5;
&:hover {
cursor: pointer;
background-color: #273241;
border: 1px solid #2383e2; /* hover 시, border 적용 */
border-radius: 20%;
}
&.today {
color: #eff5fd;
background-color: #eb5756;
border-radius: 50%;
font-weight: 600;
}
&.selected {
color: #eff5fd;
background-color: #2383e2;
border-radius: 20%;
}
`;
CSS
복사
원인 파악
문제의 원인을 파악해 보니, border가 hover 시에만 적용되어 요소의 전체 크기가 변경되기 때문에 발생한 것이었다. CSS에서 border는 요소의 전체 크기에 포함되므로, border가 추가될 때 요소의 크기가 커지게 된 것이다.
시도한 방법
문제 해결을 위해 시도한 두 가지 방법은 아래와 같다.
1.
Box Sizing 속성을 사용: box-sizing: border-box; 속성을 적용하여 border와 padding이 요소의 지정된 너비와 높이에 포함되도록 했다. 이렇게 하면 border가 추가되어도 요소의 크기가 변경되지 않을 것이라 판단했다.
2.
Border 투명하게 설정: 요소에 항상 border가 있되, 기본적으로 투명하게 설정해 보기도 했다. 그런 다음 hover 가 되면 그 때 투명색이 아닌 다른 색상으로 변경되도록 설정했다. 이렇게 하면 hover 시에도 요소의 크기가 변경되지 않았다.
나는 두 번째 방법이 더 간편하다고 생각하여 적용했다.
수정한 코드
const DateComponent = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
width: 15px;
height: 15px;
text-align: center;
font-size: 14px;
color: #d5d5d5;
border: 1px solid transparent; /* 기본적으로 투명한 border 추가 */
&:hover {
cursor: pointer;
background-color: #273241;
border: 1px solid #2383e2; /* 특정 색상의 border 추가 */
border-radius: 20%;
}
&.today {
color: #eff5fd;
background-color: #eb5756;
border-radius: 50%;
font-weight: 600;
}
&.selected {
color: #eff5fd;
background-color: #2383e2;
border-radius: 20%;
}
`;
CSS
복사
이제 hover 효과로 인한 흔들림이나 이동이 발생하지 않게 되었다!