본문 바로가기
CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브
Tutorial/youtube

04. 나만의 유튜브 사이트 만들기 : SCSS 셋팅하기

by @webstoryboy 2023. 8. 30.
Tutorial/Portfolio

나만의 유튜브 사이트 만들기

by @webs 2023. 09. 01.
04
나만의 유튜브 사이트 만들기 : SCSS 셋팅하기
난이도 중간
소스 다운로드
완성 화면 완성 코드 영상 보기

소개

안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 합니다. 그럼 한번 시작해볼까요? 🥳

인덱스

  • 1. 셋팅하기
    • 1_1. Node.js 설치
    • 1_2. Vscode 설치
    • 1_3. React.js 설치
  • 2. 라이브러리 설치하기
    • 2_1. 폴더 정리하기
    • 2_2. 라이브러리 설치하기
  • 3. Git 연동하기
    • 3_1. 저장소 만들기
    • 3_2. 모든 파일 올리기
    • 3_3. 깃 상태 확인하기
  • 4. SCSS 셋팅하기
    • 4_1. SCSS 설정하기
    • 4_2. style.scss 설정하기
    • 4_3. fonts.scss 설정하기
    • 4_4. vars.scss 설정하기
    • 4_5. reset.scss 설정하기
    • 4_6. mixin.scss 설정하기
    • 4_7. common.scss 설정하기

4. SCSS 셋팅하기

1_1. SCSS 설정하기

이번에는 CSS 설정을 해보겠습니다. 리액트에서 CSS를 사용하는 방법은 다양합니다. 일반적인 CSS 사용, module.css, CSS-in-JS, CSS 프레임워크 등을 사용하는 방법 등이 있습니다. 우리는 scss를 통해 제작을 해보겠습니다. 여러가지 방법을 다 사용하면 좋겠지만, 저희는 가장 기본이되는 방법을 사용하고 기회가 된다면 다른 방법도 사용해보겠습니다.

src에 assets 폴더는 다음과 같이 설정하겠습니다.

  • assets
    • fonts
    • img
    • scss
      • section
      • setting
        • _common.scss
        • _fonts.scss
        • _mixin.scss
        • _reset.scss
        • _vars.scss
      • style.scss

SASS는 Syntactically Awesome Style Sheets의 약자로, CSS의 확장된 문법을 제공하여 스타일 시트 작성을 더욱 효율적으로 만들어주는 CSS 전처리기입니다. SCSS는 일반 CSS와 호환되기 때문에 기존의 CSS 코드를 그대로 사용할 수 있습니다. SCSS는 SASS의 다음 버전이며, 약간의 문법 차이가 있지만 SCSS가 좀 더 넓은 범용성과 CSS의 호환성의 장점을 가집니다. 큰 차이점은 SASS는 중첩으로 들여 쓰기를 사용하고 속성 구분은 줄 바꿈을 이용하지만, SCSS의 경우 중괄호로 중첩을 표현하고 세미콜론으로 속성을 구분합니다. 결론적으로 SCSS는 기존의 CSS 문법을 확장하여 보다 강력하고 유용한 기능을 제공하는 동시에, 웹 개발자가 스타일링 작업을 더 효율적으로 수행할 수 있도록 도와줍니다. https://sass-lang.com/ 자세한 부분은 여기서 확인할 수 있습니다.

  • 변수 (Variables): SCSS에서는 변수를 사용하여 색상, 글꼴, 간격 등을 정의하고 재사용할 수 있습니다. 이를 통해 일관된 디자인을 유지하고 스타일링 작업을 단순화할 수 있습니다.
  • 중첩 (Nesting): SCSS에서는 선택자를 중첩하여 코드를 더 구조화하고 가독성을 높일 수 있습니다. 중첩된 구조를 사용하여 부모/자식 요소 관계를 명확하게 표현할 수 있습니다.
  • 믹스인 (Mixins): 믹스인은 스타일의 모듈화를 가능하게 해주는 기능입니다. 반복적으로 사용되는 스타일 코드 블록을 함수처럼 정의하고 재사용할 수 있습니다.
  • 확장 (Extend): 확장은 하나의 선택자에서 다른 선택자로 스타일을 상속할 수 있는 기능입니다. 이를 통해 스타일 규칙의 중복을 피하고 코드의 양을 줄일 수 있습니다.
  • 연산 (Operations): SCSS는 수학 연산을 지원하여 값들을 계산하거나 조작할 수 있습니다. 이를 통해 여러 속성 값을 계산하여 사용하는 등의 작업이 가능합니다.

1_2. style.scss 설정하기

scss에 style.scss 파일은 다음과 같이 설정하겠습니다. 

@charset "UTF-8";

// setting
@import "setting/fonts";
@import "setting/vars";
@import "setting/reset";
@import "setting/mixin";
@import "setting/common";
  • @charset "UTF-8"; : 이 부분은 문서의 문자 인코딩을 설정하는 것으로, 해당 SCSS 파일의 문자 인코딩이 UTF-8임을 나타냅니다.
  • @import "setting/fonts"; : 폰트 파일과 관련된 CSS를 설정합니다.
  • @import "setting/vars"; : 변수와 관련된 CSS를 설정합니다.
  • @import "setting/reset"; : 브라우저 스타일 초기화나 리셋 관련 CSS를 설정합니다.
  • @import "setting/mixin"; : 믹스인과 관련된 CSS를 설정합니다.
  • @import "setting/common"; : 공통적인 CSS 스타일을 설정합니다.

UTF-8은 "Unicode Transformation Format - 8-bit"의 약자로, 다양한 문자와 문자열을 컴퓨터에서 표현하기 위한 문자 인코딩 방식 중 하나입니다. Unicode는 전 세계의 모든 문자를 고유한 코드 포인트로 나타내는 국제 표준입니다. 이를 컴퓨터에서 저장하고 전송하기 위해서는 효율적인 방식이 필요한데, 그 역할을 하는 것이 UTF-8입니다.

1_3. fonts.scss 설정하기

scss에 fonts.scss 파일은 다음과 같이 설정하겠습니다. 폰트는 웹폰트를 이용하여 작업하겠습니다. 넥슨고딕Lv1 폰트와 나눔스퀘어네오 폰트를 사용하여 제작할 것입니다. 폰트는 해당 사이트에서 다운을 받아서, woff 또는 woff2 포맷으로 변경하여 사용하여야 합니다. 폰트 파일은 fonts 폴더에 넣어놓고 연동하겠습니다. 

@font-face {
    font-family: "nexonLv1";
    font-weight: 100;
    font-style: normal;
    src: url("../../fonts/nexonLv1-Light.woff2") format("woff2"),
         url("../../fonts/nexonLv1-Light.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "nexonLv1";
    font-weight: 400;
    font-style: normal;
    src: url("../../fonts/nexonLv1-Regular.woff2") format("woff2"),
         url("../../fonts/nexonLv1-Regular.woff") format("woff");
    font-display: swap;
} 
@font-face {
    font-family: "nexonLv1";
    font-weight: 700;
    font-style: normal;
    src: url("../../fonts/nexonLv1-Bold.woff2") format("woff2"),
         url("../../fonts/nexonLv1-Bold.woff") format("woff");
    font-display: swap;
} 
@font-face {
    font-family: "nanumSquareNeo";
    font-weight: 300;
    font-style: normal;
    src: url("../../fonts/nanumSquareNeo-Light.woff2") format("woff2"),
         url("../../fonts/nanumSquareNeo-Light.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "nanumSquareNeo";
    font-weight: 400;
    font-style: normal;
    src: url("../../fonts/nanumSquareNeo-Regular.woff2") format("woff2"),
         url("../../fonts/nanumSquareNeo-Regular.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "nanumSquareNeo";
    font-weight: 700;
    font-style: normal;
    src: url("../../fonts/nanumSquareNeo-Bold.woff2") format("woff2"),
         url("../../fonts/nanumSquareNeo-Bold.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "nanumSquareNeo";
    font-weight: 800;
    font-style: normal;
    src: url("../../fonts/nanumSquareNeo-ExtraBold.woff2") format("woff2"),
         url("../../fonts/nanumSquareNeo-ExtraBold.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "nanumSquareNeo";
    font-weight: 900;
    font-style: normal;
    src: url("../../fonts/nanumSquareNeo-Black.woff2") format("woff2"),
         url("../../fonts/nanumSquareNeo-Black.woff") format("woff");
    font-display: swap;
}

웹폰트(Web Fonts)는 웹 페이지에서 특정 폰트를 서버에서 다운로드하여 사용할 수 있게 해주는 기술입니다. 사용자 컴퓨터에 해당 폰트가 없더라도 다운로드 받아서 바로 사용할 수 있습니다.

웹 폰트 포맷은 웹 페이지에서 사용되는 폰트를 브라우저가 이해하고 렌더링할 수 있는 형식으로 변환하는 포맷입니다. 웹 페이지에서 특정 폰트를 사용하려면 해당 폰트를 사용자의 브라우저로 전달해야 하기 때문에, 이러한 웹 폰트 포맷이 필요합니다. 다양한 웹 폰트 포맷이 개발되었으며, 각각의 포맷은 특정한 용도와 기능을 가지고 있습니다.

4가지 폰트를 사용해서 호환성을 높이는 것도 중요하지만, 현재는 인터넷 익스플로우 사용량과 용량을 생각해서 woff와 woff2를 사용하여 웹폰트를 만들었습니다.

  • WOFF (Web Open Font Format): WOFF는 웹 페이지에서 사용하기 위해 최적화된 웹 폰트 포맷입니다. 압축률이 높아서 작은 파일 크기를 가지며, 빠른 로딩을 가능케 합니다. 주로 브라우저 호환성을 고려할 때 WOFF를 사용합니다.
  • WOFF2 (Web Open Font Format 2): WOFF2는 WOFF의 업그레이드 버전으로, 더욱 효율적인 압축 기술을 사용하여 더 작은 파일 크기를 가집니다. WOFF2는 모던 브라우저에서 지원되며, 대부분의 경우 WOFF2를 사용하는 것이 좋습니다.
  • TTF/OTF (TrueType/OpenType Font): TTF와 OTF는 트루타입 폰트와 오픈타입 폰트의 확장자입니다. 원래는 인쇄용 폰트를 위해 개발되었지만 웹에서도 사용됩니다. 하지만 TTF/OTF는 추가적인 압축이나 최적화 없이 사용되기 때문에 파일 크기가 크고 로딩 속도가 느릴 수 있습니다.
  • EOT (Embedded OpenType): EOT 파일은 웹 페이지에서 사용하기 위해 개발된 폰트 포맷 중 하나입니다. 주로 Microsoft의 Internet Explorer 브라우저에서 사용되었습니다.

만약 폰트가 없다면 여기서 다운 받아서 사용하세요.
나눔스퀘어네오 : https://github.com/websfont/nanumSquareNeo
넥슨고딕Lv1 : https://github.com/websfont/nexonLv1

1_4. vars.scss 설정하기

CSS 변수를 설정하겠습니다. CSS 변수는 사용자 정의 변수로, CSS 변수를 사용하면 값을 하나의 장소에서 정의하고 다른 여러 규칙에서 그 값을 사용할 수 있습니다. 이를 통해 코드의 가독성을 높이고 스타일 관리를 더 효율적으로 할 수 있습니다. SCSS 변수를 사용할 수 있지만, CSS에도 이런 기능이 있기 때문에 CSS 스타일로 설정하겠습니다.

:root는 CSS의 유사 클래스 선택자 중 하나로, 루트 요소를 선택하는 역할을 합니다. 루트 요소는 HTML 문서의 최상위 요소를 의미하며, 일반적으로 <html> 요소를 가리킵니다. :root를 사용하면 전역 범위에서 CSS 변수를 정의하고 접근할 수 있습니다. 

:root {
    --mainfont-nanum: "nanumSquareNeo";
    --mainfont-nexon: "nexonLv1";
  
    --black: #000;
    --black100: #000;
    --black200: #000;
    --black300: #000;
    --black400: #000;
    --black500: #000;
    
    --white: #fff;
    --white100: #fff;
    --white200: #fff;
    --white300: #fff;
    --white400: #fff;
    --white500: #fff;
    
    // 폰트 셋팅
    font-family: var(--mainfont-nanum), var(--mainfont-nexon);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    
    // 폰트 최적화
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
  
    @media (max-width: 800px) {
        font-size: 14px;
        line-height: 1.4;
    }
}

1_5. reset.scss 설정하기

reset.css는 웹 페이지에서 브라우저별로 기본적으로 제공되는 스타일을 초기화하거나 재정의하는 스타일 시트입니다. 브라우저 간에 기본 스타일이 다르거나 렌더링 동작이 다를 수 있기 때문에, 이를 보완하고 브라우저 간의 일관된 디자인을 유지하거나 조작할 때 사용됩니다.

reset.css의 주요 목표는 브라우저의 스타일을 초기화하여 일관된 시작 지점을 제공하거나, 원하는 디자인을 구현하기 위해 필요한 스타일을 정의하는 것입니다. 일반적으로 모든 HTML 요소에 대한 여러 속성(마진, 패딩, 텍스트 스타일 등)을 재설정하거나 일반적으로 제공되는 레이아웃과 스타일을 재정의합니다. 

// border-box 초기화
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

// 공백 초기화
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
select,
table,
td,
textarea,
th,
ul,
figure,
figcaption {
    margin: 0;
    padding: 0;
}

// 폰트 초기화 
body,
button,
input,
select,
table,
textarea {
    font-family: var(--mainfont-nanum), var(--mainfont-nexon), "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", helvetica, sans-serif;
}

// 링크 초기화
a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
}

// 스타일 초기화
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

ul {
    list-style: none;
}

em,
address {
    font-style: normal;
}

strong {
    font-weight: normal;
}

img {
    vertical-align: top;
    width: 100%;
}

// 디자인 초기화
input,
textarea,
button,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-size: 16px;
    border: 0;
}

// 스킵메뉴
#skip a {
    position: absolute;
    left: 10px;
    top: -92px;
    z-index: 100000;
    font-size: 1rem;
    padding: 10px 30px;
    color: var(--white);
    background: var(--black);
}
#skip a:focus,
#skip a:active {
    top: 10px;
}

// 글씨 숨기기
.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

// IR(Image Replacement)
// 의미가 포함되어 있는 image를 배경으로 표현하고, 텍스트는 보이지 않게 설정하는 방법입니다.
.ir {
    display: block; 
    overflow: hidden; 
    font-size: 0; 
    line-height: 0; 
    text-indent: -9999px;
    white-space: nowrap;
}

1_6. mixin.scss 설정하기

mixin은 SCSS(Sass)에서 사용되는 재사용 가능한 코드 블록입니다. 믹스인은 특정 스타일 규칙을 함수처럼 정의하고, 필요한 곳에서 호출하여 해당 규칙을 재사용하는 방식으로 동작합니다. 이를 통해 스타일의 모듈화와 재사용성을 높일 수 있습니다. SCSS의 @mixin 디렉티브를 사용하여 믹스인을 정의하고, @include 디렉티브를 사용하여 해당 믹스인을 호출합니다.

믹스인은 우리가 사용한 것보다 훨씬 복잡하고 다양한 방식으로 사용할 수 있습니다. 변수와 결합하여 다양한 스타일 요소를 재사용하거나, 믹스인 내부에서 조건문과 반복문을 사용하여 더 동적인 스타일링을 구현할 수도 있습니다. 믹스인을 통해 스타일 코드의 중복을 줄이고, 코드의 가독성과 유지보수성을 높일 수 있습니다. 지금은 복잡한 것보다는 간단한 것을 사용하면서 감을 잡아보겠습니다. 

// mixin

1_7. common.scss 설정하기

사이트에서 공통적으로 사용하는 부분을 설정하겠습니다. 

body {
    background-color: var(--black);
    color: var(--white);
}

이렇게 하면 SCSS 셋팅이 완료 되었지만 반영이 안됩니다. index.js에서 다음 파일을 추가하겠습니다. 

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './assets/scss/style.scss';  // 추가

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
    <App />
    </React.StrictMode>
);

마무리

git 올리기

터미널에서 다음과 같이 작성하겠습니다. 깃헙에 올라왔는지 확인해보세요! 

webstoryboyhwang@Webstoryboyui-MacBookPro webs-youtube % git add .
webstoryboyhwang@Webstoryboyui-MacBookPro webs-youtube % git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
    (use "git restore --staged <file>..." to unstage)
        new file:   src/assets/fonts/nanumSquareNeo-Black.woff
        new file:   src/assets/fonts/nanumSquareNeo-Black.woff2
        new file:   src/assets/fonts/nanumSquareNeo-Bold.woff
        new file:   src/assets/fonts/nanumSquareNeo-Bold.woff2
        new file:   src/assets/fonts/nanumSquareNeo-ExtraBold.woff
        new file:   src/assets/fonts/nanumSquareNeo-ExtraBold.woff2
        new file:   src/assets/fonts/nanumSquareNeo-Light.woff
        new file:   src/assets/fonts/nanumSquareNeo-Light.woff2
        new file:   src/assets/fonts/nanumSquareNeo-Regular.woff
        new file:   src/assets/fonts/nanumSquareNeo-Regular.woff2
        new file:   src/assets/fonts/nexonLv1-Bold.woff
        new file:   src/assets/fonts/nexonLv1-Bold.woff2
        new file:   src/assets/fonts/nexonLv1-Light.woff
        new file:   src/assets/fonts/nexonLv1-Light.woff2
        new file:   src/assets/fonts/nexonLv1-Regular.woff
        new file:   src/assets/fonts/nexonLv1-Regular.woff2
        new file:   src/assets/scss/setting/_common.scss
        new file:   src/assets/scss/setting/_fonts.scss
        renamed:    git -> src/assets/scss/setting/_mixin.scss
        new file:   src/assets/scss/setting/_reset.scss
        new file:   src/assets/scss/setting/_vars.scss
        new file:   src/assets/scss/style.scss
        modified:   src/index.js

webstoryboyhwang@Webstoryboyui-MacBookPro webs-youtube % git commit -m "CSS 설정완료"
[main 7eaa67f] CSS 설정완료
    23 files changed, 251 insertions(+)
    create mode 100644 src/assets/fonts/nanumSquareNeo-Black.woff
    create mode 100644 src/assets/fonts/nanumSquareNeo-Black.woff2
    create mode 100644 src/assets/fonts/nanumSquareNeo-Bold.woff
    create mode 100644 src/assets/fonts/nanumSquareNeo-Bold.woff2
    create mode 100644 src/assets/fonts/nanumSquareNeo-ExtraBold.woff
    create mode 100644 src/assets/fonts/nanumSquareNeo-ExtraBold.woff2
    create mode 100644 src/assets/fonts/nanumSquareNeo-Light.woff
    create mode 100644 src/assets/fonts/nanumSquareNeo-Light.woff2
    create mode 100644 src/assets/fonts/nanumSquareNeo-Regular.woff
    create mode 100644 src/assets/fonts/nanumSquareNeo-Regular.woff2
    create mode 100755 src/assets/fonts/nexonLv1-Bold.woff
    create mode 100644 src/assets/fonts/nexonLv1-Bold.woff2
    create mode 100755 src/assets/fonts/nexonLv1-Light.woff
    create mode 100644 src/assets/fonts/nexonLv1-Light.woff2
    create mode 100755 src/assets/fonts/nexonLv1-Regular.woff
    create mode 100644 src/assets/fonts/nexonLv1-Regular.woff2
    create mode 100644 src/assets/scss/setting/_common.scss
    create mode 100644 src/assets/scss/setting/_fonts.scss
    rename git => src/assets/scss/setting/_mixin.scss (100%)
    create mode 100644 src/assets/scss/setting/_reset.scss
    create mode 100644 src/assets/scss/setting/_vars.scss
    create mode 100644 src/assets/scss/style.scss
webstoryboyhwang@Webstoryboyui-MacBookPro webs-youtube % git push -u origin main     
Enumerating objects: 32, done.
Counting objects: 100% (32/32), done.
Delta compression using up to 10 threads
Compressing objects: 100% (29/29), done.
Writing objects: 100% (29/29), 7.56 MiB | 6.54 MiB/s, done.
Total 29 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/webstoryboy/webs-youtube.git
    15f3c28..7eaa67f  main -> main
branch 'main' set up to track 'origin/main'.

이렇게 해서 기본적인 SCSS를 정리하였습니다. 조금 더 세부적이고 디테일하게 작업할 수 있지만, 우리는 느낌을 보는 단계이기 때문에 기본적인 설정만 완료했습니다. SCSS를 사용하다보면 CSS 보다 편하고 익숙해 질 것입니다. 작업하다가 모르거나 애매한 부분은 언제든지 댓글 달아주세요! 오늘도 수고하셨습니다. 🥹

완성 화면 소스 보기 영상 보기

예제 목록

관련글

댓글

티스토리툴바