CSS 추가 규칙과 반응형 웹

유준상·2022년 2월 6일
CSS3html5

HTML5/CSS3

목록 보기
7/7

  • 규칙(@-rule)이란?

    --> CSS 코드 중 @가 붙은 단어

  • @import 규칙

    --> CSS 파일에서 다른 CSS 파일을 추가하는 방법

    <head>
   <link rel="stylesheet" href="StyleSheetA.css" />
   <link rel="stylesheet" href="StyleSheetB.css" />
</head>

    2. @import 규칙을 사용한 스타일시트 추가

    --> CSS 파일의 규모가 커지면 코드를 쉽게 알아보기 위해 파일을 분리

    <head>
   <style>
       @import url(StyleSheetA.css);
       @import url(StyleSheetB.css);
   </style>
</head>

  • @font-face 규칙

    --> 웹 폰트를 생성할 때 사용하는 규칙

    기본 형태

    <style>
   @font-face {
       font-family: 'font name'; /* 추가하고자 하는 폰트의 이름 적용 */
       src: url('/content/file.eot');
       src: local() /* 사용자 pc 내부의 font */
            url() /* 사용자 pc 외부의 font */
   }
</style>

    @font-face 규칙의 속성

    1) font-family : 폰트 이름을 지정
    2) src : 폴트 파일을 지정
    3) font-weight : 폰트 두께를 지정
    4) font-style : 폰트 스타일을 지정

  • @media 규칙

    --> 다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙

    media 속성

    <link rel="stylesheet" href="desktop.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
/* 인쇄 화면에 적용 */

    @media 규칙

    @media screen {
    html {
        height: 100%;
        background: bloack;
    }
    body {
        color: white; font-family: serif;
    }
}
@media print {
    h1 {
        text-align: center;
        color: red; font-family: sans-serif;
    }
}

  • 반응형 웹

    미디어 쿼리 속성

    1) width
    2) height
    3) device-width : 장치의 너비
    4) device-height : 장치의 높이
    5) orientation : 장치의 방향
    6) device-aspect-ratio : 화면의 비율
    7) color : 장치의 색상 비트
    8) color-index : 장치에서 표현 가능한 최대 색상 개수
    9) monochrome : 흑백 장치의 픽셀당 비트 수
    10) resolution : 장치의 해상도
    --> orientation 속성을 제외하면 min, max 접두사를 사용할 수 있음

    접두사 예시

    <style>
   @media screen and (max-width: 767px) {
       html {
           background: red;
           color: white; font-weight: bold;
       }
   }
   @media screen and (min-width: 768px) and (max-width: 959px) {
       html {
           background: green;
           color: white; font-weight: bold;
       }
   }
   @media screen and (min-width: 960px) {
       html {
           background: blue;
           color: white; font-weight: bold;
       }
   }
</style>

    --> 지정한 웹 페이지 너비에 따라 다른 css가 적용된다!!
    반응형 웹 페이지를 만들기 위해서는 반드시 meta 태그를 입력해야한다

  • 화면 방향 전환

    --> orientation 소성을 사용하여 디바이스 방향 상태 확인 가능

    예시

    <style>
    @media screen and (orientation: portrait) {
        html {
            background: red;
            color: white; font-weight: bold;
        }
    }
    @media screen and (orientation: landscape) {
        html {
            background: green;
            color: white; font-weight: bold;
        }
    }
</style>

    * portrait : 수직 / landscape : 수평

profile
유준상
웹사이트 개발과 신발을 좋아하는 학생입니다.
이전 포스트

CSS3 변환

0개의 댓글