멍개블로그

글

라벨이 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 rel = "stylesheet" type = "text/css" herf = "stylesheet/style1.css" / > < style type = 'text/css' &

자세한 내용 보기

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 ; } </ style > </ head > < body > < h1 >h1 tag Title</ h1 > < h2 >h2 tag Title</ h2 > < p > p tag hello!</ p > < p > < em >hello!!</ em > </ p > </ body >

자세한 내용 보기

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 { color : #808000 ; margin-left : 20px ; } </ style > cs h2를 다른 폰트로 정의를 해보았다. 1 2 < h2 >h2내부 스타일 시트가 적용된 문장입니다</ h2 > < h2 >모든 h1에 적용됩니다.</ h2 > cs 인라인 스타일, <h1>, <h2>의내부 스타일을 적용하여 출력한 모습을 확인할 수

자세한 내용 보기