8. 컴포넌트 스타일링-1
이름 생성 규칙
1. 컴포넌트 이름-클래스 이름 방식
2. BEM 네이밍 방식
(Block, Element, Modifier)
장점 : 가독성 좋음
단점 : 이름의 길이가 김
Sass
문법적으로 매우 멋진 스타일시트를 의미
css 단점
- 선택자(Selector)를 만들 때 매번 부모 요소 선택자를 넣어줘야 함
- 함수 기능 제공 안해서 중복이 되면 복붙을 해야 함
- CSS 전처리기로 복잡한 작업을 쉽게 할 수 있음
- 스타일 코드의 재활용성을 높임
- 스타일 코드의 가독성을 높여서 유지 보수가 쉬움
mixin : 재사용 가능한 기능을 만드는 방식
$main-font: "Halvetica";
@mixin title($font) {
font-size: 60px;
font-family: $font;
color: red;
}
.header {
@include title($main-font);
}
$main-font &변수명
@mixin 선언
@include 적용
node-sass 라이브러리 및 Compile Hero Pro 플러그인 설치
*전처리기 SCSS ➡Compiler➡CSS
제대로 된 경우 dist폴더가 생성 됨!
.header {
font-size: 60px;
font-family: "Halvetica";
color: red;
}
➡ scss가 css로 변환됨!
SaSS 문법
주석 : 기존 /* */ ➡ // 으로 사용 가능
변수 : $변수명
변수를 특정 선택자 안에서 선언하면 해당 선택자에서만 접근이 가능
➡ let, const와 비슷
// 전역 변수
$primary-color: black;
.container {
// 지역 변수
$primary-color: red;
background-color: $primary-color;
}
.hello {
color: $primary-color;
}
// 전역 변수
$primary-color: black;
.container {
// 지역 변수
$primary-color: red !global;
background-color: $primary-color;
}
.hello {
color: $primary-color;
}
// 전역 변수
$primary-color: black;
.container {
// 지역 변수
$primary-color: red !default;
background-color: $primary-color;
}
.hello {
color: $primary-color;
}
!default; 기존에 가지고 있는 값을 따름!
중첩(Nesting)
.scss
.container {
background-color: lemonchiffon;
ul {
list-style: none;
li {
color: red;
padding: 20px;
}
}
}
➡ 사용하기 편함
&(부모 선택자 참조)
.container {
background-color: lemonchiffon;
ul {
list-style: none;
li {
color: red;
padding: 20px;
&:last-child {
color: blue;
}
}
}
}
&기호 : 부모 선택자를 의미
&:last-child = li:last-child
.scss
.parent {
&-small { font-size: 10px; }
&-medium { font-size: 30px; }
&-large { font-size: 50px; }
}
연산자
.scss
div {
background-color: yellowgreen;
width: 100px + 200px;
height: 300px - 100px;
font-size: 10px * 5;
margin: 50px / 2;
}
.css
div {
background-color: yellowgreen;
width: 300px;
height: 200px;
font-size: 50px;
margin: 50px/2;
}
➡ 나누기를 제외한 사칙연산 사용 가능
나누기 연산 사용 조건
• 값 또는 그 일부가 변수에 저장되어 있는 경우
• 값 또는 그 일부가 함수에 의해 반환되는 경우
• 값이 ()로 묶여 있는 경우
• 값이 다른 산술 표현식의 일부로 사용되는 경우 (기존 사칙연산 우선순위 그대로)
.scss
div {
background-color: yellowgreen;
$x: 400px;
/* 값이 변수에 저장*/
width: $x / 2;
/* 값이 괄호로 묶여 있음*/
height: (100px / 2);
/* 다른 연산과 같이 사용*/
font-size: 10px + 30px / 3;
}
연산자 - 단위 연산
- 절대 단위(px) 연산
- 상대 단위(%, em, vw 등) 연산 ➡ CSS의 calc() 함수로 연산
calc(50% - 20px) 양 옆에 띄어쓰기
9. 컴포넌트 스타일링-2
PostCSS
- CSS를 불러와서 사용할 때 클래스 이름을 고유한 값 형태로 자동으로 만들어 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술
값 형태 : 파일이름_클래스이름_해시값
사용 방법 : 파일이름.module.css
CSSModule.module.css
➡ CSSModule.js
import React from "react";
import styles from "./CSSModule.module.css";
const CSSModule = () => {
console.log(styles);
return (
<div className={styles.container}>
<span className="span">CSS module</span> 실습
</div>
);
};
export default CSSModule;
➡ CSSModule.module.css
.container {
background: black;
padding: 1rem;
font-size: 2rem;
color: white;
}
/* 전역 스타일 */
:global .span {
color: yellow;
font-weight: bold;
}
실행 결과
각각다른 해시값을 만들어줌
콘솔
.module.css
.container {
background: black;
padding: 1rem;
font-size: 2rem;
color: white;
}
:global .globalBtn {
background-color: yellow;
}
1번 파일 css⭕, 2번 파일에는 css ❌
버튼이 노란색인 이유 : 1번 파일에서 버튼의 스타일을 전역으로 해놨기 때문
<button className="globalBtn">
:global
클래스 이름을 두 개 이상 적용하려면
기존 <div className="container title">
🔽
<div className={`${styles.container} ${styles.title}`}>
➡ css
.container {
background: black;
padding: 1rem;
font-size: 2rem;
color: white;
}
.title {
border: 5px solid yellowgreen;
}
:global .span {
color: yellow;
font-weight: bold;
}
➡ scss로 할 경우
.container {
background: black;
padding: 1rem;
font-size: 2rem;
color: white;
&.title {
border: 5px solid yellowgreen;
}
}
:global {
.span {
color: yellow;
font-weight: bold;
}
}
뭐래.. 뭐라는거야 왜!!!!!!!!!! 화나게 하지말아줘.. scss 어제까진 잘 됐잖아!!!!!!!!!!!!!
어제 실습 폴더에 설치되어있던 scss를 다시 설치..🤣
styled-components
자바스크립트 파일 안에 스타일을 선언하는 방식
설치 : $ npm install styled-components
➡ App.js
import React from "react";
import styled from "styled-components";
const App = () => {
const Button = styled.button`
background: ${(props) => (props.primary ? "palevioletred" : "white")};
color: ${(props) => (props.primary ? "white" : "palevioletred")};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
return (
<div>
<Button>Nornal</Button>
<Button primary>Primary</Button>
</div>
);
};
export default App;
CSS Module와 Styled Components 비교
CSS Module : 큰 프로젝트 적합(클래스명 중복 방지)
Styled Components : 하나에서 다 사용 가능하지만 분리가 안됨
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 7주차 블로그 포스팅
