Nephrite21

carousel indicator에 마우스를 호버 했을 때 설명이 옆으로 튀어나오게 하려고 css 애니메이션을 찾아보다가 ::before과 ::after의 사용법을 알고싶어서 정리를 해보려고 한다. ::before과 ::after은 뭘까? ::before과 ::after은 "가상 요소(pseudo-Element)"로, 별도의 class 를 지정하지 않아도 지정한 것 처럼 요소를 선택할 수 있게 만들어 주는 것이다. 가상 클래스처럼 선택자에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능하다. 라고 나와있다. 하지만 이해가 되지 않아서 더 찾아보았다. 가나다라 가 있을 때, 만약 div::first-letter를 사용한다면, "가"를 감싸고있는 element는 실제로..

Intersection Observer 홈페이지에 적용하기. 현재 블로그 상태이다. 현재 블로그는 scroll-snap을 이용하여 한 페이지(내용이 달라지는 부분마다 페이지로 구분)씩 스크롤 되게 되어있다. 여기서 스크롤을 내렸을 때 현재 스크롤의 위치가 어디인지 알려주고, 클릭 시 이동할 수 있는 Indicator를 우측에 제작할 예정이다. 이 과정에서 현재 index를 Intersection Observer를 통해 받아오고, 이를 활용해서 indicator의 색상변환/애니메이션 활성화 등을 할 수 있는 구조를 만들 계획이다. observer를 통해 현재 인덱스 값을 받아오는 구조를 먼저 만들어 보도록 하겠다. Intersection Observer 등록 가장먼저 할 일은 Intersection Obs..

Intersection Observer 현재 웹 페이지의 우측부분에 인디케이터(현재 페이지가 어디인지 알려주는 UX 디자인)을 만들기 위해 Intersection Observer를 활용해보기로 했다. Intersection Observer는 Target Element가 화면에 노출되었는지를 보여주는 API이다. scroll 이벤트를 활용하는 것과는 달리 성능에 이점을 가진다. 자세한 설명은 다른 블로그에서 잘 설명했으므로 생략하겠다. 활용방법 기본적으로 Intersection Observer는 변수에 IntersectionObserver 인스턴스를 할당하고, 관찰 하고자 하는 element를 할당해주어서 작동한다. const observer = new IntersectionObserver(callback..