A4 에 맞게 화면 크기 조정하기





CSS를 이용한 인쇄화면 개선
웹페이지는 기본적으로 모니터상에 출력되는 것을 기본으로 하기에 인쇄시에는 만족할만한 결과물을 얻기가 힘듭니다. 그래서 현재까지 나와있는 대안으로서는 CSS를 이용하여 인쇄페이지를 좀더 개선하는 방법입니다.
기본적인 개념은 "인쇄를 위한 CSS를 따로 만든 후 media 속성을 사용하여 인쇄시에만 적용되도록 한다"는 겁니다.
CSS를 이용하여 인쇄 페이지를 좀더 효과적으로 개선하기 위해서는 아래와 같은 부분이 고려되어야 합니다.
  • 색상을 흑백으로 변경 : 보통 흑백 프린트를 이용하여 인쇄하죠?
  • 링크는 밑줄로 변경 : 흑백으로 인쇄하는 경우 이 부분이 링크인지 표시할 길이 없습니다. 그래서 링크에는 밑줄을 그어주는 것이 좋습니다.
  • 불필요한 부분은 제거 : 메뉴와 광고는 같이 인쇄될 필요가 없겠죠? 그리고 플래쉬나 불필요한 이미지 역시 제거해 주면 좀더 깔끔한 인쇄물을 얻을 수 있습니다.
색상을 흑백으로 변경
글자색은 검은색으로 배경은 흰색으로, 그리고 가능하면 글자체와 글자크기도 지정해 주면 좋습니다.
body {color : #000000; background : #FFFFFF; font-family : 굴림,"Times New Roman"; font-size : 12pt;}
링크는 밑줄로 변경
a {text-decoration : underline;}
불필요한 부분은 제거
이는 아이디(ID)를 사용하여 광고와 네비게이션을 구분해 줍니다. 아이디 사용이 불편한 경우에는 클래스(class)를 사용하여 인쇄시 나오지 않는 부분에 클래스를 지정해주어도 됩니다.
#menu, #advertising {display : none;}
CSS 파일 제작
위의 3가지 부분을 반영해서 아래와 같은 CSS 파일을 만듭니다. print.css와 같은 이름으로 저장하면 되겠죠?
body {color : #000000; background : #FFFFFF; font-family : 굴림,"Times New Roman"; font-size : 12pt;}
a {text-decoration : underline;}
#menu, #advertising {display : none;}
인쇄시만 적용되도록 설정
HTML 문서내에 아래와 같은 구문을 추가합니다.
<link rel="stylesheet" href="print.css" type="text/css" media="print">
HTML 문서에서 인쇄시 제거할 부분에는 DIV 태그로 구분합니다.
<div id="menu">메뉴</div>
<div id="advertising">광고</div>


댓글

댓글 쓰기

이 블로그의 인기 게시물

remove bluebirds.exe , virtual drive

http://www.tim.id.au/blog/2009/09/03/solved-bluebirds-installer-on-lg-gh22ns50-dvd-rw/ Solved: “Bluebirds” installer on LG GH22NS50 DVD-RW This is the LG GH22NS50. We’ve started stocking these at work – just the next low-cost SATA burner option for us. Except it comes with a nasty surprise, and that surprise is Bluebirds. It’s some kind of drag-to-disc software included with the drive. Not on a CD, of course; it’s hacked into the drive’s firmware, and shows up when there’s no disc in the drive at all. Which means that every time you close the tray with nothing in it, you get prompted to install it, thanks to Windows helpfully autorunning it. It’s not really a malicious program. It just sits in your system tray until you close it or uninstall it (Control Panel -> Add/remove programs, in XP). It’s probably even helpful, for the few people who let it sit around long enough to find out. I haven’t seen anyone do that yet. Way to go, LG; not only does your drive automatically try to...
자세한 내용 보기

4,5,6 띠 저항의 색띠를 읽는 법(띠저항 값)

이미지
4색 : 2번띠까지 값, 3번띠 승수, 4번띠 오차 5색 : 3번띠까지 값, 4번띠 승수, 5번띠 오차 6색 : 3번띠까지 값, 4번띠 승수, 5번띠 오차, 6번띠 온도계수 발췌(http://blog.naver.com/PostView.nhn?blogId=fribot&logNo=60195135963) 표준  EIA  색 코드 표. EIA-RS-279에 의함. 색 첫 번째 띠 두 번째 띠 세 번째 띠 (단위) 4번째 띠 (오차) 열계수 검정 0 0 ×10 0 갈색 1 1 ×10 1 ±1% (F) 100 ppm 빨강색 2 2 ×10 2 ±2% (G) 50 ppm 주황색 3 3 ×10 3 15 ppm 노랑색 4 4 ×10 4 25 ppm 초록색 5 5 ×10 5 ±0.5% (D) 파랑색 6 6 ×10 6 ±0.25% (C) 보라색 7 7 ×10 7 ±0.1% (B) 회색 8 8 ×10 8 ±0.05% (A) 흰색 9 9 ×10 9 금색 ×0.1 ±5% (J) 은색 ×0.01 ±10% (K) 없음 ±20% (M) 앞뒤를 구별하기 위하여, 오차는 금색, 은색, 무색으로 나타내는 경우가 많다. 정밀 저항 색 첫 번째 띠 두 번째 띠 세 번째 띠 4번째 띠 (단위) 5번째 띠 (오차) 검정 0 0 0 ×1 갈색 1 1 1 ×10 1 ±1% (F) 빨강색 2 2 2 ×10 2 ±2% (G) 주황색 3 3 3 ×10 3 노랑색 4 4 4 ×10 4 초록색 5 5 5 ×10 5 ±0.5% (D) 파랑색 6 6 6 ×10 6 ±0.25% (C) 보라색 7 7 7 ×10 7 ±0.1% (B) 회색 8 8 8 ×10 8 ±0.05% (A) 흰색 9 9 9 ×10 9 금색 ×0.1 ±5% (J) 은색 ×0.01 ±10% (K) 없음 ±20% (M)
자세한 내용 보기

수지에서 인천공항 리무진 버스 (인천공항버스정보)(2022년3월업데이트)

이미지
용인 수지 인천공항버스 정보( 최종확인시점 : 2022/03/13 ) 수지에서 탈 수 있는 버스는 8852 (인천공항) 이고 2회 운행한다. 수지 8852  풍덕고교, 성원아파트 (지역난방공사 맞은 편) 정류장   실시간 도착정보 노선 실시간 버스위치 경남여객홈페이지 용인, 수지, 신갈 관련 김포공항, 인천공항 버스정보 http://knbus.co.kr/default/business/sub1.php [ 정류장안내 ]   - 죽전 : 보정고교 (보정역 부근) 정류장           죽전2동 주민자치센터 (죽전역) 정류장 -  수지  :  풍덕고교, 성원아파트 (지역난방공사 맞은 편) 정류장 (7,700원)           광교마을앞 정류장  - 광교 :수원광교박물관 (이의주민센터) 정류장 -  인천공항 : 1층 7A 홈( 인천공항7A ) 청소년: 일반요금의 30% 할인  인천공항 출발 요금표
자세한 내용 보기