[Css] 제어 규칙 - @규칙, 미디어쿼리

@규칙(at-rule)들

• Css에서 골뱅이 기호는 스타일 제어 규칙을 의미하며, 스타일 적용시에 사용한다.

/* 스타일 시트 인코딩 정의 */
@charset 

/* 다른 스타일시트를 불러올때 정의 */
@import

/* 네임스페이스로 접두사가 붙을때 정의 */
@namespace

/* 미디어쿼리를 사용할때 정의 */
@media

/* 페이지를 프린트 할때 레이아웃 설정을 정의 */
@page

/* 글꼴을 사용할때 정의 */
@font-face 

/* 애니메이션을 제어하기 위한 정의 */
@keyframes

/* 각 디바이스에 화면을 어떻게 표현할건지의 대한 정의 */
@viewport

@import 규칙

• @import 규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 수 있는 규칙으로, 문자 인코딩을 지정하는 @charset 규칙을 제외하고 모든 다른 규칙보다 앞서 명시되어야 한다.
• @import 규칙을 이용하면 미디어 쿼리의 조건에 따라 필요한 CSS 파일만을 선별적으로 불러올 수 있다.

/* 프린트할 때에는 firstStyleSheet.css 파일을 불러오고 */
/* 스크린이 가로 방향일 때는 secondStyleSheet.css 파일을 불러 옴 */

@import url("firstStyleSheet.css") print;
@import "secondStyleSheet.css" screen and (orientation:landscape);

@font-face 규칙

• @font-face 규칙은 웹 폰트를 정의할 때 사용하는 규칙으로, 서버에 올려놓은 웹 폰트를 CSS 파일의 @font-face 규칙을 사용하여 서버에서 웹 폰트를 내려받아 글꼴을 표시한다.

@font-face {
    font-family: "myWebFont";
    src: local("NanumGothic"), url("NanumGothic.eot"), url("NanumGothic.ttf"), url("NanumGothic.woff");
}

* { font-family: "myWebFont"; }

@media 규칙

• @media 규칙을 사용해서 미디어 타입별로 스타일 시트을 지정할 수 있다.

/* 스크린에 표현될 때와 프린트할 때 서로 다른 스타일을 적용 */

<style>
    body { background-color: darkorange; }
    @media screen {
        body { background-color: black; color: white; }
    }
    @media print {
        body { background-color: white; color: black; }
    }
</style>

 

미디어 쿼리(media query)

• @media 규칙을 사용해서 매체 타입별로 스타일 시트을 지정하는 것을 미디어 쿼리라고 한다.
• 만약 웹 페이지에 접속하고 있는 기기의 매체 유형과 명시된 매체 유형이 일치하고, 모든 표현식이 참이면, 미디어 쿼리는 참을 반환하고 해당 블록 안에 명시된 CSS 스타일 코드가 실행된다.

1. <style>태그 안에 미디어 쿼리가 위치할 경우
@media only|not 매체유형 and (표현식) { CSS스타일코드; }

2. 외부 CSS 파일에 미디어 쿼리를 따로 저장
<link rel="stylesheet" media="매체유형 and|only|not (표현식)" href="CSS파일URL"/>

매체 유형(media type)

1. all 모든 매체에 사용함.
2. print 프린터 기기에 사용함.
3. screen 컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체에 사용함.
4. speech 웹 페이지를 읽어주는 스크린 리더(screenreader)에 사용함.

미디어 쿼리 속성들

• width와 height: 보여지는 화면의 넓이와 높이(px)
• device-width와 device-height: 매체 화면의 물리적 넓이와 높이(px)
• device-aspect-ratio: 매체 화면의 물리적 width/height 비율
• orientation: 매체 화면의 방향 - landscape, portrait
• color: 매체의 최대 색상 비트 수
• color-index: 매체에서 표현 가능한 색상의 개수
• monochrome: 흑백 매체에서의 픽셀당 비트 수
• resolution: 매체의 해상도

/* 임의로 해상도를 3단계로 구분하여 breakpoint를 정의 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Media Query로 정의하지 않은 스타일은 데스크탑 그룹을 위한 코드 */
    * { color: black; }
    
    /* 화면 크기가 800px 이하인 디바이스를 위한 정의 */
    @media screen and (max-width: 800px) {
      * { color: blue; }
    }
    
    /* 크기가 480px 이하인 디바이스를 위한 정의 */
    @media screen and (max-width: 480px) {
      * { color: red; }
    }
  </style>

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/