SmileCat.

#css

3 posts

[CSS] CSS에서 이미지 마우스 커서 사용하기

기본으로 구현된 커서가 아닌 커스텀된 커서가 필요하여 알아보다보니 Changing the Cursor with CSS for Better User Experience (or Fun) 이라는 글을 보게되어 몇가지 방법을 시도해보았다. 제일 먼저 Element를 JavaScript로 이동하여 구현하기 손쉬어 포인터처럼 구현하는 것을 시도해봤는데 해당 Element와 바탕이 되는 Element의 이벤트 처리가 껄끄러워 제외하였다. 그외 직접 이미지가 필요한 커서의 경우 상단과 같은 SVG를 만들어서 svg, base64, png를 만들어

[JS] Image preload

들어가며 슬라이드와 같은 방식으로 다음 이미지를 순차적으로 불러와 보여줄 때, 미리 이미지를 불러와 이미지 전환간에 깜박임없이 부드럽게 이미지를 전환하고자 하였다. 이를 위해 이미지를 미리 로드하는 두가지 방법을 기록하고자 한다. JavsScript 예제 이미지들을 순환하며 임시 이미지 앨리먼트에 넣어 미리 로드한 후에 해당 엘리먼트를 제거하는 방식으로 구현한다. JavsScript로 이미지들을 동적으로 미리 로드하고자 한다면 좋은 선택인 것 같다. CSS 예제 CSS에 미리 로드할 이미지들을 등록해서 로드한다. 미리 로드해

[CSS] BEM(Block Element Modifier)

BEM Get BEM에서 BEM에 대해 아래와 같이 정의했다. BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in frontend development BEM은 재사용 가능한 컴포넌트와 코드 공유를 가능하게 하고자하는 CSS 방법론이다. 작명규칙 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 명확하게 만든다. 소문자, 숫자만을 이용해서 작명한다. 여러단어의 조합