📝 오늘 한 것

1. styles - pug / scss

📚 배운 것

1. Styles

1) 기본 설정

(1) font-awesome

base.pug 파일에 link 태그 추가 (font-awesome 참고)

(2) scss 폴더

client 폴더 - scss 폴더 - ( components 폴더 / config 폴더 / screens 폴더 / styles.css 파일 ) 만들기

• config 폴더에는 _variables.scss 파일과 _reset.scss 파일(meyerweb 참고)을 만듦
• components 폴더는 header / footer 등을 다룸
• screens 폴더는 url 페이지를 다룸
• styles.css 파일에 _variables.scss 파일과 _reset.scss 파일을 @import 함
  결과적으로, scss 폴더 안에 만든 모든 파일을 @import 할 것 ❗

[ _variables.scss ]

$red: #ff1300;
$bg: #191919;

[ styles.css ]

// Config

@import "./config/_variables.scss";
@import "./config/_reset.scss";

// Conponents

// Screens

// Defaults

a {
  color: inherit;
  text-decoration: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: $bg;
  color: white;
}

2) SCSS 작성법

(1) 변수 사용 가능

_variables.scss 파일에 변수를 정의해놓고, styles.scss 파일에 @import 하여 사용

(2) 중첩 기능

body a {}

body {
  a {}
}

상위 요소 참조 시 & 문자 이용

a {}
a:hover {}

a {
  &:hover {}
}

---

💡 partials 폴더나 mixins 폴더 안에 pug 파일을 만들면, 같은 이름을 가진 scss 파일을 components 폴더에도 만든다.

💡 그 밖의 pug 파일(home, watch, login 등)을 만들면, 같은 이름을 가진 scss 파일을 screens 폴더에도 만든다.

3) header

(1) header.pug

partials 폴더 안에 header.pug 파일 생성
base.pug 파일에서 header 부분을 잘라내어 header.pug 파일에 붙여넣기
base.pug 파일에서 include partials/header

header
  a(href="/")
    i.fab.fa-youtube
  nav
    ul
      if loggedIn
        li
          a(href=`/users/${loggedInUser._id}`) My Profile
        li
          a(href="/users/edit") Edit Profile
        li
          a(href="/users/logout") Log out
        li 
          a(href=`/videos/upload`) Upload Video →
      else
        li
          a(href="/join") Join
        li
          a(href="/login") Login
      li
        a(href="/search") Search Video →

(2) header.scss

components 폴더에 header.scss 파일 만들기
header.pug 파일 참고해 header.scss 파일 작성

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 40px;
  .header__logo {
    color: $red;
    font-size: 36px;
  }
  ul {
    display: flex;
    justify-content: space-between;
    i {
      font-size: 18px;
    }
  }
  li {
    margin-left: 44px;
    text-transform: uppercase;
    font-weight: bold;
  }
  .header__btn {
    background-color: white;
    color: $bg;
    border-radius: 5px;
    padding: 4px 8px;
  }
}

4) footer

(1) footer.pug

footer &copy: #{new Date().getFullYear()} Wetube

(2) footer.scss

footer {
  text-align: center;
  opacity: 0.8;
  margin: 40px 0;
  font-size: 18px;
}