CSS 썸네일형 리스트형 Less 입문 - 기초 문법 알아보기 👀 Less가 뭔가요? Less는 Ant Design, Bootstrap, Cardinal, Semantic UI 등에서 사용하고 있는 CSS 전처리기이다. Less는 Leaner Style Sheets의 약자이자, '더 적은'이라는 의미이기도 하다. CSS를 더 간결하고 쉽게 작성할 수 있음을 어필하는 이름인 듯 하다. It's CSS, with just a little more. - Less 슬로건 현재(2022. 01월) 기준 Less의 최신 버전은 4.1.2이다. Less 언어에서 지원하는 편리한 문법들을 하나씩 익혀보자. 📚 변수 (Variables) 변수명 앞에 앳 사인(@)를 붙이고, 콜론(:)뒤에 할당할 값을 적어주면 된다. @width: 10px; @height: @width + 10px.. 더보기 CSS - transition 이벤트, animation 이벤트 🚀 transition 이벤트 transitionStart CSS 트랜지션이 시작하면 이벤트가 발생한다. transitionRun CSS 트랜지션이 꼭 시작하지 않았더라도 생성되었을 때 발생한다. 예를 들어 딜레이(transition-delay)가 2초로 설정된 경우, transitionRun 이벤트가 발생하고 2초 후에 transitionStart 이벤트가 발생한다. transitionEnd CSS 트랜지션이 끝나면 이벤트가 발생한다. 가장 자주 사용된다. transitionCancel CSS 트랜지션이 취소되면 이벤트가 발생한다. 트랜지션이 취소되면 transitionEnd 이벤트는 발생하지 않는다. e.propertyName 트랜지션 대상 CSS 프로퍼티 이름을 나타낸다. e.elapsedTime .. 더보기 CSS - Transform, Transition, Animation, 3D 자바스크립트 없이 CSS 만으로 재밌는 효과를 줄 수 있는 4가지 효과를 알아보자. 1. CSS Transform '변형'을 뜻하는 Tranform은 CSS3에서 처음 등장했고 width, height 등을 조정하는 방법보다 성능이 좋다. 나머지 박스에 영향을 미치지 않고, 기준점이 중앙에 있다는 점이 특징이다. 중앙으로 설정되어있는 기준점은 transform-origin으로 쉽게 바꿀 수 있다. .box:hover { transform-origin: 0% 0%; /* 좌측 상단으로 기준점 변경하기 */ transform-origin: left top;/* (같은 효과) */ transform-origin: 100% 100%; /* 우측 하단으로 기준점 변경하기 */ transform-origin: ri.. 더보기 이전 1 다음
