블로그-V3. css 분리

 

부트스트랩 4 버전을 사용할 것이다.

5는 리액트를 위해 만들어진 것이다.

 

공통적인 css는 따로 빼주고

색깔 관련 css도 따로 빼주는 게 보기 좋다.

 

css 파일에 @import가 가능해서 연결할 수 있다.

 

이제 헤더에는 styles.css 링크만 붙여주면 되겠다.

 

 

 

위젯 단위로 디자인 클래스를 만들고 컴포넌트로 묶어서 클래스로 만들자.

 

이미 만들어둔 클래스를 다른 파일에서 재사용이 안된다.

 

그래서 나온 게 SASS(Syntactically Awesome Style Sheets)!!

 

지금은 재사용할 수 없으니까 다시 지정해줘야 한다.

 

대신 컴포넌트로 묶어서 한방에 지정해주자.

 

 

해당 컴포넌트가 재사용이 되는지 잘 생각하고

재사용이 되면 위젯 여러 개를 컴포넌트에 하나로 만들어주고,

재사용되지 않으면 위젯 하나하나를 클래스로 걸어준다.

 

margin, padding의 사이즈도 여기저기 다 다르게 사용하지 않고 몇 개 지정해서 사용한다.

새로운 사이즈를 추가한다면 size.css에도 추가해줘야 한다.

 

/*
    .m_sm
    .m_md

    .m_lg_1
    .m_lg_2
    .m_lg_3
    
    .ml_lg
    .ml_xl
    .ml_xxl
*/

/* 갭(마진, 패딩) 미디움 사이즈 */
.my_m_md_1 {
    margin: 15px;
}

.my_p_md_1 {
    padding: 15px;
}

/*margin*/
.my_ml_md_1 {
    margin-left: 15px;
}

.my_mr_md_1 {
    margin-right: 15px;
}

.my_mt_md_1 {
    margin-top: 15px;
}

.my_mb_md_1 {
    margin-bottom: 15px;
}

/*padding*/
.my_pl_md_1 {
    padding-left: 15px;
}

.my_pr_md_1 {
    padding-right: 15px;
}

.my_pt_md_1 {
    padding-top: 15px;
}

.my_pb_md_1 {
    padding-bottom: 15px;
}

 

마찬가지로 블로그 타이틀 글자색을 지정해줬으면 color.css에 추가해줘야 한다.

 

/* Background Color */
.my_bg_primary {
    background-color: white;
}

.my_bg_success {
    background-color: rgb(30, 180, 159);
}

.my_bg_active {
    background-color: rgb(255, 85, 68);
}

.my_bg_secondary {
    background-color: rgb(185, 185, 185);
}

/* Text Color */
.my_text_primary {
    color: rgb(25, 25, 25);
}

 

폰트 사이즈를 지정해주기 위해 font-size.css를 만들면 제일 처음 style.css에 걸어줘야 한다.

헤더에 따로 안 걸어줘도 되게!

 

.my_lg_font {
    font-size: 30px;
}

 

/* style.css */
@import url("common.css");
@import url("color.css");
@import url("size.css");
@import url("font-size.css");

 

여기서 중요한 것은 컴포넌트를 만들 때 얘가 재사용되냐 안되냐가 중요한 것이다.

 

한번 쓰고 버릴 거면 컴포넌트를 만드는 게 아닌 위젯 2개를 클래스에 걸어주면 되고,

재사용이 가능하면 하나의 컴포넌트로 만들어 클래스에 걸어준다.

 

 

---

 

 

common.css에 만든다는 것은 모든 페이지에 공통적으로 사용되는 디자인이라는 것이다.

해당 페이지에만 사용한다면 a.css에만 만들어서 적용시키자.

 

 

 

 

fontawesome 아이콘을 사용하기 위해서 아래 코드를 헤더에 추가해줘야 한다.

<script src="https://kit.fontawesome.com/6b3377d2bb.js" crossorigin="anonymous"></script>

 

 

 

css에는 BEM이라는 네이밍 규칙이 있다.

따로 공부해보자! 

 

 

 

 

 

[출처]

 

https://cafe.naver.com/metacoding

메타코딩 : 네이버 카페

메타 코딩 유튜브

https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

메타코딩