CSS 2

Safari에서 깨지는 CSS 해결

정말 중요한 기획의 퍼블리싱을 맡게 되었습니다. 전 페이지의 퍼블리싱을 끝내고 다음 주 월요일이 배포인데 문제가 생겼습니다. 바로 Chrome에서는 정상 작동하는 CSS가, Safari에서는 정상 작동하지 않는 아주 절망적인 상황이 벌어졌습니다. 먼저 시간이 없기 때문에 문제 해결을 위해 이전에 작성해 두었던 코드를 분석해 본 결과 .commonBookingStep1PopUpRequestTimeWrapper { font-size: 0.8rem; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1rem; color: #000; > :nth-child(1) { span { color: #d10023; } } > :nth-child(2) {..

지식 정리 📝 2024.02.22

custom react-DatePicker with styled-component

오늘은 실무에서 DatePicker를 사용할 일이 생겼다. 프로젝트가 babel로 구성된 프로젝트여서 mui datepicker는 사용하지 못하였기에 근본 DatePicker를 이용하였는데 문제는 DatePicker에 사이즈를 키우고 위치를 조정하고 싶은데 변경이 쉽지 않았다. 그래서 굉장히 고생 끝에 일일이 css를 수정하는 방법을 택하였다. 먼저 DatePicker를 설치해 줍니다. npm install react-datepicker 이후 쉽게 말씀드리면 DatePicker를 클릭했을 때 팝업창이 DatePicker가 속한 부모요소 제일 끝 자식으로 들어가기 때문에 이 개념을 꼭 알고 css를 적용하면 쉽습니다. import React, { useState } from "react"; import D..

카테고리 없음 2023.07.12