[Css 질문] css에서 HTML요소의 너비에 몇 픽셀을 더 더하는 방법이 있나요?

Question

hover을 사용해 마우스를 요소 위에 올리면 너비와 높이가 10px씩 커지는 효과를 내고싶은데 마우스를 요소 위에 올리기 전 요소의 너비와 높이를 구해가지고 계산(예를들어 너비와 높이가 각각 10px, 10px인 div 요소를 hover에 width: 20px; height: 20px와 같이 넣는 방법)해야하나요 아니면 더하기 10 계산을 안 하고 너비와 높이를 더 늘리는 방법이 있나요?

양근당파 · Answer

뭐 생각하신대로 하셔도 가능은합니다.이벤트 발생시 width height를 다시 지정하셔도 되고 class를 교체하셔도 되고 방법은 여러가지에요

컴포지트 · Answer

CSS의 transform 속성이 있습니다. 여기서 scale 함수에 비율을 줘서 상대적으로 늘리거나 줄일 수 있습니다.scale() - CSS: Cascading Style Sheets | MDN (mozilla.org)예).scale-up:hover { transform: scale(1.2); }단, 요소의 크기만 늘리고 싶거나, px 단위로 늘리고 싶다면, 안타깝게도 절대값을 줘야 합니다.예)scale-up { width: 10px; height: 10px; } scale-up: hover { width: 20px; height: 20px; }

[Css 질문] css에서 HTML요소의 너비에 몇 픽셀을 더 더하는 방법이 있나요?

2개의 답변

#hover 목록