.ellipsis{ display: inline-block; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; } .ellipsis2{ display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ellipsis3{ display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orien..
css animation 속성 순서 a{animation: name duration timing-function delay iteration-count direction fill-mode play-state;} 애니메이션 속성 명 설명 속성 값 animation-name 애니메이션 이름 지정 특수문자를 제외한 문자열, 숫자, -,_ 를 조합해 1글자 이상 animation-duration 애니메이션 재생 시간, 또는 반복 루프 1회를 도는 시간 예) 0, 3s, 1.5s, 300ms 기본 값 0은 애니메이션 재생되지 않음. "s"(초), "ms"(밀리초) 단위로 표현 가능. animation-timing-function 애니메이션 진행 속도, 또는 가속 방식을 지정. 미리 설정된 속도 커브 중 한가지를 ..
인쇄영역 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 ===================..