기본 콘텐츠로 건너뛰기

라벨이 CSS인 게시물 표시

[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를 이용하면 좀 더 멋진 인쇄물을 만들 수 ...

CSS 태그 선택자, 클래스 선택자, ID 선택자, 하위 선택자

CSS는 선택자를 이용하여 HTML 엘리멘트를 선택해서 꾸미는 것. CSS를 자세히 보다 보면 *, . , #들로 시작한다. 태그 선택자 선택자를 작성하는 규칙 1 H1  {  font-size  :  10px  ;  color  :  red  ;   } cs 이 것이 의미하는 것은  H1은 선택자의 이름이 된다 H1 라는 선택자를 {}로 묶어줌으로써 정의를 한다 font-Size는 속성 이름이 되고 10px는 속석 값이 된다 속성 이름과 속성값은 :로 구분을 지어준다 또한 각각의 속성을 세미콜론(;)을 통해 구분을 지어줌으로써 여러개의 속성을 줄수 있다. 선택자의 이름을 지정할 때 HTML 태그 중 하나가 될 수도 있고, 직접 이름을 지어줄 수 있다. 클래스 선택자   (.) 클래스 선택자를 지정하는 법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 < !DOCTYPE > < html > < head >     < meta   http-equiv = 'Content-Type'   content = 'text/html ; charset=utf-8'   / >     < title >Jquery 세상에 오신것을 환영 합니다.</ title >        < link ...

CSS 상속

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 < !DOCTYPE > < html > < head >     < meta   http-equiv = 'Content-Type'   content = 'text/html ; charset=utf-8'   / >     < title >Jquery 세상에 오신것을 환영 합니다.</ title >        < link   rel = "stylesheet"   type = "text/css"   herf = "stylesheet/style1.css" / >         < style   type   = 'text/css' >         p  {             color : #4cff00 ;             font-family  : serif ;      ...

CSS 인라인, 내부, 외부 스타일

인라인 스타일 1 2 < p   style = "color:#808000;" >이 문장은인라인 스타일이 적용되었습니다</ p >  < p >이 문장은 일반 문장입니다.</ p > cs 내부 스타일  1 2 3 4 5 6 < style   type = 'text/css' >         h1  {             font-family :  '돋움체' ;             font-size :  25px ;          } </ style > cs 위 코드를 <head>에다가 추가 h1태그를 정의 1 2 < h1 > 내부 스타일 시트가 적용된 문장입니다.</ h1 > < h1 >모든 h1에 적용됩니다.</ h1 > cs body에서 <h1>태그를 이용하여 추가   1 2 3 4 5 6 < style   type = 'text/css' >         h2  { ...