각 연산자에 대해 더 짧은 이름을 가진 더 가벼운 버전이 있습니다(접두사 all이 없음). 차이점은 allinurl은 모든 단어가 있는 링크를 찾는 반면 inurl은 첫 번째 단어가 있는 링크만 찾는다는 것입니다. 검색어의 두 번째 및 후속 단어는 웹 페이지 어디에나 나타날 수 있습니다. inurl 연산자는 의미가 유사한 다른 연산자인 사이트와도 다릅니다. 첫 번째는 알려진 취약점이 있는 구성 요소를 찾는 데 널리 사용되는 원하는 문서(예: /cgi-bin/)에 대한 링크에서 일련의 문자를 찾을 수도 있습니다.

실제로 사용해 봅시다. 우리는 allintext 필터를 사용하여 쿼리가 신용 카드 번호 및 확인 코드 목록을 반환하도록 합니다. 이 목록은 2년 후에만 만료됩니다(또는 소유자가 연속으로 모든 사람에게 음식을 제공하는 데 지쳤을 때).

Allintext: 카드 번호 만료일 /2017 cvv

젊은 해커가 국방부 또는 NASA의 "서버를 해킹"하여 기밀 정보를 훔쳤다는 뉴스를 읽으면 대부분의 경우 Google을 사용하는 기본 기술입니다. NASA 직원 목록과 연락처 세부 정보에 관심이 있다고 가정합니다. 분명히 그러한 목록은 전자 형식입니다. 편의를 위해 또는 감독으로 인해 조직의 웹사이트 자체에 거짓말을 할 수도 있습니다. 이 경우 내부 사용을 위한 것이므로 참조가 없다는 것이 논리적입니다. 그러한 파일에는 어떤 단어가 있을 수 있습니까? 적어도 - 필드 "주소". 이러한 모든 가정을 테스트하는 것은 쉽습니다.

inurl:nasa.gov 파일 유형:xlsx "주소"

우리는 관료주의를 사용합니다

그러한 발견은 즐거운 사소한 일입니다. 정말 확실한 정보는 Google 웹마스터 운영자, 웹 자체 및 찾고 있는 것의 구조에 대한 보다 자세한 지식에서 비롯됩니다. 세부 정보를 알면 출력을 쉽게 필터링하고 필요한 파일의 속성을 구체화하여 나머지에서 정말 중요한 데이터를 얻을 수 있습니다. 관료주의가 여기서 구출된다는 것은 재밌습니다. 실수로 웹에 유출된 비밀 정보를 검색하는 데 편리한 일반적인 공식을 생성합니다.

예를 들어, 미 국방부 사무실에서 의무적으로 요구하는 배포 문서 스탬프는 문서 배포에 대한 표준화된 제한을 의미합니다. 문자 A는 비밀이 없는 공개 릴리스를 표시합니다. B - 내부 전용, C - 엄격한 기밀 등 F까지. 별도로 최고 수준의 국가 기밀을 나타내는 특히 귀중한 정보를 표시하는 문자 X가 있습니다. 근무 중 수행해야 하는 사람들이 그러한 문서를 찾도록 하고 문자 C가 있는 파일로 제한할 것입니다. DoDI 5230.24에 따르면 이러한 표시는 수출 통제에 해당하는 중요 기술에 대한 설명이 포함된 문서에 할당됩니다. 미 육군에 할당된 .mil 최상위 도메인의 사이트에서 이렇게 세심하게 보호된 정보를 찾을 수 있습니다.

"배포 명세서 C" inurl:navy.mil

.mil 도메인에 미 국방부 사이트와 그 계약 기관만 모아두니 매우 편리합니다. 도메인 제한 검색 결과는 매우 깨끗하며 제목 자체가 말해줍니다. 이런 식으로 러시아 비밀을 찾는 것은 사실상 쓸모가 없습니다. .ru 및 .rf 도메인에서 혼돈이 지배하고 많은 무기 시스템의 이름이 식물처럼 들립니다 (PP "Kiparis", 자주포 "Acacia"). 멋진 (TOS "피노키오").

.mil 도메인에 있는 사이트의 모든 문서를 주의 깊게 검사하면 검색 범위를 좁힐 수 있는 다른 마커를 볼 수 있습니다. 예를 들어, 흥미로운 기술 정보를 검색하는 데에도 편리한 수출 제한 "Sec 2751"에 대한 참조입니다. 한때 등장했던 공식 사이트에서 때때로 삭제되므로 검색 결과에서 흥미로운 링크를 따라갈 수 없다면 Google 캐시(캐시 운영자) 또는 Internet Archive 웹 사이트를 사용하십시오.

우리는 구름 속으로 올라간다

정부 부서에서 실수로 기밀을 해제한 문서 외에도 공개적으로 게시된 데이터에 대한 "비공개" 링크를 생성하는 Dropbox 및 기타 데이터 저장 서비스의 개인 파일에 대한 링크가 때때로 Google 캐시에 나타납니다. 대안 및 자체 제작 서비스의 경우 더 나쁩니다. 예를 들어 다음 쿼리는 FTP 서버가 설치되어 있고 라우터에서 라우터를 적극적으로 사용하는 모든 Verizon 클라이언트의 데이터를 찾습니다.

Allinurl:ftp://verizon.net

현재 그러한 똑똑한 사람들이 4만 명이 넘고 2015년 봄에는 훨씬 더 많았습니다. Verizon.net 대신 잘 알려진 공급자의 이름을 대체할 수 있으며 더 유명할수록 캐치가 더 커질 수 있습니다. 내장된 FTP 서버를 통해 공유기에 연결된 외장 드라이브의 파일을 볼 수 있습니다. 일반적으로 이것은 원격 작업용 NAS, 개인 클라우드 또는 일종의 P2P 파일 다운로드입니다. 이러한 미디어의 모든 콘텐츠는 Google 및 기타 검색 엔진에 의해 인덱싱되므로 직접 링크를 통해 외부 드라이브에 저장된 파일에 액세스할 수 있습니다.

엿보는 구성

클라우드로의 대대적인 마이그레이션 이전에는 취약점이 없는 단순한 FTP 서버가 원격 저장소로 통했습니다. 그들 중 다수는 오늘날에도 여전히 관련이 있습니다. 예를 들어 널리 사용되는 WS_FTP Professional 프로그램은 구성 데이터, 사용자 계정 및 암호를 ws_ftp.ini 파일에 저장합니다. 모든 항목은 일반 텍스트로 저장되고 암호는 최소한의 난독화 후 Triple DES 알고리즘을 사용하여 암호화되기 때문에 쉽게 찾고 읽을 수 있습니다. 대부분의 버전에서는 단순히 첫 번째 바이트를 버리는 것으로 충분합니다.

WS_FTP Password Decryptor 유틸리티 또는 무료 웹 서비스를 사용하면 이러한 암호를 쉽게 해독할 수 있습니다.

임의 사이트 해킹에 대해 이야기할 때 일반적으로 로그 및 CMS 백업 또는 전자 상거래 응용 프로그램 구성 파일에서 암호를 얻는 것을 의미합니다. 일반적인 구조를 알고 있으면 키워드를 쉽게 나타낼 수 있습니다. ws_ftp.ini에 있는 것과 같은 행은 매우 일반적입니다. 예를 들어 Drupal과 PrestaShop은 항상 사용자 ID(UID)와 해당 암호(pwd)를 가지고 있으며 모든 정보는 확장자가 .inc인 파일에 저장됩니다. 다음과 같이 검색할 수 있습니다.

"pwd=" "UID=" 내선 번호:inc

DBMS에서 비밀번호를 공개합니다.

SQL 서버의 구성 파일에서 사용자 이름과 이메일 주소는 일반 텍스트로 저장되며 암호 대신 MD5 해시가 기록됩니다. 엄밀히 말하면 암호를 해독하는 것은 불가능하지만 알려진 해시-암호 쌍 중에서 일치하는 항목을 찾을 수 있습니다.

지금까지 비밀번호 해싱조차 사용하지 않는 DBMS가 있습니다. 그들 중 하나의 구성 파일은 브라우저에서 간단히 볼 수 있습니다.

텍스트:DB_PASSWORD 파일 유형:env

Windows 서버의 출현으로 구성 파일의 위치는 부분적으로 레지스트리에서 차지했습니다. 파일 형식으로 reg를 사용하여 정확히 같은 방식으로 분기를 검색할 수 있습니다. 예를 들면 다음과 같습니다.

파일 유형:reg HKEY_CURRENT_USER "비밀번호"=

명백한 것을 잊지 마세요

때로는 Google에서 실수로 열어서 포착한 데이터의 도움으로 기밀 정보에 접근할 수 있습니다. 이상적인 옵션은 일반적인 형식의 암호 목록을 찾는 것입니다. 필사적인 사람들만이 계정 정보를 텍스트 파일, Word 문서 또는 Excel 스프레드시트에 저장할 수 있지만 항상 충분합니다.

파일 유형:xls inurl:비밀번호

한편으로는 그러한 사고를 예방할 수 있는 많은 수단이 있습니다. htaccess에 적절한 액세스 권한을 지정하고 CMS를 패치하고 왼쪽 스크립트를 사용하지 않고 다른 구멍을 닫아야 합니다. robots.txt 제외 목록이 포함된 파일도 있는데, 이 목록은 검색 엔진이 파일에 지정된 파일 및 디렉터리를 인덱싱하지 못하게 합니다. 반면에 일부 서버의 robots.txt 구조가 표준 구조와 다른 경우 숨기려는 내용이 즉시 명확해집니다.

모든 사이트의 디렉토리 및 파일 목록 앞에 표준 비문 색인이 붙습니다. 서비스 목적으로 제목에 나타나야 하므로 제목 연산자로 검색을 제한하는 것이 좋습니다. 흥미로운 내용은 /admin/, /personal/, /etc/ 및 /secret/ 디렉토리에서 찾을 수 있습니다.

업데이트를 따르십시오

여기서 관련성은 매우 중요합니다. 오래된 취약점은 매우 느리게 닫히지 만 Google과 검색 결과는 지속적으로 변경됩니다. "마지막 순간" 필터(요청 URL 끝에 &tbs=qdr:s)와 "실시간" 필터(&tbs=qdr:1) 사이에도 차이가 있습니다.

Google의 마지막 파일 업데이트 날짜의 시간 간격도 암시적으로 표시됩니다. 그래픽 웹 인터페이스를 통해 일반적인 기간(시간, 일, 주 등) 중 하나를 선택하거나 날짜 범위를 설정할 수 있지만 이 방법은 자동화에 적합하지 않습니다.

주소 표시줄의 모양에서 &tbs=qdr: 구성을 사용하여 결과 출력을 제한하는 방법에 대해서만 추측할 수 있습니다. 1년 제한(&tbs=qdr:y)을 지정하는 문자 y, m은 지난 달, w는 주, d는 지난 날, h는 지난 시간, n은 분, 잠시만 기다려주세요. Google에 알려진 가장 최근 결과는 &tbs=qdr:1 필터를 사용하여 찾을 수 있습니다.

까다로운 스크립트를 작성해야 하는 경우 Google에서 날짜 범위 연산자를 통해 날짜 범위가 Julian 형식으로 설정되어 있음을 아는 것이 유용합니다. 예를 들어 2015년 1월 1일에서 7월 1일 사이에 업로드된 기밀이라는 단어가 포함된 PDF 문서 목록을 찾는 방법입니다.

기밀 파일 형식:pdf 날짜 범위:2457024-2457205

범위는 소수점이 없는 율리우스 날짜 형식으로 지정됩니다. 그레고리력에서 수동으로 번역하는 것은 불편합니다. 날짜 변환기를 사용하는 것이 더 쉽습니다.

다시 타겟팅 및 필터링

검색 쿼리에 추가 연산자를 지정하는 것 외에도 링크 본문에서 직접 보낼 수 있습니다. 예를 들어 filetype:pdf 특성은 as_filetype=pdf 구문에 해당합니다. 따라서 설명을 설정하는 것이 편리합니다. 검색 URL에 cr=countryHN 구성을 추가하여 Honduras 공화국에서만 결과의 출력이 설정되지만 Bobruisk 시에서만 결과가 출력된다고 가정해 보겠습니다. - gcs=Bobruisk . 전체 목록은 개발자 섹션을 참조하십시오.

Google의 자동화 도구는 삶을 더 쉽게 만들도록 설계되었지만 번거로움을 더하는 경우가 많습니다. 예를 들어 사용자의 도시는 WHOIS를 통해 사용자의 IP로 결정됩니다. 이 정보를 바탕으로 Google은 서버 간의 부하를 분산시킬 뿐만 아니라 검색 결과를 변경합니다. 지역에 따라 동일한 쿼리에 대해 다른 결과가 첫 페이지에 표시되며 일부는 완전히 숨겨진 것으로 판명될 수 있습니다. 국제적인 기분을 느끼고 어떤 국가에서든 정보를 검색하면 gl=country 지시문 다음에 오는 두 글자 코드에 도움이 됩니다. 예를 들어 네덜란드의 코드는 NL이고 바티칸과 북한은 Google에 자체 코드가 없습니다.

몇 가지 고급 필터를 사용한 후에도 검색 결과가 흩어지는 경우가 많습니다. 이 경우 쿼리에 몇 가지 예외 단어를 추가하여 쿼리를 쉽게 구체화할 수 있습니다(각 단어 앞에 빼기 기호가 있음). 예를 들어 뱅킹, 이름 및 자습서는 개인이라는 단어와 함께 자주 사용됩니다. 따라서 더 깔끔한 검색 결과는 쿼리의 교과서적인 예가 아니라 정제된 쿼리를 보여줍니다.

Intitle:"Index of /Personal/" -names -tutorial -banking

마지막 예

정교한 해커는 필요한 모든 것을 스스로 제공한다는 사실로 구별됩니다. 예를 들어 VPN은 편리하지만 비싸거나 일시적이고 제한이 있습니다. 혼자서 가입하는 것은 너무 비쌉니다. 그룹 구독이 있다는 것이 좋으며 Google의 도움으로 쉽게 그룹의 일원이 될 수 있습니다. 이렇게 하려면 다소 비표준 PCF 확장과 인식 가능한 경로가 있는 Cisco VPN 구성 파일을 찾으십시오: Program Files\Cisco Systems\VPN Client\Profiles . 하나의 요청으로 예를 들어 본 대학의 친절한 교직원과 합류할 수 있습니다.

파일 유형:pcf vpn OR Group

정보

암호는 암호화된 형태로 저장되지만 Maurice Massard는 이미 암호를 해독하는 프로그램을 작성했으며 thecampusgeeks.com을 통해 무료로 제공하고 있습니다.

Google의 도움으로 수백 가지 유형의 공격 및 침투 테스트가 수행됩니다. 널리 사용되는 프로그램, 주요 데이터베이스 형식, 수많은 PHP 취약성, 클라우드 등에 영향을 미치는 많은 옵션이 있습니다. 찾고 있는 것을 정확히 알면 필요한 정보(특히 공개할 의도가 없었던 정보)를 훨씬 쉽게 얻을 수 있습니다. Shodan은 흥미로운 아이디어를 제공할 뿐만 아니라 인덱싱된 네트워크 리소스의 모든 데이터베이스를 제공합니다!

사이트 개발, 유지 관리 및 홍보

"인쇄 가능한" 웹 페이지 만들기

인터넷에서 사이트를 탐색할 때 방문자는 예를 들어 친구에게 전달하거나 단순히 필요한 정보를 저장하기 위해 추가 작업을 위해 일부 페이지를 인쇄하는 경우가 많습니다. 특히 제품 설명, 가격표 및 조직의 연락처 세부 정보가 있는 인쇄 페이지.

물론 브라우저에서 다음 명령을 사용하여 원본 페이지를 직접 출력하는 것을 귀찮게 하는 사람은 없습니다. 밀봉하다또는 조합 CTRL+P그러나 이렇게 하면 불필요한 페이지 요소(메뉴, 머리글 등)가 인쇄되어 필요한 정보를 인식하기 어렵습니다. 또한 단색 프린터로 인쇄할 때 색상 요소는 일반적으로 보기에 좋지 않습니다.

사용자의 편의를 위해 사이트 개발자는 일반적으로 별도의 페이지를 만듭니다. 인쇄 버전, 필요한 텍스트, 흑백 그림 (회색 음영) 및 의사 소통을위한 연락처 정보 만 남습니다.

이러한 페이지를 만들 때 불필요한 장식 요소를 제거하고, 하이퍼링크를 일반 텍스트로 바꾸고, 단어와 구의 강조 표시를 제거하고 기울임꼴이나 굵게 바꿔야 합니다. 페이지 상단에는 회사의 로고와 이름, 전화 번호 및 기타 커뮤니케이션 수단을 배치하는 것이 바람직합니다. 사용자가 이 페이지를 인쇄한 위치를 찾을 필요가 없도록 사이트 이름을 지정해야 합니다.

페이지 하단에 주소, 전화번호, 이메일, ICQ, 웹사이트 URL 등 전체 연락처 정보를 표시하는 것이 바람직합니다.

메인 페이지에서 다음으로 이동하려면 인쇄 버전예를 들어 다음과 같은 적절한 그림과 텍스트를 사용할 수 있습니다.

페이지 자체에서 인쇄 가능한 버전버튼을 설치하는 것이 좋은 형태로 간주됩니다. 밀봉하다,클릭하면 프린터 설정 창이 열립니다. 이를 위해 방법이 사용됩니다. 자바스크립트 window.print(); 현재 창의 웹 페이지를 프린터로 인쇄합니다. 메인 페이지로 돌아가는 링크를 게시하는 것도 좋은 생각입니다.

간단한 링크로 버튼을 꾸밀 수 있습니다.
인쇄(코드 인쇄) 및 , 그러나 더 흥미로운 - 태그 사용 :

이 조합의 HTML 코드는 다음과 같습니다.

메인 페이지 주소");" />

두 경우 모두 표준 문서 인쇄 창이 열리며 주어진 버튼 예제를 클릭하여 볼 수 있습니다.

마지막으로, 제품 또는 서비스 설명의 "하드 카피"를 저장한 방문자 수를 추적하기 위해 인쇄 페이지에 통계 카운터 코드를 포함하는 것을 잊지 마십시오. 이 데이터가 항상 만족스럽지는 않을 수도 있습니다. 안타깝게도...

"사이트 개발, 유지 관리 및 홍보" 주제에 대한 유용한 기사

그는 세부 주문 페이지를 인쇄된 형태로 사용할 수 없다고 지적했습니다.

이 트윗을 보고 깜짝 놀랐습니다. 인쇄용 스타일을 최적화한 지 오래되었고 확인할 생각조차 하지 않았다는 것을 깨달았습니다.

내 사이트가 모든 크기와 모양에서 제대로 작동하는지 확인하기 위해 브라우저 창 크기를 조정하는 데 많은 시간을 소비하기 때문일 수도 있고, 나 자신을 위해 페이지를 거의 인쇄하지 않기 때문일 수도 있습니다. 이유가 무엇이든 나는 인쇄 스타일을 완전히 잊어버렸고 그것은 나쁘다.

인쇄를 위해 웹 페이지를 최적화하는 것은 페이지를 인쇄함으로써 환경에 관계없이 사이트에 최대한 액세스할 수 있도록 하기 때문에 중요합니다. 우리는 사용자와 그들의 행동에 대해 가정해서는 안 됩니다. 사람들은 웹 페이지를 계속 인쇄합니다. 기사, 블로그 게시물, 요리법, 연락처 정보, 지도 사이트 또는 부동산 목록을 생각해 보십시오. 언젠가 누군가가 귀하의 페이지 중 하나를 인쇄하려고 할 것입니다.

나는 오래 전에 집에 있는 프린터를 버렸는데, 항상 10분 작업 후에 고장이 난다고 생각했기 때문입니다. 그러나 모든 사람이 나와 같지는 않습니다. - Haydon Pickering(포괄적 디자인 패턴)

자신이 비슷한 위치에 있는 경우 이 게시물을 통해 빠르게 복습할 수 있습니다. 페이지를 인쇄용으로 최적화하지 않은 경우 다음 팁이 시작하는 데 도움이 될 것입니다.

1. 인쇄 스타일 연결

인쇄 스타일을 포함하는 가장 좋은 방법은 CSS에서 @media 지시문을 선언하는 것입니다.

Body ( font-size: 18px; ) @media print ( /* 인쇄 스타일은 여기에 */ body ( font-size: 28px; ) )

또는 HTML에 스타일을 포함할 수 있지만 이렇게 하려면 추가 HTTP 요청이 필요합니다.

2. 테스트

작은 스타일을 변경할 때마다 페이지를 인쇄할 필요가 없습니다. 브라우저에 따라 페이지를 PDF로 내보내거나 인쇄 미리 보기를 사용하거나 브라우저에서 직접 디버그할 수 있습니다.

Firefox에서 인쇄 스타일을 디버그하려면 개발자 도구 모음(Shift + F2 또는 도구 > 웹 개발자 > 개발자 도구 모음)을 열고 입력 상자에 media emulate print를 입력한 다음 Enter 키를 누릅니다. 활성 탭은 다시 로드될 때까지 미디어 유형이 인쇄된 것처럼 작동합니다.

Firefox에서 인쇄 스타일 에뮬레이션

Chrome에서 개발자 도구(CMD + Opt + I(macOS) 또는 Ctrl + Shift + I(Windows) 또는 메뉴 보기 > 개발자 > 개발자 도구)를 열고 콘솔을 불러온 다음 렌더링 패널을 열고 Emulate에서 인쇄를 선택합니다. CSS 미디어 메뉴.

Chrome에서 인쇄 스타일 에뮬레이션

3. 절대 측정 단위

절대 단위는 화면에서는 좋지 않지만 인쇄에는 좋습니다. 인쇄 스타일에 사용하는 것이 완벽하게 안전하며 cm , mm , in , pt 또는 pc 와 같은 단위를 사용하는 것이 좋습니다.

섹션 ( margin-bottom: 2cm; )

4. 페이지에 대한 특정 규칙

@page 지시문을 사용하여 페이지 크기, 방향 및 안쪽 여백과 같은 인쇄된 페이지에 특정한 속성을 설정할 수 있습니다. 이것은 모든 페이지에 특정 들여쓰기를 하려는 경우에 매우 편리합니다.

@media print ( @page ( 여백: 1cm; ) )

@page 지시문은 Paged Media Module 사양의 일부로, 인쇄할 첫 번째 페이지를 선택하거나 빈 페이지를 선택하는 기능, 페이지 모서리에 요소를 배치하는 기능 등과 같은 훌륭한 기능이 있습니다. 이것은 책을 인쇄하는 데에도 사용할 수 있습니다.

5. 페이지 나누기 관리

인쇄된 페이지는 웹 페이지와 달리 끝이 없기 때문에 콘텐츠가 페이지 사이에 끊어집니다. 이것이 일어나는 방식을 제어하는 ​​5가지 속성이 있습니다.

요소 앞 페이지 나누기.

요소가 항상 페이지의 시작 부분에 있도록 하려면 page-break-before 규칙을 사용하여 페이지 나누기를 적용할 수 있습니다.

섹션( page-break-before: 항상; )

요소 뒤의 페이지 나누기.

page-break-after 규칙을 사용하면 요소 뒤에 페이지 나누기를 강제로 적용하거나 비활성화할 수 있습니다.

H2( 페이지 나누기 이후: 항상; )

요소 내의 페이지 나누기

이 속성은 요소 내에서 페이지 나누기를 방지해야 하는 경우에 유용합니다.

Ul ( page-break-inside: avoid; )

과부와 고아(매달린 줄)

경우에 따라 페이지 나누기를 제어할 필요가 없지만 현재 페이지에 표시할 행 수와 다음 페이지에 표시할 행 수를 제어하는 ​​것이 중요합니다. 예를 들어 단락의 마지막 줄이 현재 페이지에 맞지 않으면 끝에서 두 번째 페이지와 함께 다음 페이지로 넘어갑니다. 이는 해당 Widows 속성이 기본적으로 2이기 때문에 변경할 수 있습니다.

P (과부: 4; )

이 문제의 다른 측면에 부딪히고 현재 페이지에 단락의 첫 줄만 있는 경우 전체 단락이 다음 페이지에서 시작됩니다. orphans 속성이 이를 담당하며 기본값은 2입니다.

P (고아: 3; )

이 코드는 단락이 다음 단락으로 넘어가지 않도록 현재 페이지에 최소 3행이 맞아야 함을 의미합니다.

이러한 모든 속성과 값이 모든 브라우저에서 작동하는 것은 아니므로 다른 브라우저에서 인쇄 스타일을 확인해야 합니다.

6. 스타일 재설정

인쇄를 위해 background-color , box-shadow 및 color 와 같은 일부 스타일을 재설정하는 것이 좋습니다.

*, *:이전, *:이후, *:첫 글자, p:첫 줄, div:첫 줄, blockquote:첫 줄, li:첫 줄 ( background: transparent !important; color: #000 !중요; 상자 그림자: 없음 !중요; 텍스트 그림자: 없음 !중요; )

인쇄 스타일은 !important 키워드를 사용해도 좋은 몇 안 되는 예외 중 하나입니다.

7. 선택적 콘텐츠 제거

잉크 낭비를 방지하려면 타이포그래피, 광고, 탐색 등과 같은 불필요한 항목을 제거해야 합니다. display: none 속성을 사용합니다.

기본적으로 주요 콘텐츠만 표시하고 다른 모든 콘텐츠는 숨길 수 있습니다.

본문 > *:not(main) ( 표시: 없음; )

8. 링크 주소 출력하기

A:after ( 내용: " (" attr(href) ")"; )

물론 상대 링크, 절대 링크, 앵커 등 모든 것이 이러한 방식으로 표시됩니다. 다음 옵션이 더 잘 작동합니다.

A:not():after ( 내용: " (" attr(href) ")"; )

미친 것 같아, 나도 알아. 이 행이 작동하는 방식은 http로 시작하지만 mywebsite.com을 가리키지 않는 링크가 있는 링크 옆에 href 속성 값을 표시하는 것입니다.

9. 약어 사본 인쇄

약어는 요소로 감싸야 합니다. 제목 속성에 설명이 있습니다. 출력하는 것이 합리적입니다.

Abbr:after ( 내용: " (" attr(title) ")"; )

10. 배경 인쇄

일반적으로 브라우저는 사용자가 명시적으로 지시하지 않는 한 배경색과 배경 이미지를 인쇄하지 않습니다. 일부 브라우저에서 기본 설정을 재정의할 수 있는 표준화되지 않은 인쇄 색상 조정 속성이 있습니다.

헤더( -webkit-print-color-adjust: 정확함; 인쇄 색상 조정: 정확함; )

11. 미디어 쿼리

다음 예제와 같이 미디어 쿼리를 작성하는 경우 이 미디어 쿼리의 스타일은 인쇄 시 적용되지 않는다는 점에 유의하십시오.

@media screen and (min-width: 48em) ( /* 화면만 */ )

이유를 물을 것입니까? CSS 규칙은 min-width가 48em이고 media-type이 screen인 두 조건이 모두 충족되는 경우에만 적용되기 때문입니다. screen 키워드를 제거하면 미디어 쿼리는 min-width 값만 고려합니다.

@media (최소 너비: 48em) ( /* 모든 미디어 유형 */ )

12. 카드 인쇄

Firefox 및 Chrome의 현재 버전은 지도를 인쇄할 수 있지만 Safari는 그렇지 않습니다. 일부 서비스는 원본 대신 인쇄할 수 있는 정적 지도를 제공합니다.

지도( 너비: 400px; 높이: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true "); -webkit-print-color-adjust: 정확함; 인쇄 색상 조정: 정확함; )

13. QR 코드

애드온 2: 구텐베르크

프레임워크를 찾고 있다면 페이지 최적화를 조금 더 쉽게 해주는 Gutenberg를 좋아할 것입니다.

애드온 3: 하르티자

이것은 의 또 다른 인쇄 스타일 프레임워크입니다.

종종 찾을 수 있는 사이트에서 페이지의 인쇄 가능한 버전. 많은 사람들은 이것이 브라우저 자체에 내장되어 있거나 매우 쉽다고 생각합니다. 사실 이것은 전혀 사실이 아닙니다. 인쇄 버전은 일반 페이지입니다.필요한 스스로하다.

이 문서의 인쇄 가능한 버전을 볼 수 있습니다. 실제로 거기에 무엇을 표시해야 합니까? 기사 제목, 섹션, 범주, 저자, 텍스트 자체 및 날짜. 이 모든 것이 이 페이지에 표시됩니다. 메뉴, 검색폼, 각종 블록이 필요하신가요? 나는 그것이 그들이하지 않는 이유라고 생각하지 않습니다.

또한 인쇄 버전의 너비가 650px를 초과하지 않음, 그렇지 않으면 브라우저가 가장자리를 잘라낼 수 있습니다.

그래서 당신은 이미 그것을 이해했습니다 인쇄 버전사용자가 필요로 하는 것을 정확히 표시하는 자신만의 것을 만들어야 합니다. 이제 그것을하는 방법에 대해.

있다 2가지 옵션: 별도의 페이지를 생성하고 별도의 스타일시트를 생성합니다. 첫 번째 옵션은 분명하다고 생각합니다. 다른 페이지 만들기 인쇄 버전으로메인 페이지에서 이 인쇄 버전에 대한 링크를 제공합니다. 사용자는 그것을 따르고 통해 "파일"->"인쇄"그는 그것을 인쇄할 것입니다.

두 번째 옵션은 불필요한 블록을 모두 숨기는 별도의 스타일 시트를 만드는 것입니다. 디스플레이: 없음;) 출력 콘텐츠에 적합한 크기를 설정합니다. 다음으로 이러한 스타일 파일은 다음과 같이 연결됩니다.

이제 사용자가 이 페이지를 인쇄하려는 경우 사용자가 보는 내용이 인쇄되지 않고 작성된 내용이 인쇄됩니다. print.css. 실제로 사용자는 페이지를 보는 방식과 프린터를 완전히 다른 방식으로 봅니다.

그렇게하는거야 인쇄 가능한 버전을 만드는 중입니다.사이트의 모든 페이지.

인쇄용 페이지를 만드는 것이 어려울 것 같습니까? 우리는 단순히 텍스트가 있지만 디자인이 없는 동일한 문서를 만들고 일반 페이지에서 링크합니다. 그러나 검색 엔진은 중복 콘텐츠에 대한 필터를 도입했으며 웹마스터는 인덱싱에서 인쇄 가능한 페이지를 숨겨야 합니다. 또한 사이트 방문자는 디자인 요소가없는 필요한 페이지 사본으로 먼저 이동 한 다음 "인쇄"버튼을 클릭해야하기 때문에 그다지 편리하지 않습니다.

이것은 CSS가 유용할 수 있는 곳으로 웹마스터의 작업량을 줄이고 방문자가 사이트를 더 쉽게 사용할 수 있을 뿐만 아니라 중복 콘텐츠에 대한 검색 엔진의 페널티를 피할 수 있습니다.

페이지 구조

먼저 HTML을 사용하여 문서의 구조를 만들어 보겠습니다. 예를 들어 이해하기 쉽도록 테이블 형식 레이아웃을 사용하기로 결정했습니다.

보시다시피 가로로 배열된 세 개의 셀이 있는 테이블이 있습니다. 모든 것이 일반 사이트와 같습니다. 왼쪽은 탐색, 중간은 콘텐츠, 오른쪽은 광고 블록 또는 뉴스입니다. 각 셀에는 자체 ID가 할당되었습니다. 왼쪽은 leftcolumn, 오른쪽은 rightcolumn, 중간 콘텐츠 셀은 콘텐츠입니다.

CSS 추가

이제 CSS를 사용하여 화면에 페이지 요소를 표시하는 데 사용해야 하는 스타일과 인쇄할 때 사용해야 하는 스타일을 브라우저에 알려야 합니다. style.css를 만들고 거기에 다음을 작성하십시오.

CSS 코드의 첫 번째 블록은 페이지 요소가 브라우저에 표시되는 방법을 설명합니다. @media screen을 추가하기 전에 추가 중괄호로 블록을 가져왔습니다. 이것은 표시를 위해 이러한 스타일을 적용해야 함을 브라우저에 알려줍니다.

브라우저에서 페이지를 볼 때의 모습입니다.

두 번째 블록은 첫 번째 블록과 동일한 페이지 요소의 표시를 설명하지만 이 경우 문서가 인쇄될 때 표시되는 형식이며 @media 인쇄 매개변수로 표시됩니다. 유용한 콘텐츠만 인쇄하기를 원하므로 왼쪽(#leftcolumn) 및 오른쪽(#rightcolumn) 셀을 display:none으로 설정하여 표시하지 않도록 합니다.

사이트 페이지의 인쇄 버전은 다음과 같습니다.

별도의 스타일 파일

하나의 스타일 파일에 모든 것을 결합할 필요는 없습니다. 대신 두 개의 스타일 파일을 사용할 수 있으며 사이트의 페이지에 연결할 때 인쇄할 때 사용할 스타일 파일과 화면에 표시할 스타일 파일을 브라우저에 알릴 수 있습니다. 첫 번째(화면 출력용)는 media="screen" 매개변수에 의해 정의되고 두 번째 것은 인쇄에 사용되며 media="print" 매개변수에 의해 정의됩니다.

인쇄 스타일은 나머지 모든 후에 설명해야 합니다. 그렇지 않으면 Opera는 인쇄용으로 선택한 흰색이 아니라 브라우저에 출력할 색상 배경과 함께 콘텐츠 블록을 인쇄합니다.

또한 인쇄할 때 콘텐츠 블록의 너비를 600px로 엄격하게 줄입니다. 너비가 100%일 때 프린터가 페이지 오른쪽의 작은 텍스트 스트립을 "잘라내기" 때문입니다. 또한 Opera에서 인쇄할 때 용지 가장자리의 들여쓰기가 Internet Explorer보다 약간 적고 용지의 텍스트 줄이 더 넓다는 사실에 유의하십시오.

이제 더 이상 인쇄를 위해 추가 페이지를 만들 필요가 없습니다. 예를 들어 "인쇄"라는 텍스트가 있는 링크를 사용하여 페이지 인쇄 가능성에 대해 사용자에게 알릴 수 있습니다. 클릭하면 디자인 없이 현재 페이지를 직접 인쇄할 수 있다는 메시지와 함께 도구 설명이 표시됩니다.

글의 무단전재를 금합니다.