CSS(22)
-
[CSS] SCSS를 활용한 동적 Spinner 애니메이션 만들기
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..
2024.01.15 -
[CSS] SCSS를 활용한 툴팁(tooltip) 구현해보자! (feat. transform-origin)
툴팁 레이아웃(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..
2024.01.11 -
[CSS] Animation 속성 정리, 참고 사이트 추천
자주 사용하는 속성은 막힘없이 써 내려가지만 헷갈리는 속성들이 있어서, 내용을 정리하는 차원에서 포스팅 시작하겠습니다. 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..
2023.03.24 -
반응형 페이지 작업할 때, 분기점 순서 설정하는 법
반응형(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 이하 */ }
2022.10.12