탐구하는 취르미

스크롤바 동작은 유지하면서 스타일을 없애는 방법에 대해 알려드리겠습니다. 대부분의 웹 브라우저는 스크롤바에 대해 일부 CSS 스타일을 지원하므로, 스크롤바를 숨기거나 사용자 정의할 수 있습니다. 스크롤바는 어떠한 경우에 노출되는가? 스크롤바는 HTML 문서의 내용이 화면에 표시되는 공간을 벗어날 때 자동으로 생성됩니다. 웹 페이지에 표시되는 내용이 화면에 모두 보이지 않아 추가적인 내용을 볼 필요가 있을 때, 브라우저는 스크롤바를 생성하여 사용자가 스크롤하여 추가 콘텐츠에 접근할 수 있도록 합니다. 또한, 요소 내의 콘텐츠가 요소의 크기를 초과하는 경우에도 스크롤바를 생성할 수 있습니다. 이렇게 하면 사용자가 요소 내의 모든 콘텐츠를 스크롤하여 확인할 수 있습니다. 스크롤바 스타일을 삭제하는 이유 웹브라..

CSS를 활용하여 overlay(오버레이) 및 toast(토스트) 팝업에서 dim(딤) 영역을 자연스러운 전환효과를 처리하는 방법에 대해서 알아보겠습니다. 이를 위해 opacity와 pointer-events 속성을 적절히 활용하여 부드럽게 전환할 수 있습니다. HTML 팝업 버튼 닫기 본문 내용 SCSS display:none/block; 처리는 해당 요소를 화면에서 완전히 감추어 레이아웃에 포함시키지 않습니다. 따라서, 애니메이션과 트랜지션 효과를 적용할 수 없습니다. opacity 및 pointer-events 요소는 레이아웃에는 여전히 존재하면서, 투명도와 이벤트 처리를 통해 나타내거나 감출 수 있습니다. 이를 통해 부드러운 애니메이션 및 트랜지션 효과를 적용할 수 있는 것이 핵심입니다. * ..

Spinner는 주로 웹이나 애플리케이션에서 비동기 작업이나 데이터 로딩이 진행 중임을 사용자에게 시각적으로 알리기 위해 활용됩니다. Spinner의 UI를 제공함으로써 사용자 경험을 향상하고 사용자에게 어떤 일이 발생하고 있는지 명확히 전달하는 데 유용합니다. SCSS를 활용하여 동적 Spinner 애니메이션 만들어봅시다. HTML 구조 설정 SCSS 기본적인 스타일 .wrap { position: relative; width: 100%; height: 100vh; border: 1px solid red; .spinBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 80..

프로젝트 생성 초기 폴더 구조 Vite로 프로젝트 생성 시, 초기 폴더 구조입니다 1. SASS를 설치하기 npm i sass -D package.json 파일에 sass가 설치되어 있는 것을 확인할 수 있다 SCSS로 스타일을 작성할 것이므로, 필요 없는 css파일 삭제하고 scss 파일 추가하기 style.css style.scss touch style.scss 3. 필요 없는 파일들 삭제하고 main.js에 추가한 style.scss를 가져오기(import) javascript.svg counter.js public/vite.svg 4. 스타일 초기화를 위해 reset.scss를 추가하면서, 일부 폴더 구조를 변경했다 스타일 파일은 한 곳에 묶어두는 것이 좋다 main.js에 style.scss 경..