자 우리가 애니메이션을 작성하다 보면 가끔씩 잘 작동하지 않고 흔들리면서 나오는 경우가 있다. 우리가 그럴 때 1줄로 해당 현상을 해소할 수 있는 방법을 알아보자. (코드 자체에 문제가 있는 경우 위 속성을 적용해도 효과가 없습니다. 코드 자체에 문제가 없는 경우 위 속성이 효과가 있습니다) 예시코드 .open-post__heart-count:hover i { will-change: transform; } 자 난 이렇게 작성했는데 아래 코드 템플릿을 보고 본인 코드에 맞게 작성하길 바란다. 코드 템플릿 (class 또는 id) { will-change: (애니메이션 효과에서 바뀌는 부분(예.transform)) } 자 이렇게 해서 위 코드를 추가했다면 애니메이션의 문제인 흔들림이 없어졌을 것 이다. 하지..
자 오늘은 파일 업로드 버튼에 관련된 이야기다. 사실 파일 업로드 버튼의 기본 style은 보기 좋지 않다. 그렇기 때문에 오늘 준비한 내용! CSS로 파일 업로드 버튼을 예쁘게 바꾸는 방법. 예시 코드 자 일단 HTML파일에서 Add Photo 이렇게 작성해 준다. 일단 여기서 중요한 점은 label안쪽에 텍스트와 함께 파일 업로드 input를 배치해 주면 되는데, label의 for과 파일 업로드 input의 id가 같아야 한다. 자 이제 CSS에서 input#file { display: none; } 이렇게 작성해 주자. 위 코드는 file의 id를 가진 input의 display를 none로 해서 보이지 않도록 하는 작업이다. label { all: unset; padding: 10px; /*pa..
예시 설명 자 우리가 코딩을 하다 보면 특정 div이나 button에 마우스를 올렸을 때 마우스 클릭 모양으로 바꾸고 싶을 때가 있다. (id 또는 class):hover { cursor: pointer; } 자 일단 css코드에서 위와 같이 작성해 보자. 자 이렇게 작성하면 해당 물체에 마우스가 hover(올라감) 상태가 된다면 마우스 모양이 포인터 상태가 되도록 만들어주는 코드이다. 코드 템플릿 (id 또는 class):hover { cursor: (속성 입력) } 자 어떤 cursor속성이든 위 템플릿을 따라 주기만 한다면 다양한 시도를 해 볼 수 있다. 시도 https://developer.mozilla.org/ko/docs/Web/CSS/cursor cursor - CSS: Cascading S..
