본문 바로가기

Programing/CSS37

호버 시 자연스럽게 커지는 애니메이션 div나 텍스트, 버튼 등에 마우스를 hover 했을 때 자연스럽게 커지는 애니메이션을 넣으면 사용자가 '이 아이템을 클릭했을 때 어떤 이벤트가 있겠구나'라는 생각이 들어 사용자 경험을 증대시킬 수 있다. 필요한 CSS를 열심히 작성하고 아래와 같이 호버 이벤트를 추가한다.cursor: pointer; /* 마우스 호버 시 커서를 클릭 커서로 바꿈 */transition: transform 0.3s ease, box-shadow 0.3s ease; /* 호버 이벤트를 천천히 만듦 *//* 마우스 호버 시 크게 카드를 천천히 키우고 그림자를 만듦 */&:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); Programing/CSS 2024. 6. 26.
한 줄 이상 텍스트가 길어지면 ... 으로 표기하기 const StyledTitle = styled.div` font-size: 25px; font-weight: 800; margin-top: 10px; // 이 아래 설정 참고 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;`; Programing/CSS 2024. 6. 25.
Pure React : Modal Modal 컴포넌트 예제import styled from 'styled-components';const ModalWindow = styled.div` position: fixed; background-color: rgba(0, 0, 0, 0.7); top: 0; right: 0; bottom: 0; left: 0; z-index: 999; visibility: hidden; opacity: 0; pointer-events: none; transition: all 0.3s; &.open { visibility: visible; opacity: 1; pointer-events: auto; } & > div { width: 400px; height: 60vh.. Programing/CSS 2024. 6. 22.
React BootStrap : 화면 중앙에 나타나는 로딩 스피너 인라인 스타일링import { Spinner } from 'react-bootstrap';.. if (isLoading) return ( ); 스피너는 기본적으로 부트스트랩 문서에 있지만, 화면 정중앙 정렬하는 속성이 복잡해서 작성한다.스타일드 컴포넌트로 재사용만약 저 스타일을 여러 군데서 쓸 것 같다거나, 인라인 스타일링이 복잡해서 분리하고 싶은 경우 Styled-components로 정의하고 export 한 후 다른 곳에서 재사용 해도 된다.import styled from 'styled-components';const SpinnerContainer = styled.div` display: flex; justify-content: center; align-items:.. Programing/CSS 2024. 6. 17.
React BootStrap Quick Start 공식 사이트https://react-bootstrap.netlify.app React Bootstrap | React BootstrapThe most popular front-end framework, rebuilt for Reactreact-bootstrap.netlify.app패키지 설치npm install react-bootstrap bootstrapMain.jsx에 부트스트랩 CSS Importimport 'bootstrap/dist/css/bootstrap.min.css';부트스트랩 문서를 보고 필요한 컴포넌트 Import 복붙 사용import Accordion from 'react-bootstrap/Accordion';function BasicExample() { return ( .. Programing/CSS 2024. 6. 16.

티스토리툴바