Design (12) 썸네일형 리스트형 HTML 템플릿을 인쇄용으로 가공하기 HTML 으로 코딩된 테이블, 그림, 글자 등 다양한 요소가 섞여 있는 문서를 PDF 또는 A4용지로 출력했을 때 각 요소가 중간에 끊어지지 않고 보기좋게 출력할 수 있는 방법이 있는지 알아보았습니다. 방법은 생각보다 간단한데요, CSS의 @media print 속성을 이용하면 가능했습니다. @media print 는 인쇄할 때만 적용되는 것으로 다양한 기능이 있지만 바쁜 분들을 위해 핵심 CSS만 보면, 이 두 개만 알아도 충분한 것 같습니다. @media print { .page-divide { page-break-after: always; } } .page-divide 라는 클래스를 준 요소 뒤에는 언제나 페이지를 분할하도록 하는 CSS 입니다. table, figure, .sector { page.. 현수막/명함 등 인쇄물 디자인하기 문화체육행사_포스터 이번 포스팅으로는 행사라던지 일정표 등 여러가지 인쇄물 제작을 할 때의 디자인 방법에 대해 간단하게 소개하려고 합니다 ㅎㅎ 인쇄물 포토샵 세팅 해상도 (Resolution) 300 dpi 로 잡아줍니다. 안그러면 해상도가 낮아서 깨져 보여요. (보통 웹 작업을 할 경우 72dpi 로 잡혀 있음) 색상 (Color Mode) 인쇄물이므로 RGB 컬러가 아닌 CMYK 아시겠지만 RGB와 CMYK 색상은 차이가 많이 나니까 미리 잘 세팅하셔서 나중에 작업 다 끝내놓고 인쇄 직전에 멘붕에 빠지지 않으시기를..^^ 아이콘을 폰트로 만들어 쓰기 부트스트랩, Angular 등을 하다보면 부수적이지만 자주 접하게 되는 것이 있습니다. 바로 font-awesome !! (http://fontawesome.io/) 각종 아이콘을 폰트로 만들어 css 만 임베딩하면 다양한 아이콘을 폰트처럼 쓸 수 있는 CSS Toolkit 입니다. font-awesome 등 아이콘 검색하기https://glyphsearch.com/ 이런 식으로 아이콘을 만들어 쓰면 우선 수십개의 아이콘을 CSS에서 색상, 크기 등을 코드 한줄로 자유롭게 수정할 수 있기 때문에 사용이 굉장히 편리하구요 이미지로 할 경우 padding, margin 주면서 복잡하게 레이아웃을 맞춰야하는데 폰트 기반이다 보니 아무래도 정렬 등도 덜 신경쓰면서 웹페이지를 만들 수 있어 좋습니다. 그런데 아무.. [부트스트랩] 소개와 사용 방법 부트스트랩 소개 부트스트랩은 웹 디자인을 어떻게 하며 편리하게 할 수 있을까하는 목적에서 나온 프레임워크입니다. 실제로 부트스트랩을 활용하면 웹 디자인에 쏟아야 하는 노력을 절반이하로 줄일수 있으며, 특히 반응형 웹에 대한 고민을 혁신적으로 해결해 줄 수 있습니다. 부트스트랩은 Mark Otto와 Jacob Thornton에 의해 Twitter에서 개발되었으며, GitHub에서 2011 년 8 월 오픈 소스 제품으로 출시되었습니다. 부트스트랩 설치 부트스트랩 설치는 부트스트랩 사이트에서 다운로드 받은 후 크게 3가지 방법으로 사용할 수 있습니다. 웹서버에 올려서 사용하는 방법CDN(Contents Delivery Network)을 이용하는 방법Bower라는 패키지를 이용하는 방법 가장 많이 이용하는 방법.. 이전 1 2 다음