규칙(@-rule)이란?

스타일시트 용어로 규칙이라고 부릅니다.

@import규칙

@import 규칙은 css파일에서 다른 CSS 파일을 추가하는 방법입니다.
지금까지는 HTML 페이지에 외부 CSS 파일을 추가할 때 아래 코드와 같은 방법을 사용했습니다.

<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/style.css">

@import규칙은 규칙 뒤에 url()함수를 사용해 파일 경로를 입력해서 사용합니다.

<style>
    @import url(css/index.css);
    @import url(css/style.css);
</style>

@font-face 규칙

웹 폰트 업체에서 지원하지 않는 폰트는 자체적으로 지원해야 합니다. @font-face 규칙은 이러한 웹 폰트를 생성할 때 사용하는 규칙입니다.

우선 @font-face 규칙에는 반드시 font-family 속성이 포함되어야 합니다. font-family 속성에는 추가하고자 하는 폰트의 이름을 적용합니다. 폰트 이름은 마음대로 지정하면 됩니다.

   <style>
        @font-face {
            font-family:'AAA';
        }
   </style>

src 속성도 반드시 입력해야 하는 속성이며 폰트를 지정합니다. src 속성에는 local() 함수와 url()함수를 사용합니다. local() 함수는 사용자의 컴퓨터 내부에 있는 폰트를 사용하는 함수이고 url() 함수는 사용자의 컴퓨터에 존재하지 않는 폰트를 지정하는 함수입니다.

 <style>
        @font-face {
            font-family:'AAA';
            src: local('NanumGothic'),
            url('NanumGothic.eot'),
            url('NanumGothic.ttf'),
            url('NanumGothic.woff');
        }
        *{
            font-family: 'AAA';
        }
    </style>

@media 규칙

@media 규칙은 다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙입니다. 최근 HTML 페이지가 다양한 장치에서 실행되면서 중요하게 부각된 규칙입니다.
❗️media 속성을 사용하면 음성 장치 부처 점자는 물론 프린터와 텔레비전에 맞게 스타일시트를 사용할 수 있습니다(물론 웹 브라우저에서 지원해야 사용할 수 있습니다.)

<link rel="stylesheet" href="css/desktop.css" media="screen">
<link rel="stylesheet" href="css/print.css" media="print">

위의 코드는 HTML4.01 버전부터 지원하던 방법으로 link 태그의 속성을 사용해 미디어 장치에 맞는 스타일시트를 제공하는 방입니다.

이제 CSS3부터 추가된 @media 규칙을 살펴봅시다.

<style>
       @media screen {
        html{
            height: 100%;
            background: black;
        }
        body{
            color: white;
            font-family: serif;
        }
    }
        @media print {
            h1{
                text-align: center;
                color: red;
                font-family: serif;
            }
        }
    </style>

🤔@import 규칙과 미디어 쿼리 병행 사용

<style>
    @import url(css/desktop.css) screen;
    @import url(css/print.css) print;
</style>

반응형 웹

이번엔 min 속성과 max 속성을 함께 사용해 장치의 화면 크기를 구분했습니다.

<style>
    
        /*화면 너비 0픽셀~767픽셀*/
        @media screen and (max-width:767px) {
            html{
                background: red;
                color: white;
            }
            
        }

        /*화면 너비 767픽셀~959픽셀*/
        @media screen and (min-width: 767px) and (max-width: 959px){
            html{
                background: green;
                color: white;
            }
        }

        /*화면 너비 960픽셀~무한너비*/
        @media screen and (min-width:960px){
            html{
                background: blue;
                color: white;
            }
        }
   
</style>

❗️반응형 웹과 관련된 주의사항

meta 태그를 입력하지 않으면 웹 페이지에 화면 너비와 관련딘 정보를 전달할 수 없으므로 문제가 발생할 수 있습니다. 반응형 웹 페이지를 만들 때는 반드시 meta 태그를 입력해야 한다는 것을 기억해야 한다.

화면 방향 전환

미디어 쿼리를 사용하면 디바이스가 수평 상태로 있는지 수직 상태로 있는지도 확인할 수 있습니다. 화면 방향 전환을 확인하고 싶다면 orientation 속성을 사용합니다. orientation 속성에 portrait 키워드 또는 landscape 키워드를 적용하면 디바이스의 방향을 확인할 수 있습니다.

<style>
  /* 화면 너비 0픽셀~767픽셀*/
        @media screen and (orientation: portrait) {
            html{
                background: red;
                color: white;
            }
            
        }

        /*화면 너비 767픽셀~959픽셀*/
        @media screen and (orientation: landscape) {
            html{
                background: green;
                color: white;
            }
        }
</style>