HTML . CSS . JS

AOS란? 스크롤 애니메이션 라이브러리 소개 웹 페이지를 스크롤할 때 자연스럽게 요소들이 등장하거나 움직이는 애니메이션 효과를 본 적 있을 것이다. 이러한 효과는 사용자 경험(UX)을 높여주며 콘텐츠를 더욱 돋보이게 만든다. AOS(Animate On Scroll)

이번 글에서는 HTML, CSS, JavaScript만을 사용해서배경에 자연스럽게 움직이는 파티클(입자) 애니메이션 효과를 구현하는 과정을 정리한다.웹사이트의 시각적인 매력을 더해주는 배경 입자 효과는 종종 포트폴리오, 랜딩 페이지, 인터랙션 UI 등에서 사용된다.이

프론트엔드 개발을 하다 보면 꼭 마주치는 개념,바로 requestAnimationFrame()과 함수 참조(function)의 차이!이 글에서는 requestAnimationFrame()을 중심으로,함수를 값으로 넘기는 원리와 왜 괄호를 붙이지 않아야 하는지까지 이해해

웹 퍼블리싱을 하다 보면 자주 마주치는 ::before, ::after.이 글에서는 가상 요소의 개념, 사용법, 필수 속성 content, 그리고 실무 예제를 통해 정리해본다.HTML 요소의 앞(before)이나 뒤(after)에 생성되는 "가짜 요소"실제 DOM에는

clamp(min, preferred, max)CSS에서 값의 최소~최대 범위를 지정하면서도 반응형으로 유동 조절할 수 있는 함수.결국 브라우저가 10vw를 기준으로 계산하면서,3rem보다 작아지지 않고 6rem보다 커지지 않도록 조절한다.반응형 타이틀, 버튼, 섹션

JavaScript에서는 문자열을 숫자로 변환할 수 있는 여러 가지 방법이 있다.그 중에서도 가장 간결하고 짧은 방법은 +문자열 형태를 사용하는 것이다.이 표현식은 단항 덧셈 연산자 (Unary Plus Operator) 라고 불린다.\+ 연산자가 숫자 하나에만 사용될

소프트웨어 개발에서 날짜와 시간 데이터는 데이터 계층(Data Layer)에서 다루는 방식과 표현 계층(Presentation Layer)에서 다루는 방식을 명확히 분리해야 함. 이는 데이터의 무결성을 보장하고 시스템 간의 호환성을 유지하며, 사용자에게는 유의미한 정보