본문 바로가기
728x90
반응형

전체 글

 (245)
[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..
[CSS] 단위(1) - px, % ▶ px - px(픽셀) 단위를 사용해서 각 사이즈를 정의함. - px 단위는 엄밀히 말하면 해상도에 따른 상대 단위를 의미. - 해상도에 따라 px 단위가 달라질 수 있음. - 그러나 화면상에 정확한 px 단위를 통해 절대적으로 고정하는 개념이라고 이해해도 사용상에는 무방. ▶ % - % 단위는 기본적으로 부모 요소의 가로 너비에 영향을 받음. - 위와 같이 % 단위로 입력해도 결과 화면상으로는 사이즈에 변화가 없음.
[CSS] Reset ▶ CSS Reset - 브라우저가 가지고 있는 기본적인 CSS 스타일을 초기화하는 방법 ※ 초기화를 해야 하는 이유 1. - 위의 예시에서는 각각 의미를 가지고 있는 태그 사용. - 각 요소들은 브라우저 화면에서 특정한 스타일을 가지고 있는 형태로 출력됨. - 이때 사용자들은 특정 브라우저만 사용하는 것이 아니기 때문에 다양한 사용자와 브라우저를 고려해야 함. - 브라우저에서 제공하는 스타일들은 표준화되어 있지 않기 때문에 각 브라우저마다 출력되는 모양이 달라질 수 있음. - 만들고자 하는 모양을 브라우저마다 모두 동일하게 출력해야 하기 때문에 초기화 후 사용해야 할 필요가 있음. 2. - 결과 화면에서는 위쪽과 왼쪽에 각각 원하지 않은 여백이 생김. - 이는 가 기본적으로 가지고 있는 여백으로, 브라..
[node] Sequelize에서의 DB 입력 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..
[node] Sequelize에서의 모델 작성 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로 돌아가 ..
728x90
반응형

티스토리툴바