기본 콘텐츠로 건너뛰기

라벨이 웹 프로그래밍인 게시물 표시

[css] css로 프린트 방지하기

웹에서 프린트 제어가 불가능 한 줄 알았는데 프린트 클릭 시  스크립트로 해당 이벤트를 받아올 수 있다. 하지만 스크립트를 사용하는 방법은 브라우저마다 작동을 하지 않을 수 있다. 좀 더 찾아보니 css로 인쇄되는 영역을 제어를 해줄 수 있다.  @media print 를 이용하면 된다. < html > < head > < title > print test page < / title > < style > @media print { . np { display : none ; } } < / style > < / head > < body > < div class = "np" > test < / div > < div > test1 < / div > < div > test1 < / div > < div > test1 < / div > < / body > < / html > 위 코드를 보면 np 클래스를 @media print에 넣어주었다. @media print는 인쇄됐을 때의 스타일을 지정을 해주는 것이다.  위에서는 해당 페이지를 인쇄할 때 p를 display : none으로 가려주었다. @media print를 이용하면 좀 더 멋진 인쇄물을 만들 수 있다.

웹 프로그래밍 HTMl5의 구조 - 구조 및 시멘틱 마크업

1 2 3 4 5 6 7 8 9 10 11 12 < !DOCTYPE   > < head >     < title ></ title >     </ head > < body > </ body > </ html > cs HTML의 기본적인 뼈대  1 2 3 4 5 6 7 8 9 < header ></ header >     < nav ></ nav >     < article >         < section ></ section >         < section ></ section >     </ article >     < footer > </ footer > cs 시맨틱 마크업 엘리먼트로 구성 다양한 시멘틱 태그들이 존재한다.  <header> - 문서의 머릿말 지정  header엘리멘트는 문서의 시작부분인 로고나 제목, 메뉴들을 지정할 때 사용 1 2 3 4 5 6 < header >     < h1 > 홈페이지에 오신 것을  환영합니다</ h1 >     < p > 저의 별명은 멍개 입니다.</ p > </ header > < p > 홈 페이지의 나머지 영역</ p > cs <h1>과 <p>태그가 존재하는데  <h1>은 제목을 표시할떄 사용을 함. <Hn> 숫자가 작을수록 크기가 커짐 <p>