본문 바로가기

Programing/CSS41

한 줄 이상 텍스트가 길어지면 ... 으로 표기하기 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.
유저 프로필 이미지, 텍스트 가운데 정렬 기법 장원영.profile-pic { /* div 동그랗게 */ width: 300px; height: 300px; border-radius: 70%; /* 요소 가운데로 */ display: block; margin: 0 auto;}.user-name { font-size: 40px; letter-spacing: 20px; text-align: center;} img같이 block 속성을 지니고 있지 않은 요소를 가운데 정렬할 때는 display: block으로 바꾸어 주고, margin: 0 auto를 준다. 자동으로 block요소를 갖고 있는 태그들은 div, p, h 등이 있다. 이 태그들은 block을 주지 않고 margin: 0 auto 만 주어도 가운데 정렬 된다. 텍스.. Programing/CSS 2024. 6. 14.

티스토리툴바