[html/css] 쿠폰 눌렀을 때, 내용물의 크기가 달라진다..

오른쪽 그림을 보면

" 스타벅스 아이스 카페 아메리카노 " 이지만,

쿠폰을 클릭하면 

" 스타벅스 아이스 카페 아메리카 " 가 되어있다.

 

이 문제는 

.selected { border: 3px solid #7661FB; }

 

해당 코드에서 발생한 문제이다.

 

쿠폰이 클릭되면 ' selected ' 라는 클래스가 추가되도록 설정했는데, 

css가 border로 되어 있기 때문에 안쪽 공간을 border가 잡아먹기 때문에 발생한다.

그렇다면 어떻게 해야할까?

 

.selected { outline: 3px solid #7661FB; }

 

이렇게 하면 된다. ^ㅡ^

 

대게 디자인 자체를 바꿀때에는 border를 사용하지만,

디자인은 그대로인데, 기능적인 강조를 원하면 box를 해치지않는 outline이 더 좋다.