React 스타일링을 하는 데에는 많은 방법이 있고 오늘은 그것에 대해 공부했다.

CSS import

그 중 하나가 css파일을 import해서 사용하는 것이다. 필요한 스타일을 하나의 파일에 작성하고 그것을 import하는 것이다.
이것에 장점은 단순히 CSS 파일만 import하여 사용하면 되서 편리하고, 컴포넌트가 많지 않을 경우 하나의 CSS파일에 코드를 관리할 수 있는 점이다.
단점으로는 CSS파일은 분리할 수 있으나, namespace를 나눌수 없고, 만일 스타일이 겹칠 경우 마지마에 나온 룰이 덮어쒸져서 요소 이름을 정할 때 신중하게 해야 된다.

import 'button.css'

import Button from './Button'

CSS module

하나의 CSS module 파일 안에 작성한 스타일은 하나의 파일 namespace로 관리하는 방법이다. class name 뒤에 겹치지 않는 hash를 붙임으로써 앞서 말한 import 방법에 단점인 class name이 겹치는 문제가 발생하지 않는다. class name이 두 단어 이상이면 camelCase 방식으로 이름을 지어야 한다.

import styles from "./input-with-button.module.css";

CSS-in-js

별도의 CSS파일을 만들지 않고 하나의 컴포넌트 파일 안에서 스타일을 작성. React 컴포넌트를 사용하는 것 처럼 사용. Sass문법 또한 활용 가능하다.

import styled from "styled-components";
const Container = styled.div`
	background: rgba(0,0,0,0.05);
    margin: 10px;
`;
function InputWithButton(){
	return (
    	<Container></Container>
    )
}

CSS Box Model

CSS layout의 기본이 되는 모델로 content-box, padding-box, border-box, margin-box 순으로 감싸고 있다.
box 타입은 inline,block 두 가지가 있다

CSS Position

• static: position의 default 값으로, element는 normal flow를 따라 위치
• relative: normal flow를 따라 위치하되, 자기 자신에 상대적으로 위치
• absolute: normal flow에서 벗어나 가장 가까운 ancestor에 상대적으로 위치
• fixed: normal flow를 벗어나 viewport에 상대적으로 위치
• sticky: normal flow에 따라 위치하되, 가장 가까운 scrolling ancestor에 상대적으로 위치

CSS Units

• [px, pt, cm, in] : 절대적인 길이를 표현하는 unit
• [rem, em, %] : 특정 값에 상대적인 길이를 표현하는 unit
• [vw, vh, vmin, vmax] : viewport에 상대적인 길이를 표현하는 unit

Sass

SCSS, Sass 문법을 지원하며 모듈, 믹스인, nested style, 변수, 조건문, 반복문 등의 기능으로 CSS 프로그래밍 언어적으로 활용하도록 확장

.reset-button{
	&.active{}
    &:hover {}
    &:not(:first-of-type) {}
    & > button {}
}

&는 자기 자신을 나타내는 placeholder이다

$color-red: red;
$color-white: #fff;
.reset-button{
	color: $color-red;
    &:hover {
    	color: $color-white;
    }
}

믹스인, parial 와 함께 Sass가 제공하는 코드 관리 방법

$color-red: red;
$color-white: #fff;
.reset-button{
	color: $color-red;
    &:hover {
    	color: $color-white;
    }
    &:not(:first-of-type) {}
}

별도의 class를 정의할 필요 없이, 하나의 block 안에 여러 CSS를 적용할 수 있는 방법