let's get IT with DAVINA 💻

export const ImgBox = styled.div` background-image: ${(props) => `url(${props.img})`}; background-size: cover; background-position: center; height: 20rem; border-radius: 1rem; position: relative; `; ⛔️ Error Issue background-image만 줬더니 사진의 전체 이미지가 담기지 않아서 background-size:cover & background-position: center를 추가하여 이미지가 div의 사이즈에 딱 맞게 배치됨

const ReviewContent = styled.div` text-overflow: ellipsis; //말 줄임표 생략기호 overflow: hidden; //넘어간 부분(글자) 안보여주기 white-space: nowrap; //여러줄 안보이게 하기 `; return ( {review.content} {review.content.length >= 30 ? ( 더보기 {openModal ? ( ) : null} ) : ( "" )} )

Position 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 사용법 기준을 잡는다. (ex. position: relative;) 이동시킨다. (ex. top: 50px;) block : 한 줄 모두 차지 (대표 element - , ) inline : 콘텐츠 크기 만큼만 차지 (대표 element - ) 값 의미 static 기준 없음 (배치 불가능 / 기본값) relative 요소 자기 자신을 기준으로 배치 absolute 부모(조상) 요소를 기준으로 배치 fixed 뷰포트 기준으로 배치 stickey 스크롤 영역 기준으로 배치 Relative 요소를 일반적인 문서 흐름에 따라 배치한다. 요소 자기 자신의 원래 위..

//checkin checkout date 형식 변환 //Wed Apr 20 2022 00:00:00 GMT+0200 => 2022-04-20 export const DateFormat = (d1) => { const date = new Date(d1); const year = date.getFullYear(); const month = ("0" + (1 + date.getMonth())).slice(-2); const day = ("0" + date.getDate()).slice(-2); return `${year}-${month}-${day}`; };

Calender/style.jsx import styled from "styled-components"; export const DatePickerContainer = styled.div` display: flex; input { cursor: pointer; background-color: transparent; width: 100%; height: 65px; border: none; padding: 40px 20px 13px 20px; &:hover { border-radius: 8px; border: 2px solid ${(props) => props.theme.darkBlack}; } } .react-datepicker__day--keyboard-selected, .react-datepicker_..

Styled Components 컴포넌트를 기반으로 css를 작성할 수 있게 도와주는 라이브러리 우리가 알고있는 css를 그대로 사용할 수 있다. css를 컴포넌트 안으로 캡슐화하여 네이밍이나 최적화를 신경 쓸 필요가 없음 비교적 빠른 페이지 로드에 불리 Styled Components 설치법 터미널에서 Styled Components 라이브러리 설치 # with npm $ npm install --save styled-components # with yarn $ yarn add styled-components package.json에 상기 코드 추가 권장 (여러 버전 설치 방지) { "resolutions": { "styled-components": "^5" } } 필요할때마다 import해서 사용 i..