IT/CSS

아래와 같이 가운데로 정렬이 되는데 (첫 번째 이미지처럼) 나는 전체적인 틀은 가운데에 정렬이 되고 list는 왼쪽도 정렬하고 싶었다. (두 번째 이미지처럼) 아래 소스와 같이 하면 잘 작동한다! 👍 ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, max-content)); grid-gap: 16px; justify-content: center; } li { list-style-type: none; border: 1px solid gray; padding: 5px; width: 210px; } https://stackoverflow.com/questions/32802202/how-to-center-a-flex-contai..

css 전처리기 (편리한 문법을 이용해서 css를 작성하고 추후 순수 css로 변환해준다.) 자동으로 모듈화가 가능하여 변수명이 중복되어도 괜찮다. Autoprefixer https://postcss.org/ PostCSS - a tool for transforming CSS with JavaScript Enforce consistent conventions and avoid errors in your stylesheets with stylelint, a modern CSS linter. It supports the latest CSS syntax, as well as CSS-like syntaxes, such as SCSS. postcss.org https://www.postcss.parts/ post..

px 기본적인 단위로 고정된 값 rem 페이지의 최상위 요소(root)의 폰트 사이즈를 기준으로 결정 최상위 요소(root)의 폰트 사이즈 * rem 단위 html { font-size: 10px; } div { width:3em; } div의 width는 10px*3=30px이 된다. em 부모 요소의 폰트 사이즈를 기준으로 자식 요소의 크기가 결정 부모 요소 폰트 사이즈 * em 단위 html { font-size: 10px; } div { width:3em; font-size: 20px; } div의 width는 20px*3=60px이 된다. % 화면에서 차지하는 비중

CSS in JS (스타일 정의를 css파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일) 스타일에 대한 고유한 클래스 이름을 생성 설치 # with npm npm install --save styled-components # with yarn yarn add styled-components ThemeProvider import styled, { ThemeProvider } from 'styled-components'; const Box = styled.div` color: ${(props) => props.theme.color}; `; function App() { return ( I'm red! ); } export default App;