· dependency 설치 styled-components를 적용하기위해서는 먼저 dependency를 설치해야한다. 사스Sass와 styled-components를 설치해야한다. Sass는 node버전을 맞춰서 설치하는게 좋기때문에 지난번 작성한 포스팅을 참고하면 좋겠다 [React] 여러가지 스타일 적용 방법 기본 CSS, 사스Sass SCSS @mixin 리액트에서 스타일을 적용하는 방법은 정말 다양하다. 그중에서도 요즘에는 styled-component를 많이 사용한다고 하는데 이번 포스팅에서는 리액트에서 사용하는 스타일 적용방법을 정리해보려고 sophiecial.tistory.com yarn add styled-components 또는 npm install styled-components vs..

· Module.css 클래스 이름의 중첩을 방지하기 위해 사용 기존 프로젝트의 css 클래스와 이름이 중복되어도 스타일이 꼬이지 않게 하기 위해서 css파일의 확장자를 .module.css로 만든다. 다른 파일이 같은 클래스명을 사용해도 중첩되지 않는다. 개발자모드로 소스를 보면 클래스명이 '파일명_클래스명__아무말'형식으로 나온다. 모듈 스타일과 일반 css의 차이점을 보기 위해 아래처럼 파일을 생성했다. ModuleStyle.js는 간단하게 스타일이 어떻게 적용되는지만 확인할 수 있는 요소만 몇개 만들어서 클래스명으로 구분했다. 모듈 스타일을 import할때는 위에 3째줄 처럼 참조변수명을 지정해서 import해준다. 11, 14번째 줄 등 클래스명에 적용할때 이 변수를 사용해 적용할 수 있다. i..

리액트에서 스타일을 적용하는 방법은 정말 다양하다. 그중에서도 요즘에는 styled-component를 많이 사용한다고 하는데 이번 포스팅에서는 리액트에서 사용하는 스타일 적용방법을 정리해보려고 한다 목차 · 기본 스타일 · SCSS -------------- 다음포스팅에 이어서... · Module.css · styled-component · 기본 스타일 기본적으로 아무런 dependency 설치 없이 바로 적용할 수 있는 css는 일반적으로 html, css작업했던 것과 유사하게 적용할 수 있다. 15번째 줄처럼 div요소 내부에 style속성을 겹중괄호 {{}}안에 넣어 적용할수도 있고 19번째 줄처럼 코드 가독성을 위해 스타일 객체를 따로 만들어서 적용할수도 있다. 23번째 줄처럼 스타일 css파..