안녕하세요~ totally 개발자입니다. style-loader, css-loader 이 2개를 설정해서 CSS 파일을 사용해보도록 하겠습니다. Step 1: 터미널에 다음을 입력해줍니다. Step 2: webpack.config.js 파일을 열어서 다음 내용을 추가해줍니다. Step 3: src 폴더 내에 styles.css 파일을 생성하고 다음처럼 넣어줍니다. Step 4: import './styles.css'; 해주면 됩니다. Step 5: yarn start로 테스트해서 되는 지 확인합니다.

안녕하세요~ totally 개발자입니다. 오늘은 HTML과 CSS를 활용해서 Grid를 적용해보는 방법에 대해 살펴보도록 하겠습니다. 먼저 기본적으로 grid를 형성하는 방법에 대해 살펴보겠습니다. 여기에서는 쉬운 예제를 위해 inline CSS로 진행했습니다. 아래 코드처럼 container 클래스의 div 태그와 그 안에 product 클래스의 제품 6개 div 태그들을 넣어주었고 9번째부터 19번째 줄까지 CSS 코드를 작성해주었습니다. 여기에서 중요하게 적용해야 하는 CSS는 아래 표로 정리했습니다. display flex, grid, inline, block 등 속성을 가지고 있으며 flex와 grid의 차이는 flex는 1차원, grid는 2차원으로 flex는 세로 또는 가로 방향 한 방향만 ..