본문 바로가기
Tutorial/youtube2023

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

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

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

by @webs 2023. 09. 01.
02
나만의 유튜브 사이트 만들기 : SCSS 셋팅하기
난이도 중간

소개

안녕하세요! 웹스토리보이입니다. 이번에는 CSS를 셋팅하겠습니다. 리액트에서 CSS를 사용하는 방법은 여러가지가 있습니다. 그 중 가장 기본적인 SCSS를 이용해서 작업해보겠습니다.

인덱스

  • 1. 셋팅하기
    • 1_1. Node.js 설치
    • 1_2. Vscode 설치
    • 1_3. React.js 설치
    • 1_4. 폴더 정리하기
    • 1_5. 필요한 파일 설치하기
  • 2. CSS 셋팅하기
    • 2_1. SCSS 설정하기
    • 2_2. style.scss 설정하기
    • 2_3. fonts.scss 설정하기
    • 2_4. vars.scss 설정하기
    • 2_5. reset.scss 설정하기
    • 2_6. mixin.scss 설정하기
    • 2_7. common.scss 설정하기

2. CSS 셋팅하기

1_1. SCSS 설정하기

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

srcassets 폴더는 다음과 같이 설정하겠습니다.

  • 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 설정하기

scssstyle.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 설정하기

scssfonts.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";
  
    --mainbg-black: #000;
    --black100: #000;
    --black200: #000;
    --black300: #000;
    --black400: #000;
    --black500: #000;
    
    --mainbg-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;
    }
}
  
body {
    background-color: var(--mainbg-black);
}

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 flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
    
// 양쪽 정렬
@mixin flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

// 중앙 정렬
@mixin position-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

// 상단 고정
@mixin position-fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}   

// 한줄 효과
@mixin line-one {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

// 두줄 효과
@mixin line-two {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

// 두줄 이상
@mixin line($line) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line; 
    -webkit-box-orient: vertical;
}

1_7. common.scss 설정하기

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

#main {
    margin-top: 93px;

    @media (max-width: 800px) {
        margin-top: 112px;
    }
}

.container {
    display: flex;
    flex-wrap: wrap;

    #aside {
        position: fixed;
        top: 100px;
        left: 0;
        width: 260px;
        padding: 1.5rem;
    }
    #contents {
        width: calc(100% - 260px);
        margin-left: 260px;
        padding: 1.5rem;
        overflow: hidden;
    }

    @media (max-width: 1400px){
        flex-direction: column;

        #aside {
            width: 100%;
            padding: 1.5rem 1.5rem 0 1.5rem;
        }

        #contents {
            width: 100%;
            padding: 1.5rem;
        }
    }
}

section {
    margin-bottom: 70px;

    @media (max-width: 800px) {
        margin-bottom: 50px;
    }

    > h2 {
        color: #fff;
        padding-bottom: 0.8rem;
        font-size: 1.3rem;

        @media (max-width: 800px) {
            padding-left: 0;
        }
    }
}


.thumb {
    border-radius: 10px;
    overflow: hidden;

    a {
        position: relative;
        display: block;
        cursor: pointer;
        width: 100%;
        // padding-bottom: 56.25%;
        position: relative;

        &::before {
            content: '';
            width: 100%;
            height: 100%;
            background-color: #0000002e;
            position: absolute;
            left: 0; 
            top: 0;
            transition: background-color 0.3s;
        }
        &:hover::before {
            background-color: #00000000;
        }
        &::after {
            content: '';
            width: 80px;
            height: 80px;
            background: #00000096 url(../../img/play.svg) no-repeat center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            opacity: 0;
            transition: opacity 0.3s;
        }
        &:hover::after {
            opacity: 1;
        }
    }
}

마무리

이렇게 해서 기본적인 CSS를 정리하였습니다. CSS를 사용하는 방법은 정말 다양합니다. 본인 스타일에 맞추어서 사용하거나, 회사 스타일에 맞추어서 사용하시면 됩니다. SCSS도 쓰다보면 정말 복잡하고, 난해한 부분들이 많습니다. 처음부터 어렵게 가는 것보다, 천천히 쉽고 이해할 수 있도록 기본적인 부분만 셋팅하였습니다. 수고하셨습니다. 🥹


예제 목록

댓글