CSS (3) 썸네일형 리스트형 헤더/푸터/레이아웃 작업 (react, postCSS 환경) const Fridge = ({ authService }) => { const history = useHistory(); const onLogout = () => { authService.logout(); }; useEffect(() => { authService.onAuthChange(user => { if (!user) { history.push('/'); } }); }); return ( ); }; 먼저 fridge에 헤더와 푸터를 묶고 있는 박스가 있고 헤더와 푸터 사이에는 컨텐츠가 들어갈 박스가 필요하기때문에 container div를 만들어준다. .fridge { width: 100%; height: 100%; } .container { } 그리고 css에서는 헤더와 푸터를 감싸고 있는 박스를.. PostCSS에서 root로 간편하게 코딩하기 (@value) 프로젝트에서 많이 쓰이는 색상들이 존재하는데 css할 때 이 색상을 하나하나 부르는 것보다 미리 root로 정해줘서 그 값을 부르는게 더 간편하다. 이유는, 만약 색상을 변경해야하는 상황이 온다면 제일 상위 root로 가서 한번만 변경하면 모든 값이 변경되기 때문이다. 먼저 src폴더에서 common이나 base폴더를 만들어준다. 그 안에 ui인지 유틸리티인지 또 폴더로 나누어서 만들어줘도 됨. 그 안에는 colors와 size CSS파일을 만들어준다. @value key: value; 그리고 postCSS에서는 이렇게 value를 사용해서 key와 value로 정의해준다. @value mediaQuery: 62rem; size.css에는 미디어쿼리를 설정해준다. 그럼 나중에 사이즈를 변경할때도 컴포넌트.. CSS Triggers 사이트 Blink 는 크롬과 V8, Gecko는 파이어폭스, WebKit은 iOS 사파리, EdgeHTML은 엣지브라우저 에서 쓰인다. 첫번째 칸은 기본값에서 변화될 때, 두번째 칸은 주기적으로 업데이트 될 때를 나타낸다. 최대한 composite만 일어나는게 좋다. Layout이 일어나면 성능 차원에서 좋지 않음. http://csstriggers.com/ CSS Triggers @PROPERTY_DESCRIPTION@ B G W E Change from default B G W E Subsequent updates csstriggers.com 이전 1 다음
