웹/CSS, Sass 썸네일형 리스트형 [React] 리액트의 스타일링: CSS 모듈과 스타일드 컴포넌트 리액트로 작업을 할 때, 컴포넌트 단위로 스타일을 적용하고 싶다면 쓸 수 있는 방법이 몇 가지 있다. 여러 라이브러리, 프레임워크 등등... 그 중 기존의 CSS만 알아도 쉽게 사용할 수 있는 CSS 모듈과 스타일드 컴포넌트(styled-components)에 대해 알아보자. 1. CSS Module ✔CSS에서: 파일의 이름을 파일명.module.css의 형식으로 한다. ✔리액트에서: import styles from '파일명.module.css'; 로 불러와 적용한다. ⭕장점: 자체적으로 고유 해시값을 붙인 클래스를 생성해주기 때문에, 동일 프로젝트 내에서 CSS클래스의 이름 중복이 가능 → 따라서 네이밍 규칙이 간소화됨. 🚫단점: CSS파일의 수가 많아져 관리가 번거로워질 수 있음. 예시 코드 /*.. 더보기 [CSS 방법론] BEM CSS파일과 내용이 많을수록 신경써야하는 부분이 CSS의 구조와 작명 방식이다. 특별한 기준없이 멋대로 작성했다간 꼬인 우선순위를 보며 골치아프게 파일들을 왔다갔다 오가게 된다. 이런 이유로(협업 시 동일한 규칙을 사용하기 위함도 있다) 사람들이 CSS를 작성할 때 방법론을 사용하는데, 그중 하나가 BEM이다. CSS내에서만 통용되는 규칙은 아니고... 본래는 좀 더 넓은 의미로 사용되는 개념이다. 다만 여기서는 CSS에서 어떻게 사용되는지에 대해서만 얘기하도록 한다. BEM은 Block Element Modifier의 약자로, 약자 그대로 Block과 Element와 Modifier로 요소를 구분해 작명하는 방식이다. 다음과 같은 특징을 가진다. - class만 사용한다. - 클래스 이름을 지을 때, .. 더보기 [Sass/SCSS] SaSS와 SCSS의 개념과 차이, 기본적인 사용 얼마 전에 블로그 포스팅 스터디에 참가했다. 무엇을 포스팅해볼까 고민하다가, 일전에 파일 수가 많은 프로젝트를 하면서 다수의 CSS파일 관리에 애먹었던 일이 생각이 나 이번 기회에 SCSS를 공부하기로 했다. 개념자체를 애매하게 알고 있었기도 하지만, 얼핏 Sass와 SCSS중에 후자를 더 많이 쓴다고 들었던 것 같아서 SCSS를 먼저 찾아보기로 했다. 그런데 검색해보니, SCSS는 마땅한 공식 사이트 같은게 안보이고 Sass만 검색결과에 나왔다. 왜 그런가 하고 봤더니... 📖 Sass, SCSS? 알고보니 Sass가 Sass와 SCSS 둘 모두를 통칭하는 말이였다. 기본적으로 둘 다 CSS의 확장 언어로, 일부 차이가 있으나 문법이 거의 비슷하다. - Sass: Syntactically Awesome.. 더보기 이전 1 다음
