화살표2 [CSS]마우스 호버시 아이콘 모양 변경(사이드바 보기/감추기역할) 주로 사용된 csstransform:hover 1. html 2. CSS.arrow { z-index: 999; top: 50%; left: 0px; position: fixed; transform: translateX(100px) translateY(-50%) rotate(0deg) translateZ(0px); transition: transform .3s ease-out; cursor: pointer !important;}.arrow .icon-wrap { justify-content: center; align-items: center; width: 2rem; he.. 2024. 6. 19. [CSS 활용] 화살표, css로 만들기 화살표 모양 이미지가 아닌 CSS 로 그리기 보통은 PNG 이미지로 사용하거나, 아이콘폰트를 사용하는 경우가 많지만, CSS 가상선택자를 이용해서 만들게 되면 사이즈, 컬러 등을 자유롭게 바꿀 수 있다. 위와 같이 단순한 선형태의 방향키 디자인이라면 CSS를 통해 만들어서 제어하는것이 편한것 같아서 종종 사용 하고 있다. HTML CSS .wrap { position: absolute; vertical-align: middle; top: 100px; left: 10px; } .wrap .arrow { position: relative; display: inline-block; width: 30px; height: 30px; overflow: hidden; vertical-align: middle; } ... 2022. 3. 17. 이전 1 다음 728x90 반응형
