본문 바로가기
728x90
반응형

전체 글

 (265)
[CSS] overflow ▶ overflow - 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을 때 내용이 보이는 방식을 제어. 단축 속성. - 부모 요소의 영역 밖으로 자식 요소가 넘쳤을 때 넘친 영역을 어떻게 표시할 것인지에 대한 처리. [속성 값] - visible: 넘친 부분을 자르지 않고 그대로 보여줌. 기본값. - hidden: 넘친 부분을 잘라내고 보이지 않도록 함. - scroll: 넘친 부분을 잘라내고 스크롤 바를 통해 볼 수 있도록 함. 넘침의 유무와 상관 없이 강제로 스크롤 바를 생성. - auto: 넘친 부분이 있는 경우만 잘라내고 스크롤 바를 통해 볼 수 있도록 함. 자동으로 스크롤 바 생성. 넘치면 넘치는 대로, 넘치지 않으면 않는 대로 스크롤 바를 생성하거나 생성하지 않는 것. [사용 예시] - ove..
[CSS] display ▶ display - 요소의 박스 타입(유형)을 설정. - 요소가 화면에 보여지는 형태를 설정하는 것. [속성 값] - block: block 요소 처리. ex) 등. - inline: inline 요소 처리. ex) span 등. - 가로/세로의 값을 가질 수 없음. - inline-block: inline-block 요소 처리. base는 inline. - 수평으로 쌓이고 텍스트를 다루는 데 특화. - 가로/세로의 값을 가지고 margin/padding의 상하 값을 가질 수 있다는 특징을 가짐. - 기타: table, table-cell, flex 등. - none: 요소의 박스 타입이 없음(화면에서 요소가 사라짐). - display: block; & display: inline; - display..
[CSS] box-sizing ▶ box-sizing - padding과 border는 크기가 증가할 수 있다는 특징을 가짐. - 이때 크기 증가를 직접 계산해서 정의하거나 자동으로 브라우저가 계산하도록 하기 위해 box-sizing: border-box;를 지정 할 수 있음. - 요소의 크기 계산 기준을 지정. [속성 값] - content-box: width, height만으로 요소의 크기를 계산. 기본 값. - border-box: width, height에 안쪽 여백 padding과 테두리선 border를 포함하여 요소의 크기를 계산. - padding-box도 존재하지만 브라우저 호환성이 떨어짐. content-box, border-box 중 선택하여 사용하도록. - 개발자도구의 computed 영역에는 각각 파랑, 초록, ..
[CSS] border ▶ border - 요소의 외곽선/테두리선을 지정. - border는 단축 속성으로 border-width, border-style, border-color의 세 가지 개별 속성들의 조합. [속성과 속성 값] - border-width: 선의 두께(너비) 지정. 기본값: medium. - border-style: 선의 종류 지정. 기본값: none. - border-color: 선의 색상 지정. 기본값: black. - border: 두께 종류 색상; 띄어쓰기로 구분. 기본값: medium none black; [border의 기본값] - border의 기본값으로 두께, 색상은 있지만 선의 종류가 none이기 때문에 화면에 출력되지 않음. - 따라서 종류만 입력해도 화면상에는 출력됨. - border-w..
[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에 접속하여 삭제 버튼 클릭 삭제 후 조회
728x90
반응형

티스토리툴바