2020의 게시물 표시

@media print

@media print { #nav-area { display : none ; } } 일반적인 미디어 타입은 아래와 같다. screen 컬러 컴퓨터 표시 장치 print 출력 장치 projection 프로젝트 출력 장치 all 그외 모든 미디어 장치(기본 설정) Media Types Media Groups   continuous/paged visual/audio/speech/tactile grid/bitmap interactive/static braille continuous tactile grid both embossed paged tactile grid static handheld both visual, audio, speech both both print paged visual bitmap static projection paged visual bitmap interactive screen continuous visual, audio bitmap both speech continuous speech N/A both tty continuous visual grid both tv both visual, audio bitmap both 출력 CSS에는 인쇄 매체나 프린터 출력을 위한 특별 지원을 한다 @page  규칙을 통해 여백을 설정할 수 있다. 양면출력을 위해서는  @page:left 와  @page:right 로 각각의 여백을 개별로 설정 할 수 있다. 출력 매체를 위해 사용되는 단위는 인치 ( in ), 포인트( pt  = 1/72 inch), 센티미터( cm )와 밀리미터( mm )등을 사용 할 수 있다. 글자 크기 설정과 맞추기 위해 사용하는 ems(em)과 퍼센트(%)도 사용하기에 적절하다. Document의 내용중 페이지 분할을 위해서는 { cssxref("page-break-before") }}나  page-break-after ,  page-break-inside 속성을 사용할 수 있다. 예제 아래 예제는

반응형 웹 디자인 ( @media 사용법 , 모바일 우선, 데스크톱 우선)

이미지
펌 :  https://www.codingfactory.net/10534 반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것입니다. @media 이러한 작업을 할 수 있게 해주는 것이 @media입니다. 예를 들어 @media ( max-width: 768px ) { body { color: red; } } 와 같이 하면, 웹브라우저의 가로 해상도가 768px 이하일 때 글자색을 빨간색으로 바꿉니다. 즉, 모바일 기기의 해상도를 고려하여 적절히 CSS를 수정하거나 추가하는 것이 가능합니다. 주의할 점은 가로폭 조정을 위해서 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 넣어야 한다는 것입니다. <meta name="viewport" content="width=device-width, initial-scale=1"> 모바일 우선(Mobile First) VS 데스크톱 우선(Desktop First) 작은 가로폭부터 큰 가로폭 순서로 만드는 것을 모바일 우선(Mobile First), 큰 가로폭부터 작은 가로폭 순서로 만드는 것을 데스크톱 우선(Desktop First)이라고 합니다. 모바일 우선(Mobile First) 작은 가로폭부터 큰 가로폭 순서로 만들고, min-width를 이용합니다. A @media ( min-width: 768px ) { B } @media ( min-width: 1024px ) { C } 기본 모양은 A, 768px 이상일 때는 B, 1024px

eclipse 에서 team sync (svn, git 등 )에서 잡다한 파일 무시하기.

이미지
1. Window / Preferences / Team / Ignored Resources 네줄 추가. .settings */.settings/* .project .classpath