[React] fixed로 고정된 위치, 알고 보니 뷰포트 기준
·
React
HTML과 CSS 작업을 하다 보면, 원하는 디자인처럼 잘 되지 않을 때가 정말 많다.혼자서 화면 퍼블리싱과 이벤트 작동 코드를 개발하던 중, fixed 속성을 사용하면서 그 익숙한 좌절감이 다시 찾아왔다.알고 보니, 제가 fixed 속성에 대해 잘못 이해하고 있었던 게 문제였다. fixed는 position 속성 중 하나다. position이란?요소의 위치를 지정하는 방법을 정의하며, 다른 요소나 부모, 뷰포트와의 관계를 설정한다.  position 속성의 종류1. static(기본값)요소가 문서 흐름에 따라 배치된다.부모 요소나 다른 요소에 종속되지 않으며, 위치 조정 속성(top, left 등)을 사용할 수 없다.2. relative요소가 문서 흐름 내에서 본래 위치를 유지하면서 top, right..
[React] React에서 Css module 적용하기
·
React
팀 프로젝트하면서 React에서 화면 퍼블리싱을 하면 꼭 내 화면 css가 망가지는 불편했던점이 있었다.className이나 id에 설정한 이름이 같으면 따로 import를 하지 않았는데도 다른 파일에 전역으로 css가 먹혀서 내 css가 망가져버린다. 그래서 서로 className이나 id에 자기 이름 이니셜을 넣어서 설정하거나 겹치지 않게 아예 길고 복잡하게(?) 설정을 하는 방식으로 진행을 했었다. 나는 이 불편함을 해결할 방법을 찾아본적은 딱히 없고 원래 그런가보다.. 리액트 버그구나.. 하고 넘겼다.이번에 진행하는 프로젝트 팀에서는 팀원 한명이 css를 모듈화하면 겹칠일이 없다고 무언가를 알려주었다.처음에 말로만 설명을 들으니 어떻게 사용하는건지 모르겠어서 팀원에게 작업한 파일을 push 부탁하..