본문 바로가기
728x90
반응형

전체 글

 (265)
[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..
[CSS] width, height ▶ width - 요소의 가로 너비를 지정. - CSS 속성에는 기본값(별도로 설정하지 않아도 미리 지정되어 있는 값)이 존재함. - width의 기본값은 auto. - 속성 값 - auto: 브라우저가 너비를 계산. - 단위: px, em, rem, %, vw, cm 등 단위로 지정. ▶ height - 요소의 세로 너비를 지정. - 기본값은 auto. - 속성 값 - auto: 브라우저가 너비를 계산. - 단위: px, em, rem, %, vw, cm 등 단위로 지정. ※ 참고 사항 - 에 width: auto; height: auto; 지정 시에는 화면상에 아무것도 나타나지 않음. - block 요소의 경우 width: auto; height: auto;로 설정 시 브라우저는 width: 100%..
[CSS] 단위(4) - vmax, vmin ▶ vmax, vmin - vmax와 vmin에서 'v'는 viewport를 의미. - vmax, vmin은 각각 viewport의 최대 너비와 최소 너비를 의미함. - 위의 결과 화면에서는 viewport의 가로의 길이가 세로 길이보다 더 긴 상태. - vmax는 현재 더 넓은 사이즈의 너비를 의미. - 위의 예시에서는 가로가 더 길기 때문에 가로 사이즈의 절반만큼 width값을 정의. - 위의 예시처럼 viewport의 가로 너비를 줄여서 세로가 더 길게 만들면 width값은 viewport의 세로 너비의 절반이 됨. - vmax와 달리 vmin은 가로/세로 중 더 짧은 쪽의 길이를 백분율로 계산하여 사용.
[CSS] 단위(3) - vw, vh ▶ vw, vh - vw는 viewport의 width를, vh는 viewport의 height를 의미함. - 화면에 출력되는 화면 전체가 viewport에 해당. - viewport의 비율이 vw와 vh. - vw는 백분율. 100 단위 안에서 설정함. - vw = 100vw. 50vw는 50%에 해당. - viewport가 늘어나면 늘어나는 만큼, 줄어들면 줄어드는 만큼 절반만 사용하는 것. - 100이 최고 사이즈로 그 안에서 1부터 100까지 선언함.
[CSS] 단위(2) - em, rem ▶ em - em은 현재 자기 자신의 font-size의 영향을 받음. - .container의 width는 60em인데 해당 font-size가 10px이니 10*60=600px에 해당. - em 사용 시 font-size의 영향을 받고 font-size 조정 시에는 조정된 사이즈의 영향을 받는 모든 부분이 같이 변경됨. - 특정한 조상 요소에 절대적인 값을 입력해 놓고 이하는 그 값에 맞게 변경할 때 em을 많이 사용함. - em은 중간중간에 조상요소를 타고 올라가면서 영향을 받는 관계를 모두 이해해야 함(em의 단점). - 타고 내려오다 중간에 font-size를 지정하기 애매한 구간이 생기면 이 또한 em 단위에 영향을 주기 때문에 관리에 어려움. - 그래서 쓸 수 있는 단위가 rem. ▶ rem..
728x90
반응형

티스토리툴바