본문 바로가기
728x90
반응형

분류 전체보기

 (245)
[CSS] padding ▶ padding - 요소 내부(안쪽) 여백을 설정 - padding은 단축 속성 - padding-top, padding-bottom, padding-left, padding-right의 네 가지 개별 속성의 집합 - 속성 값 - 단위: px, em, cm 등 단위로 지정. - 기본값: 0. - %: 부모 요소의 너비(width 값)에 대한 비율로 지정(margin과 동일). - 사용법 padding: 상 우 하 좌; - 속성 값으로 4개를 적은 경우 시계 방향으로 값 적용. padding: 상 [좌, 우] 하; - 속성 값으로 3개 적은 경우.위에서 아래로 해석. padding: [상, 하] [좌, 우]; - 속성 값으로 2개 적은 경우 상/하를 우선시. padding: [상, 하, 좌, 우]; - ..
[CSS] margin ▶ margin - 요소의 외부(바깥) 여백을 지정. - margin은 단축 속성. - margin-top, margin-bottom, margin-left, margin-right라는 네 가지 개별 속성들의 집합. - 음수값(negative values)을 사용할 수 있음. - 음수값 지정을 통해 여백이 안쪽으로 들어오는 것처럼 설정 가능. - 속성 값 - 단위: px, em 등 단위로 지정. - 기본값은 0. - 0px = 0em = 0% = 0으로, CSS에서 0 작성 시 단위를 별도로 적지 않는 것을 권장. 적어도 차이는 없음. - auto: 브라우저가 자동으로 너비를 계산. 특수한 경우 사용. - %: 부모 요소의 너비(width 값)에 대한 비율로 지정. - 부모 요소(.parent)의 가로 ..
[CSS] max-width/min-width, max-height/min-height ▶ max-width - 요소의 최대 가로 너비 지정. - max-widht 값이 지정된 요소는 이보다 더 커질 수 없음. - 속성 값 - 기본값: none. - 요소는 기본적으로 최대치가 없음. - 지정하지 않으면 원하는 만큼 늘려 쓸 수 있다는 것. - 단위: px, em, % 등의 단위로 지정. - auto: 브라우저가 너비 계산. ▶ min-width - 요소의 최소 가로 너비 지정. - min-width가 지정된 요소는 이보다 더 작아질 수 없음. - 속성 값 - 기본값: 0. - 너비는 0보다 작아질 수 없음. - 단위: px, em, % 등의 단위로 지정. - auto: 브라우저가 너비 계산. ▶ max-height - 요소의 최대 세로 너비 지정. - max-height가 지정된 요소의 높..
[node] Sequelize에서의 DB 삭제 index.js에 라우팅 생성 router.get('/products/delete/:id', ctrl.get_products_delete); admin.ctrl.js에 삭제 로직 추가 exports.get_products_delete = ( req , res ) => { models.Products.destroy({ where: { id: req.params.id } }).then( () => { res.redirect('/admin/products'); }); }; products.html에 button과 url 맵핑 삭제 url에 접속하여 삭제 버튼 클릭 삭제 후 조회
[node] Sequelize에서의 DB 수정 수정을 하기 위해선 수정할 데이터를 먼저 화면에 불러오는 작업이 필요하다. 즉 수정하기 버튼을 눌렀을 때 기존 데이터를 input 박스에 꽂아줘야 한다. 이 과정을 위해서 먼저 조회 로직을 추가한다. controller(controllers/admin/index.js)에 url을 지정한다. router.get('/products/edit/:id', ctrl.get_products_edit); admin.ctrl.js에 아래 소스를 추가한다. // 수정할 때 write.html의 폼을 재활용한다. // 수정을 누르면 해당하는 데이터가 조회된 후에 수정 작업을 해야하기 때문 exports.get_products_edit = (req, res) => { models.Products.findByPk(req.pa..
[node] 상세페이지 보기(findByPk로 DB 조회하기) 링크를 연결할 html(products.html) 파일에 a 태그를 추가하여 해당 url로 이동할 수 있게 한다. {{ product.name }} admin의 index.js로 가서 url을 생성한다. router.get('/products/detail/:id', ctrl.get_products_detail ) controller(admin.ctrl.js)로 이동하여 아래 소스를 추가한다. template/admin 폴더에 detail.html을 생성하고 아래의 소스 코드를 추가한다. {% set title = "관리자 : 상세페이지" %} {% extends "layout/base.html" %} {% block content -%} {{ product.name }} 작성일 : {{ product.d..
[node] Moment.js 적용 moment.js를 인스톨한다. 날짜형식을 지정할 js파일(Products.js)에 moment 관련 아래 소스를 추가한다. const moment = require('moment'); Products.prototype.dateFormat = (date) => ( //return 생략 moment(date).format('YYYY-MM-DD') ); 화면에 뿌려주는 html파일(products.html)에서 해당 함수를 불러 사용한다. {{ product.dateFormat( product.createdAt ) }} 지정한 날짜 형식으로 출력된다.
[node] Sequelize에서의 DB 조회 admin.ctrl.js(controller) 에 아래 소스 코드 추가 // admin의 index.js의 router.get('/products', ctrl.get_products )와 맵핑 exports.get_products = ( _ , res) => { //전체 조회(findAll) find라는 것도 있다. models.Products.findAll({ }).then( (productList) => { // admin/products.html에 파라미터로 받은 데이터 전달 // productList : productList를 productList로만 써도 된다 // Javascript에서 키 값과 벨류 값이 같을 때에는 한 번만 적어줘도 됨. // template은 render res.rende..
728x90
반응형

티스토리툴바