탐구하는 취르미

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..

자주 사용하는 속성은 막힘없이 써 내려가지만 헷갈리는 속성들이 있어서, 내용을 정리하는 차원에서 포스팅 시작하겠습니다. 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..

반응형(responsive) 페이지 작업할 때, css에서 미디어 쿼리(media query) 분기점(breakpoint) 작성 순서입니다 분기점은 해당 프로젝트에 맞게 설정하시면 됩니다 Mobile First 작은 너비 순으로 시작 @media screen and (min-width: 768px) { /* 768px 이상 */ } @media screen and (min-width: 1024px) { /* 1024px 이상 */ } Desktop First 넓은 너비 순으로 시작 @media screen and (max-width: 1023px) { /* 1023px 이하 */ } @media screen and (max-width: 767px) { /* 767px 이하 */ }