Dalin's Archive

이전 글에서 마우스를 호버하면 카드가 뒤집어지는 애니메이션을 구현했는데, 추가로 구현할 부분이 생겼습니다. 바로 모바일에서는 스크롤하면 카드가 뒤집어지게 하는 것이었습니다. 이 글에서는 꼭 모바일은 아니고, 스크롤 하면 카드가 flip 애니메이션 효과를 구현해보겠습니다. IntersectionObserver라는 걸 활용해서 하는데 이것도 재미있습니다 😀 예제 코드 🌸🖥️ See the Pen Scroll card flip by Seoin (@tjdls111) on CodePen. 설명 🤗💕 Intersection Observer Api를 이용했는데, 이것은 타겟 요소와 상위 요소가 겹치는 부분을 관찰해줍니다. 그리고 페이지가 스크롤되다가, 타겟 요소가 등장하면 원하는 콜백 함수를 실행할 수 있습니다. 핵..

상황 설명 회사에서 서비스 설명하는 사이트가 있는데, 거기에서 카드가 뒤집히는 효과가 들어간 스타일이 있었다. 라이브러리를 써야 하나? 생각할 정도로 어렵고 복잡한 줄 알았는데 해보니까 생각보다 간단했다 ㅎㅎ 일단 구글에 검색을 하니까 w3School에서 flip card를 알려주는 페이지도 있었다! 예시 화면, html, css 코드가 있다. 나는 전체적으로는 이걸 참고했다. 카드 뒤집히는 효과 CSS , HTML 🌈 W3School의 코드를 조금 바꾸고, 설명을 달았다. ㅎㅎ See the Pen Untitled by Seoin (@tjdls111) on CodePen. HTML (봐야 할 부분만) 뒤 Lorem ipsum dolor sit, amet consectetur adipisicing eli..

저번 스프린트에 메인 페이지에서 여러 애니메이션을 적용하는 걸 했다. 그때 css 속성 중에 cubic-bezier라는 게 있었다. 그게 뭔지 알고 싶어서 써보는 글이다. bezier 곡선은 두 개 이상의 점을 가지고 정의되는 곡선이다. 점 몇 개로 특정한 곡선을 만들 수 있어서 컴퓨터 그래픽 분야에서 많이 쓰인다고 한다. 나무 위키, 이 블로그에서 베지어 곡선에 대해 잘 설명해준다~~ 1차, 2차, 3차,..... n차가 있는데, cubic-bezier는 3차이다. n개의 조절점으로 베지에 곡선을 만들면 n-1 차 베지에 곡선이라고 한다. 그러면 cubic-bezier는 4개의 조절점이 필요하다는 것이다. 그런데 두 점은 이미 정해져 있다. 시작점인 (0, 0)과 끝 점인 (1, 1)! 그래서 두 점만..

https://html-css-js.com/css/generator/box-shadow/ Box Shadow CSS Generator Set the properties of your box shadow to get the CSS style. Use the sliders and the color picker to set the values and watch the live preview html-css-js.com https://cssgenerator.org/box-shadow-css-generator.html Box Shadow CSS Generator A box-shadow CSS Generator tool to quickly generate box-shadow CSS declarations. cssg..

백엔드 분들께 프론트엔드 질문 받으면서 나도 다시 한번 본 부분들이다 ㅎㅎ 질문 받으면서 나도 확실히 정리할 수 있어 좋다 :) Q. javascipt에서 0, '' 은 true로 취급하고 null, undefine만 false로 하고 싶은데 좋은 방법 있나요? https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator Nullish coalescing operator - JavaScript | MDN 널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. develope..

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;