▶ px - px(픽셀) 단위를 사용해서 각 사이즈를 정의함. - px 단위는 엄밀히 말하면 해상도에 따른 상대 단위를 의미. - 해상도에 따라 px 단위가 달라질 수 있음. - 그러나 화면상에 정확한 px 단위를 통해 절대적으로 고정하는 개념이라고 이해해도 사용상에는 무방. ▶ % - % 단위는 기본적으로 부모 요소의 가로 너비에 영향을 받음. - 위와 같이 % 단위로 입력해도 결과 화면상으로는 사이즈에 변화가 없음.

▶ CSS Reset - 브라우저가 가지고 있는 기본적인 CSS 스타일을 초기화하는 방법 ※ 초기화를 해야 하는 이유 1. - 위의 예시에서는 각각 의미를 가지고 있는 태그 사용. - 각 요소들은 브라우저 화면에서 특정한 스타일을 가지고 있는 형태로 출력됨. - 이때 사용자들은 특정 브라우저만 사용하는 것이 아니기 때문에 다양한 사용자와 브라우저를 고려해야 함. - 브라우저에서 제공하는 스타일들은 표준화되어 있지 않기 때문에 각 브라우저마다 출력되는 모양이 달라질 수 있음. - 만들고자 하는 모양을 브라우저마다 모두 동일하게 출력해야 하기 때문에 초기화 후 사용해야 할 필요가 있음. 2. - 결과 화면에서는 위쪽과 왼쪽에 각각 원하지 않은 여백이 생김. - 이는 가 기본적으로 가지고 있는 여백으로, 브라..

admin.ctrl.js(controller) 에 아래 소스 코드 추가 const models = require('../../models'); //models의 경로 exports.post_products_write = ( req , res ) => { //res.send(req.body); // sql문의 insert와 유사 models.Products.create({ name : req.body.name, //body-parser price : req.body.price , description : req.body.description }).then( () => { res.redirect('/admin/products'); // 저장하고 메인페이지로 돌아감 }); } admin/products/whi..

models 하위 폴더에 products.js 를 생성한다. 생성한 파일에 아래와 같이 코딩한다. sql문의 Create와 비슷하다고 보면 된다. module.exports = function(sequelize, DataTypes){ const Products = sequelize.define('Products', { id: { type: DataTypes.INTEGER, primaryKey: true, autoIncrement: true }, name : { type: DataTypes.STRING }, price : { type: DataTypes.INTEGER }, description : { type: DataTypes.TEXT } } ); return Products; } app.js로 돌아가 ..

본 포스트를 포함한 Sequelize 관련 모든 포스트는 mysql을 기반으로 작성되었으며, mysql이 반드시 설치되어 있어야 합니다. mysql 및 Workbench는 설치법을 구글링해 보시면, 간단하게 설치하실 수 있습니다. 먼저 mysql과 sequelize을 인스톨한다. .env 파일을 생성하여 DB정보를 입력한다. models라는 폴더를 생성하여 그 아래 index.js 파일을 생성한다. 생성한 index.js 파일에 아래와 같이 코딩한다. var Sequelize = require('sequelize'); var path = require('path'); var fs = require('fs'); var dotenv = require('dotenv'); dotenv.config(); //LO..

base.html에 아래의 소스를 추가한다. List Write {% block content %}{% endblock %} 이 후 http://localhost:3000/admin/products/ (자신이 지정한 y와 같이 자신이 지정한 포트의 url에 접근하면 메뉴바가 뜨는 것을 볼 수 있다. 현재 소스에서는 첫 번째 List에만 검정색 블록이 활성화 되어있고 Write를 클릭해도 블록이 활성화되지 않는다. 템플릿에서 현재 url에 접근이 가능해야 하기 때문에 app.js에 locals변수를 하나 추가한다. app.use( (req,res,next) => { app.locals.isLogin = false; //새로 추가한 변수 app.locals.req_path = req.path; // expr..