[CSS] @ At-rule 정리 (@page )

https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule


@charset — 문자셋 지정
    - 예) @charset 'utf-8';


@import — 다른 외부 *.css 파일을 로드
https://www.w3schools.com/cssref/pr_import_rule.asp
    @import "navigation.css";
    @import url("navigation.css");
    @import "printstyle.css" print; // 미디어가 프린트인 경우만 로드
    @import "mobstyle.css" screen and (max-width: 768px);//미디어가 스크린이고 최대 768 해상도인 경우만 로드


@namespace —  XML 네임스페이스를 정의
    @namespace url(http://www.w3.org/1999/xhtml);

//=============
< 중첩가능 규칙>

@font-face — 글꼴 정의
    @font-face {
        font-family: MyHelvetica;
        src: local("Helvetica Neue Bold"),
        local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
        font-weight: bold;
    }


//==================
@page — 문서 모양 정의
[CSS] @page
http://www.tutorialspoint.com/css/css_paged_media.htm


size - 페이지 박스 내 포함 블록의 대상(target) 크기 및 방향을 지정합니다
https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size
    예)  @page {
            size: A4;
            margin: 0;
        }

        @page { size: 210mm 296mm;     }



marks - 문서에 crop 및/또는 registration 마크를 추가합니다.
    marks: none;
    marks: crop; // 크롭 마크 보이기
    marks: cross; // 십자(cross) 마크 보이기
    marks: crop cross; // 크롭, 십자 둘다 보이기



//
:first
    @page :first {  margin: 2in 3in; } // 인쇄시 첫페이지 설정


:left
    @page :left {  margin: 2in 3in; } // 인쇄시 왼쪽 페이지 설정


:right
    @page :right {  margin: 2in 3in; } // 인쇄시 오른쪽 페이지 설정



//===============
@media — 미디어 질의(media query)를 하여 조건에 맞는 컨텐츠를 적용

https://codens.info/1624

https://poiemaweb.com/css3-responsive-web-design#12-media