탐구하는 취르미

모바일 기기의 노치(Notch) 디자인과 홈 바(Home Bar)는 iPhone X 디바이스 이후로 흔히 볼 수 있는 특징 중 하나로, 디스플레이의 상단과 하단에 존재하는 공간을 차지합니다. 이러한 특수한 디자인 요소들은 사용자 경험을 향상하기 위해 도입되었지만, 웹 디자이너들에게는 새로운 도전을 제시하고 있습니다. 이러한 도전에 대응하기 위해 CSS의 env() 함수를 활용하여 노치와 홈 바에 대응하는 방법을 알아보겠습니다. 노치(Notch)란? 노치는 주로 모바일 기기의 디스플레이 상단에 있는 공간을 가리키며, 이 공간에는 전면 카메라, 스피커, 센서 등이 위치합니다. 노치 디자인은 기존의 정사각형 또는 직사각형 디스플레이를 벗어나서 디바이스의 윗부분에 작은 노치(Notch) 모양의 공간을 확보하는 ..

CSS의 box-shadow 속성은 그림자 효과를 만들 때 주로 사용됩니다. 그러나 이 속성을 활용하여 선을 그릴 수도 있습니다. 이번 포스트에서는 outline이나 border 속성이 아닌 box-shadow를 사용하여 선을 그리는 방법에 대해 알아보겠습니다. box-shadow 속성 이해하기 box-shadow의 기본값은 none입니다. 이 속성은 수평 오프셋, 수직 오프셋, 흐림 정도, 퍼지는 정도, 색상 등을 지정하여 사용합니다. box-shadow: h-offset v-offset blur spread color inset; h-offset: 그림자의 좌우 위치 설정 v-offset: 그림자의 상하 위치 설정 blur: 그림자의 흐림 정도 spread: 그림자가 퍼지는 정도, 크기 color: ..

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