분류 전체보기
-
SCSS - homeProject using node.js/Cloning Youtube 2020. 9. 2. 11:43
pages/home.scss .home-videos { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); grid-gap: 30px; .videoBlock:first-child, .videoBlock:nth-child(2) { grid-column: span 3; } .videoBlock:nth-child(3), .videoBlock:nth-child(4), .videoBlock:nth-child(5) { grid-column: span 2; } } View 참고 자료 노마드 코더의 유튜브 클론 강의 소스 코드 https://github.com/zpskek/wetube-v3/commit/cec8d685c18b739c253bcf437..
-
SCSS-videoBlockProject using node.js/Cloning Youtube 2020. 9. 2. 11:32
partials/videoBlock.scss .videoBlock { margin-bottom: 20px; a { color: black; } .videoBlock__thumnail { margin-bottom: 15px; max-width: 100%; // max-height: 435px; } .videoBlock__detail { display: flex; max-height: 127px; .profile__avatar { margin-right: 10px; } .videoBlock__info { display: flex; flex-direction: column; .videoBlock__title { overflow: hidden; line-height: 1.4; height: 70px; font-..
-
SCSS-footerProject using node.js/Cloning Youtube 2020. 9. 2. 11:25
partials/footer.scss .footer { margin: 50px 0; padding-top: 50px; border-top: 1px solid #c2bdc2; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #b3b3b3; font-weight: 600; .footer__icon { margin-bottom: 10px; font-size: 36px; } .footer__text { font-size: 18px; } } View 참고 자료 노마드 코더의 유튜브 클론 강의 소스 코드 https://github.com/zpskek/wetube-v3/commit/bd7c8b48ef3..
-
SCSS-headerProject using node.js/Cloning Youtube 2020. 9. 2. 11:21
partials/header.scss .header { background-color: $red; margin-bottom: 50px; a { color: white; } .header__wrapper { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; max-width: 1200px; padding: 7px 0; .header__column { i { color: white; font-size: 36px; } &:nth-child(2) { width: 30%; .header__search { input { padding: 7px 10px; border: none; border-radius: 5px; m..
-
SCSS-configProject using node.js/Cloning Youtube 2020. 9. 2. 11:18
config/reset.scss html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, f..
-
gulpProject using node.js/Cloning Youtube 2020. 9. 1. 22:03
소개 gulp는 webpack과 마찬가지로 module bundler다. webpack은 configuration이 x같다. 하지만 gulp는 아주 간단하다. 설치 #npm install gulp #npm install gulp-sass node-sass #npm install gulp-autoprefixer #npm install gulp-csso #npm install del #npm install gulp-browserify #npm install babelify gulp gulp를 실행시킬 수 있다. package.json에서 "scripts"에 "dev:assets" : "gulp"를 설정함으로써 gulp를 실행시킬 수 있다. gulp-sass Sass plugin for gulp node-sa..
-
WebpackProject using node.js/Cloning Youtube 2020. 9. 1. 15:15
소개 Back-end 영역은 90%정도 끝났다. 이제는 Front-end 부분을 할 것이다. Front-end에서 나는 SASS(pre-CSS)와 modern JS를 사용할 것이다. 그러기 위해서는 webpack을 설치해야 한다. Webpack은 module bundler인데, 내가 SASS와 JS 등을 webpack에게 주면 webpack은 브라우저와 호환될 수 있도록 static 파일들로 변환해준다. 즉, SASS를 주면 CSS로 바꿔주고 modern JS는 노멀한 JS로 변환해서 브라우저가 알아들을 수 있도록 해준다. 설치 #npm install webpack webpack-cli #npm install extract-text-webpack-plugin@next #npm install cross-e..
-
delete-videoProject using node.js/Cloning Youtube 2020. 8. 31. 08:38
routes.js videoDetila, editVideo, deleteVideo와 userDetail은 다른 routes와는 다르다. 이들은 고유 id 값에 따라 보여줘야 하는 페이지가 다르기 때문이다. 다른 routes은 key-string이지만 이들은 key(함수명) - value(함수)으로 이루어져 있다. 인자로는 id 값을 받는다. videoRouter.js videoRouter.js를 보면은 첫번째 인자인 router를 주는 값도 다르다. 다른 router는 string을 주지만 deleteVideo()는 routes.deleteVideo()로 함수를 준다. 또한 route를 함수로 주는 router들은 다른 router들보다 항상 맨 밑에 있어야 한다. 그렇지 않으면 다른 router들은 작..