[React] 여러가지 스타일 적용 방법 기본 CSS, 사스Sass SCSS @mixin

리액트에서 스타일을 적용하는 방법은 정말 다양하다. 그중에서도 요즘에는 styled-component를 많이 사용한다고 하는데 이번 포스팅에서는 리액트에서 사용하는 스타일 적용방법을 정리해보려고 한다

 

목차
· 기본 스타일
· SCSS
-------------- 다음포스팅에 이어서...
· Module.css 
· styled-component

 

 

· 기본 스타일

기본적으로 아무런 dependency 설치 없이 바로 적용할 수 있는 css는 일반적으로 html, css작업했던 것과 유사하게 적용할 수 있다.

 

 

15번째 줄처럼 div요소 내부에 style속성을 겹중괄호 {{}}안에 넣어 적용할수도 있고

19번째 줄처럼 코드 가독성을 위해 스타일 객체를 따로 만들어서 적용할수도 있다.

23번째 줄처럼 스타일 css파일을 따로 만들어서 요소명이나 클래스명으로 스타일을 적용할수도 있다.

 

 

아래와 같이 잘 적용된다

위와같이 기본적인 스타일적용 방법중에서는 개인적으로 아무래도 세번째 방법이 가장 익숙하고 편리하다.

리액트페이지 내에서 스타일을 적용할경우에 카멜방식표기와 대부분의 값들을 따옴표로 묶어줘야한다는게 조금 귀찮다.

 

 

반응형

· SCSS(Sass)

 

기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다

 

들어가기에 앞서 잠깐 살짝 개념 설명...

 

Sass는 CSS preprocessor, 한국말로 번역하면 CSS 전처리기다. CSS가 동작하기 전에 사용하는 기능으로 프로젝트의 규모가 커지면 CSS도 복잡해지는데 이러한 불편함을 해소할 수 있는 여러가지 확장기능들이 있다고 한다. 

 

설치는 Sass인데 파일 확장자는 왜 SCSS일까?
Sass는 처음에 들여쓰기의 감지를 그 핵심 특성으로 갖는 구문을 가리켰습니다. 얼마 지나지 않아, Sass를 유지하는 사람들은 Sassy CSS를 의미하는 SCSS라는 CSS친화적인 구문을 제공함으로써 Sass아 CSS의 사이의 차이를 좁히기로 결정했습니다. 그 후로, Sass(전처리기)는 두가지 다른 구문을 제공해오고 있습니다. 들여쓰기 구문으로도 알려진 Sass, 그리고 SCSS. 둘은 정확히 동등한 기능을 갖고 있기 때문에 어느 것을 사용할지는 여러분에게 달렸습니다. 지금 시점에서는 이것은 순전히 미관상의 문제입니다

 

Sass Guidelines — Korean translation

 

그렇다 Sass = SCSS란다.둘의 가장 큰 차이점은 Sass는 들여쓰기로만 구분하고 SCSS는 CSS와 마찬가지로 중괄호{}와 세미콜론을 사용한다는 것이다. 강사님 말씀과 여러 리뷰를 보니 Sass 들여쓰기에 민감해 쉽게 에러가 생길 수 있어 많은 개발자들이 SCSS를 더 선호하는 것 같다.

 

 

그럼 본격적으로 설치해보자.

 

리액트에서 SCSS스타일을 사용하기 위해서는 Sass dependency를 먼저 설치해야 한다.

잠깐! 설치전에 한번 확인하면 좋은것이 node.js 버전과 맞는 sass를 설치해야 한다는 것!

https://www.npmjs.com/package/node-sass

안맞는 버전으로 잘못설치했다가 remove하고 cache clear하고 다시 설치한 사람 나야나....ㅋㅋㅋㅋㅋㅋㅋ

 

yarn add node-sass

또는

yarn add sass

또는

npm install -g sass

 

 

설치후 바로 scss파일을 만들어 적용할 수 있다. 

 

 

예시를 뭐로 할까 하다가 요즘 읽고 있는 소설책 <홍천기> 책 정보를 보여주는 화면을 대략적으로 만들었다

 

import React from 'react';
import './Scss.scss'; //SCSS연결

const Scss = () => {
    return (
        <div className="wrap">
            <a href="#">                
                <div className="img_wrap">
                    <img src="http://image.kyobobook.co.kr/images/book/large/191/l9788963719191.jpg" alt="책이미지"/>
                </div>
                <div className="content_wrap">
                    <ul>
                        <li><span>저자</span> : 정은궐</li>
                        <li><span>출판사</span> : 파란미디어</li>
                        <li><span>정가</span> : 15000원</li>
                        <li><span>줄거리</span><br/>
                        《홍천기》는 주인공의 이름이자 ‘붉은 하늘의 기밀(紅天機)’이라는 뜻을 담고 있다. 
                        조선 초, 백유화단의 천방지축 열정의 여화공 홍천기(洪天起)는 동짓날 밤, 하늘에서 떨어진 남자를 줍게 된다.
                        이 세상 사람이 아닌 듯 고운 외모에 기분 좋은 향내가 나는 남자를 보며 어머니의 말을 떠올린다. 
                        그녀의 어머니는 시집 못 간 딸에게 배필 하나만 내려 달라고 기도를 드렸다고 했다. 
                        홍천기는 그가 하늘이 내려 준 자신의 남자라 믿는다.</li>
                    </ul>
                </div>
            </a>
        </div>
    );
};

export default Scss;

 

아직 깊게 사용해보지 않아서 잘 모르겠지만 일단 색깔을 저렇게 변수로 만들어서 쓸 수 있다는게 정말 편리한 것 같다. 웬만하면 웹이던 앱이던 메인컬러가 있을텐데 그걸 이렇게 딱 박아놓고 시작하면 작업하기 정말 수월할듯!

 

 

hover나 선택자를 적용하는게 css랑 달라서 아직은 조금 헷갈리긴하다.

728x90

$main_mint: #E1EFDE;
$main_purple: #8A82BD;

.wrap{
    width: 600px;
    height: 340px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid $main_purple;

    a{
        display: flex;
        justify-content: space-around;
        color: #333;
        text-decoration: none;

        .img_wrap{
            width: 200px;
            
            img{
                width: 200px;
                transition: 0.5s;
                &:hover{
                    transform: scale(1.07);
                }
            }
        }

        .content_wrap{
            width: 320px;
            background: $main_mint;

            ul{
                margin:0;
                padding-left:10px;
                padding-right:10px;
                list-style:none;
                
                li{
                    span{
                        font-weight: bold;
                    }
                    
                }:last-child{
                    font-size: 14px;
                    line-height: 22px;
                }
            }
        }
    }
}

위 코드대로 만들어진 화면이 아래

 

SCSS 믹스인@Mixin

 

이것말고도 SCSS에서는 반복적으로 사용하는 구문을 함수처럼 묶어놓은 mixin이라는 유용한 기능이 있다.

 

예제가 조금 형편없긴하지만..;;

이렇게 여러개의 형제박스들을 각각 다른 인자를 받아 너비를 값을 각각 다르게 주고 싶을때 적용할 수 있다. 

 

 

계속 써왔던게 기본 CSS라 아직은 CSS가 훨씬 더 익숙하긴 하지만 스타일 작업하면서 아쉬웠던 부분들도 있긴했다.

그런데 SCSS에서는 연산자도 사용할 수 있고 함수까지 쓸 수 있다니 언빌리버블!

 

이렇게 감동해놓고 막상 사용안하면 금방 까먹을 것 같지만...ㅠ 뭐 그때를 대비해서 이렇게 정리하고 있는거니까^^*

 

@mixin myMixin($size) {
    $width: 50px;
    @if $size %2 == 0{
        $width : $width + 50
    }@else if $size %3 ==0 {
        $width : $width + 100
    }@else{
        $widht : $width
    }
    
    width : $width;
    height: 30px*2; //연산가능
}

.boxWrap{
    margin-top: 20px;
    width: 600px;
    display: flex;
    justify-content: space-between;
    .box{
        text-align: center;
        &.red{background: red; @include myMixin(2)}
        &.orange{background: orange; @include myMixin(3)}
        &.yellow{background: yellow; @include myMixin(1)}
        &.green{background: green; @include myMixin(4)}
    }
}

 

 

 

아... 원래 styled-components랑 module.css도 같이 정리하려고 했는데 생각보다 글이 너무 길어져서 이번글은 여기서 줄이고 따로 나눠야겠다. 

 

 

React 모듈css Module css

[React] 여러가지 스타일 적용방법 모듈 Module.css

 

React 스타일드 컴포넌트 Styled Component

[React] 여러가지 스타일 적용 방법 스타일 컴포넌트 styled-components