탐구하는 취르미

스크롤바 동작은 유지하면서 스타일을 없애는 방법에 대해 알려드리겠습니다. 대부분의 웹 브라우저는 스크롤바에 대해 일부 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..

툴팁 레이아웃(html) 및 스타일(scss) New 새로운 소식! .wrap { display: flex; justify-content: center; align-items: center; outline: 1px solid red; button { position: relative; } .tooltip{ position: absolute; bottom: calc(-100% - 20px - 6px - 2px); //패딩, 삼각형 높이, 사이 간격 값들 빼기 left: 50%; z-index: 999; transform: translateX(-50%); width: 150px; padding: 10px; border-radius: 4px; background-color: #fff; box-shadow: 0..

유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법에 대해서 알아보겠습니다. iframe 코드 복사하기 데모 영상으로 Google Developers의 영상으로 연습해 보았습니다. 1. 공유 버튼을 클릭합니다. 2. 퍼가기 버튼을 클릭하세요 3. 코드 복사하기가 나옵니다. 복사하셔서 HTML에 붙여 넣기 하시면 됩니다. iframe 반응형 코드 작성하기 퍼가기 허용 체크 여부 영상 게시자가 퍼가기 허용 체크를 비활성화했을 경우 아래와 같이 동영상을 재생할 수 없음으로 보입니다. 해상도에 따라 비율을 구하는 방법 일반적으로 16:9 비율을 많이 사용합니다. 4:3 : 3/4*100 = 75% 16:9 : 9/16*100 = 56.25% 21:9 : 9/21*100 = 42.85% /* ..

자주 사용하는 속성은 막힘없이 써 내려가지만 헷갈리는 속성들이 있어서, 내용을 정리하는 차원에서 포스팅 시작하겠습니다. 1. animation-name : 애니메이션 이름 @keyframes에 애니메이션을 정의할 이름 2. animation-duration : 애니메이션 재생시간 초기값(default): 0s * 초(s), 밀리초(ms) 단위로 설정할 수 있습니다. 3. animation-timing-function : 애니메이션 진행 스타일 초기값(default): ease ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, steps, cubic-beszier 4. animation-delay : 애니메이션 지연시간 초기값(defa..