웹모아
웹모아[가입] 로그인 / 회원가입   검색     


  
인쇄관련
  

▽웹 페이지 인쇄시 원하는 위치에 페이지 브레이크 넣는 방법
2007-01-30 17:53:29 댓글:(0)   조회:1655
 

아래 한글 같은 워드 프로세서에는 Ctrl+엔터키를 치면 강제로 페이지가 나뉘어지고 인쇄시에도 페이지가 나뉜 그대로 인쇄된다. 이렇듯 대부분의 워드 프로세서는 강제로 페이지를 나눌 수 있는 기능들을 제공하고 있다.  

하지만 HTML에서는 한 화면에 페이지 개념이 없으므로 페이지를 나뉘어 보이도록 할 방법은 없지만 그 웹 페이지를 인쇄할 때는 페이지 개념이 적용되므로 가끔은 강제로 어떤 위치에서 페이지를 나누어 인쇄하고 싶은 경우가 있다.  

이럴 땐 어떻게 하면 좋을까?  

그렇다면 CSS에서 제공하는 page-break-after와 page-break-before를 주목할 필요가 있다.  

이 각각에는 다음과 같은 옵션이 있다.  

always | auto | left | right  
always : <H2>와 같은 HTML의 어떤 특정 요소를 만나면 강제로 페이지 브레이크 시키는 속성  


auto : 디폴트 속성으로 브라우저가 자동으로 페이지 계산해서 정상적으로 페이지가 끝나면 페이지 브레이크 시키는 속성  
left / right : 모든 브라우저에 적용되는 것은 아니며 프린터가 한 페이지에 두 페이지를 인쇄할 수 있는 기능을 제공할 때 사용할 수 있는 속성으로 왼쪽 페이지 또는 오른쪽 페이지임을 알려 주는 속성  

사용 방법  
<HEAD> 태그에 다음과 같은 스타일시트 코드를 넣어 보자.  

<STYLE TYPE = "text/css">  
H2 {page-break-before: always}  
</STYLE>  

위와 같이 적은 코드는 웹 페이지 상에서 <H2> 태그를 만나면 항상 그 전에서 페이지 브레이크를 일으키라는 뜻이다.  



특정 지점에 페이지 브레이크 삽입하기  
위와 같이 모든 <H2>를 만났을 때 인쇄되는 것은 원치 않을 때가 있다. 특정 위치에서만 페이지 브레이크가 일어나도록 하려면 자신만의 클래스를 만드는 것이 좋다. 다음은 <P>와 관련된 클래스를 만든 한 예이다.  

<STYLE TYPE = "text/css">  
P.breakhere {page-break-before: always}  
</STYLE>  

이렇게 클래스가 정의되었을 때 아래와 같이 사용하면 된다.  

<P CLASS="breakhere">
. 

[이전글] ▽ 인쇄된 용지에 머리말과 꼬리말 같은거 나오지 않게 어떻게 하나요?
[다음글] ▽ [RE] CSS media 에 따라 다른 크기의 폰트적용


 
※ 댓글쓰기는 회원(로그인 하신분) 이상 가능합니다.


 댓글 (0)

  
인쇄관련
 페이지: 1 / 3   

▽ 인쇄된 용지에 머리말과 꼬리말 같은거 나오지 않게 어떻게 하나요?
열람:1608   2008.10.27 		
▽ 웹 페이지 인쇄시 원하는 위치에 페이지 브레이크 넣는 방법
(홈마스타) 열람:1656   2007.01.30 		
▽ 화면 출력과 인쇄시 테이블 널이 다르게 지정하기
(홈마스타) 열람:1239   2007.01.19 		
▽ 웹페이지에서 프린트 컨트롤
(홈마스타) 열람:1905   2006.12.02 		
▽ 인쇄시 강재로 다음페이지 넘기
(홈마스타) 열람:1214   2006.12.02 		
▽   [RE] 인쇄시 강재로 다음페이지 넘기
(홈마스타) 열람:1298   2006.12.02 		
▽ 아이프레임 프린트 하기(iframe print)
(홈마스타) 열람:2619   2006.12.02 		
▽   [RE] 아이프레임 프린트 하기(iframe print)
(홈마스타) 열람:1693   2006.12.02 		
▽     [RE] 아이프레임 프린트 하기(iframe print)
(홈마스타) 열람:9367   2006.12.02 		
▽ [CSS] 같은 페이지에서 화면과 프린트 인쇄 스타일 바꾸기
(홈마스타) 열람:1485   2006.11.26 		

[1]  [2]  [3]   ≫

복수단어 검색은 공백(space)로 구분해 주세요.




 
최근 글 ▽[손님]
 
인기 글 ▽[손님]
▽[홈마스타] [RE] input type=\\