본문 바로가기

Front-End/CSS4

scroll-behavior 브라우저가 유저의 페이지 스크롤을 어떻게 동작시킬지 명시한다. value 타입- smooth : 부드러운 스크롤. - auto(or instant) : 부드러운 효과 없이 즉시 스크롤. default 값. https://developer.mozilla.org/ko/docs/Web/CSS/scroll-behavior 스크롤 동작 - CSS: Cascading Style Sheets | MDNscroll-behavior CSS 속성은 문서 탐색 또는 CSSOM 스크롤 API에 의하여 스크롤이 트리거될 때 스크롤을 포함하는 박스의 동작을 설정합니다.developer.mozilla.org 2024. 7. 8.
브라우저 기본 CSS 스타일 초기화 : Reset CSS https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're intermeyerweb.com 브라우저별로 기본 CSS 설정이 다른 부분을 해주는 소스 2024. 7. 7.
Parallax scrolling : Javascript VS CSS 구현 JavascriptCSS- 움직임 등에 대해 보다 직접적인 통제가 가능.즉, 구현 자유도가 높음- 사용자 인풋에 따르는 등 복잡한 인터렉션, 애니메이션도 구현 가능- 하고자 하는 인터렉션 요소에 따라 웹 성능에 지장을 줄 수 있음- 유저 인풋 등과 관계된 인터렉티브가 필요한 경우에 적합- 가볍고 효율적임- 직접 조작 가능한 인터렉티브 요소가 제한적임- 비교적 간단한 인터렉티브 요소 적용에 적합 2024. 7. 6.
CSS perspective 해당 요소의 z=0 평면과 사용자 사이의 거리를 정의transform 효과를 주고자 하는 부모 요소에 적용perspective 에 따른 변형 효과perspective 가 클 수록,(거리가 멀 수록) 변형 효과가 적음persepctive 가 작을 수록,(거리가 가까울 수록) 변형 효과가 큼 2024. 7. 6.