[유튜브 클론코딩] 5. STYLING - 2

assets > scss > partials 폴더를 만들고 그 곳에 header.scss를 생성한다.

assets > scss > pages 폴더를 만들고 그 곳에 home.scss를 생성한다.

 

 

@import "config/_variables.scss";

@import "config/reset.scss";

@import "main.scss";

@import "partials/header.scss";

@import "pages/home.scss";

↑ styles.scss

그리고 이 모든 것을 styles.scss에서 가져온다.(import)

 

header.header

    .header__wrapper

        .header__column

            a(href=routes.home)

                i.fab.fa-youtube

        .header__column

            form(action=routes.search, method="get")

                input(type="text", placeholder="Search by term...", name="term")

        .header__column

            ul

                if !user.isAuthenticated

                    li

                        a(href=routes.join) Join

                    li

                        a(href=routes.login) Log In

                else 

                    li

                        a(href=`/videos${routes.upload}`) Upload

                    li

                        a(href=routes.userDetail(user.id)) Profile

                    li

                        a(href=routes.logout) Log Out   

↑ header.pug

header.pug를 다음과 같이 수정한다.

 

 

.header {

  background-color: $red;

  margin-bottom: 50px;

  .header__wrapper {

    padding: 5px 0px;

    width: 100%;

    margin: 0 auto;

    max-width: 1200px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    align-items: center;

    .header__column {

      i {

        color: white;

        font-size: 40px;

      }

      &:nth-child(2) {

        width: 100%;

        justify-self: center;

      }

      &:last-child {

        justify-self: end;

      }

      ul {

        display: flex;

        color: white;

        font-weight: 600;

        text-transform: uppercase;

        li:not(:last-child) {

          margin-right: 15px;

        }

      }

      form {

        width: 100%;

        input {

          padding: 7px 10px;

          width: 100%;

          border-radius: 5px;

          font-size: 14px;

          color: $black;

          font-weight: 600;

          &::placeholder {

            font-weight: 300;

            color: rgba(0, 0, 0, 0.7);

          }

        }

      }

    }

  }

}

↑ header.scss

header.scss를 다음과 같이 작성한다.

 

SCSS에 대해서 알아야 할 것

• .header 아래에 .header__wrapper가 있다면 기존의 css는 .header{} .header .header__wrapper 라고 해야 한다.
• 그러나 scss는

.header{

.header__wrapper{

}

}

이렇게 중첩구조로 쓸 수 있다. 더 명확하고 보기 좋은 코딩을 가능하게 해준다.

• & : 위에 보면 &::placeholder 이런식으로 되어 있는데 state 같은 거 쓸 때 이런 식으로 써야 한다.