한 걸음/HTML & CSS
세로로 긴 스크롤을 쭉쭉 내리다가, 특정 컴포넌트가 mount 됐을 때 애니메이션이 실행되도록 해야한다. 같은 방식으로 동작하는 컴포넌트들이 여기저기 여러번 쓰여서, 커스텀 훅으로 만들어 쓰기로 했다. (Next.js14 & Styled-components 사용 환경이다.) Custom hook // useScrollAnimation.tsx 'use client'; import { useEffect, useState, RefObject } from 'react'; const useScrollAnimation = (ref: RefObject) => { const [isInViewport, setIsInViewport] = useState(false); useEffect(() => { if (!ref.cur..
사이드 프로젝트 진행 중, 위와같이 드래그해서 value를 설정할 수 있는 슬라이더가 필요했다. npm에 마땅한 게 없어서 직접 만들어 구현하기로 했다. RangeSlider.tsx import { useState } from 'react' import styled from 'styled-components' const Slider = styled.input` position: absolute; top: 50%; width: 100%; height: 12px; -webkit-appearance: none; background: transparent; margin: 0; border: 0; &:active { cursor: grabbing; } &:focus { outline: none; } ` const..
조건 - 위 이미지에서 흰색박스(ADT Total untamount...) 영역의 width는 가변적으로 늘어나고 줄어들 수 있다. - 흰색박스의 길이에 따라 아래 텍스트(description...) 영역의 max-width가 맞춰지고 줄바꿈 되어야 한다. - 고정 width는 부모, 자식 어디에도 쓸 수 없다. 해결책 1. 부모요소에 max-width: min-content 속성을 준다. 2. 줄바꿈되면 안되는 요소에 white-space: nowrap 속성을 준다 (=하늘색 박스) HTML 삽입 미리보기할 수 없는 소스 뭐 자바스크립트로 흰색박스 영역 width를 구해서 그걸 max-width로 줘야하나... 이런 복잡한 생각을 했었는데 너무나도 간단하게 해결 완!
scroll-snap-type 를 사용해서 스크롤 시 다음 섹션의 상단이 화면 위에 착! 붙는 액션을 구현해본다. MDN 문서 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type scroll-snap-type - CSS: Cascading Style Sheets | MDN The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one. developer.mozilla.org 포인트 - 부모인 콘테이너의 높이는 100vh고, 자식들(=각 섹션 div들)의 높이는 부모의 100%이다. HT..
http://rwdb.kr/mouseoverinteraction/ 컨텐츠에 집중을 도와주는 마우스 오버효과들 총정리! - RWDB RWDB Responsive Web Design dB Web awards, 우수 하이브리드웹·반응형웹 모음 사이트 rwdb.kr 위 사이트에 순수 css만으로 구현한 화려한 애니메이션들이 잘 정리되어있는데, 이 중 특히 "우와~" 했던 것 몇 개를 골라 부가적인 꾸밈요소, 헷갈리는 코드들은 지우고 간결하게 만들어서 나중에 어디든 활용할 수 있도록 내 버전으로 정리해보았다! 😀 같은 자리에서 뒤집어지며 바뀌는 텍스트 - absolute로 고정된 자리를 주고, 마우스오버 시 opacity(불투명도)와 translateY(세로이동값)를 변경해주는 게 키포인트다. - 만약 absol..
가상요소(Pseudo-Element)란? 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택을 할 수 있도록 한다. ::before, ::after 뿐만 아니라 ::placeholder, ::first-line, ::first-letter 등이 포함된다. ::before – 실제 내용 바로 앞에서 생성되는 자식요소 ::after – 실제 내용 바로 뒤에서 생성되는 자식요소 before와 after 사용 시, content 속성이 반드시 필요하다. (content:"어쩌구저쩌구") content는 html에 포함되지 않은 정보를 css에서 새롭게 생성해준다. 이렇게 말하니 잘 와닿지 않는데, 예시를 만들어 살펴보자. HTML 삽입 미리보기할 수 없는 소스 content: ""로 빈 내용..
http://rwdb.kr/mouseoverinteraction/ 위 사이트를 둘러보며 html, css 관련 새로 알게 된 것들을 포스팅해보려고 한다. 화려하고 재미있는 애니메이션들이 잘 정리되어있는 페이지인 것 같다. figure & figcaption 태그 figure - 책이나 잡지에서 이미지, 차트 등이 나올 때 이를 설명하는 문구와 함께 소개된다. - 사진, 도표, 이미지, 오디오, 비디오 등을 담는 콘테이너 역할을 한다. - figure 요소는 문서 내에서 자기완결적이고, 하나의 단위로서 참조되는 콘텐츠를 표현한다. 예를 들어, 아래와 같이 문장 안에 들어있는 이미지에 태그를 사용하는 것은 부적절하다. figcaption - 위 콘텐츠에 대한 설명 문구를 담는 태그이다. figure 요소 안..
