Frontend/Css2 [Bootstrap] React에 Bootstrap 적용하기 https://chunws13.tistory.com/55 [React] Project Levup - 메모 수정 기능 만들기 이전 작업으로 DB에 저장된 메모를 불러오는 것 까지 확인했다. 백엔드에서 수정및 삭제 기능을 구현했지만, 프론트엔드에서 부드럽게 구현할 수 있도록 구상을 해야했다. 구상 결과 각 메모를 chunws13.tistory.com 가장 기본적인 기능 (메모 CRUD)을 백엔드와 프론트엔드 모두 구현했으므로 이용할 때 보기 좋게 기본적인 스타일링을 진행하려고 한다. 문제는, 본인의 색감이나 구도 잡는 능력 등 스타일링에 관련해서는 별로 좋지가 않다는 점과 css 문서를 만들어서 하나하나 적용하다보면 시간이 매우 오래걸릴 것이라는 우려로 인해 스타일링을 직접 하는 것 보다는 외부 기능을 사용.. 2023. 12. 5. Modal 창 현재 Html 화면 가운데 위치 시키기 .modal_frame { position: fixed; # .modal_fram 속성을 가진 요소를 현재 보고있는 창을 기준으로 고정, 스크롤되어도 따라다님 left: 50%; # 보고 있는 화면 (= 뷰 포트, position이 fixed 이므로) 가로 선 중앙 50%로 이동 top: 50%; # 보고 있는 화면 세로 선 중앙 50% 이동 transform: translate(-50%, -50%); # 요소를 수직 및 수평으로 -50% 만큼 이동 > 최종적으로 화면 정 중앙에 위치 } 위의 코드를 본 후에 top 50%, left 50% 후 각각 tranfrom -50%을 적용하는 대신 각 수치에 100%, -100%를 적용해도 같은 효과를 보일 것이라고 생각하고, 테스트 해봤다. 테스트 해 본 결과.. 2023. 3. 24. 이전 1 다음
