인쇄영역 body { margin: 0; padding: 0; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 0 auto; background:#eee; } .subpage { border: 2px red solid; background:#fff; height: 257mm; } @page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; } .page { margin: 0; border: initial; width: initial; mi..
스크롤바 스타일에 대한 웹표준은 따로 없다 webkit 브라우저에 한해서만 커스텀 가능하며 주로 사용하는 속성은 아래 3가지 body::-webkit-scrollbar { /* 스크롤 전체 영역 */ width: 10px; } body::-webkit-scrollbar-thumb { /* 스크롤바 막대 */ height: 30%; background-color: #666; } body::-webkit-scrollbar-track { /* 스크롤바 배경 */ background-color: #ddd; } 참고 https://developer.mozilla.org/ko/docs/Web/CSS/::-webkit-scrollbar ::-webkit-scrollbar - CSS: Cascading Style Sh..
*인쇄영역의 경우 css 파일을 include 해 사용할 경우 스타일이 적용되지 않을 수 있으므로 파일 상단 안에 css 작성한다 *page-break 관련 css 1) page-break-before : 해당 엘리먼트의 이전 페이지 넘김 지정 2) page-break-after : 해당 엘리먼트의 다음 페이지 넘김 지정 - auto : 자동 - inherit : 부모값 상속 - always : 해당 엘리먼트의 이전/다음 페이지 넘김 - avoid : 해당 엘리먼트의 이전/다음 페이지 넘김을 금지 - left : 해당 엘리먼트 이전/다음에 분리된 페이지가 왼쪽 면에 위치 - right : 해당 엘리먼트 이전/다음에 분리된 페이지가 오른쪽 면에 위치 3) page-break-inside : 해당 엘리먼트의..
admin에서 editor로 작성하는 자동 메일폼이 있음 editor에서 작성한 레이아웃과 미리보기 view 페이지에서 보이는 레이아웃이 다름 원인 : editor 페이지에서는 editor 스타일이 적용되고 view 페이지에는 admin에 사용한 부트스트랩이 적용 해결 : 메일의 view페이지에도 editor와 동일한 스타일이 적용되도록 스타일 추가 1. /js/ckeditor/contents.css => editor에 삽입된 스타일을 제거하기 위해 reset.css에서 하단 부분만 복붙해 에디터 스타일 css 하단에 추가 /* ============================================= * mail form editor style override ===================..
애니메이션으로 사용하면 성능이 저하되는 css 속성들이 있음 ex) 높이, 너비, 여백, position 등 성능 개선을 위한 방법 중 하나가 will-change 속성 사용하는 것 참고 https://wit.nts-corp.com/2017/06/05/4571 CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) | WIT블로그 CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) wit.nts-corp.com