[HTML5&CSS3] 규칙(@-rule)

728x90

1. @import

문서 안에서 외부 CSS혹은 Font 등 다른 요소의 파일을 추가합니다.

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
@import url(sample.css);
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
}
</style>
</head>
<body>
    <div>Hello, World!</div>
</body>
</html>

@import는 기존 CSS파일을 추가하던 <link rel="stylesheet" href="sample.css" /> 구문과 동일한 역할을 수행합니다.

2. @font-family

문서 안에서 특정 font사용을 지정합니다.

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
@font-face {
    font-family: 'myfont';
    src: local('gulim'), url('gulim.eot')
}

div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
   
   font-family: 'myfont';
}
</style>
</head>
<body>
    <div>Hello, World!</div>
</body>
</html>

font-family의 값은 단순한 명칭을 지정하며 임의의 내용을 지정할 수 있습니다. src는 실제 폰트를 다운로드하는 속성이며 local은 사용자 컴퓨터에 있는 폰트를 사용하도록 하며 만약 해당하는 폰트가 없는 경우 url에 지정된 주소에서 폰트를 내려받도록 합니다.

해당 폰트 적용을 위해서는 font-family속성을 사용해야 하며 @font-face에서의 font-family값과 동일하게 맞춰주면 됩니다.

이외에 font-weight로 폰트의 두께를, font-style로 폰트의 스타일을 지정할 수도 있습니다.

3. @media

사용자가 사용하는 장치에 따라 개별적인 스타일을 적용하여 웹문서가 적절히 보이도록 하는 규칙입니다. 예를 들어 CSS3이전에는 아래와 같이 2개의 외부 CSS파일을 사용하는 경우

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<link rel="stylesheet" href="A.css" />
<link rel="stylesheet" href="B.css" />
<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
}
</style>
</head>
<body>
    <div>Hello, World!</div>
</body>
</html>

link에 media속성을 지정하여 특정 장치에서만 해당 CSS파일이 사용되도록 할 수 있었습니다.

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

참고로 @import에서는

@import url(sample.css) print;

와 같이 사용합니다.

이와 같은 방법으로 CSS3에서는 직접 @media 규칙을 작성하여 다음과 같이 스타일을 분리할 수 있습니다.

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
div
{
   width:100px;
   height:75px;
   border:1px solid black;
}

@media print {
    div {
        background-color: red;
    }
}

@media screen {
    div {
        background-color: blue;
    }
}
</style>
</head>
<body>
    <div>Hello, World!</div>
</body>
</html>

또한 @media에서는 width나 height속성을 사용해 화면의 크기에 따라 별도의 스타일을 적용하도록 할 수 있습니다.

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
div
{
   width:100px;
   height:75px;
   border:1px solid black;
}

@media print and (max-width: 500px) {
    div {
        background-color: red;
    }
}

@media screen and (min-width:800px) {
    div {
        background-color: blue;
    }
}
</style>
</head>
<body>
    <div>Hello, World!</div>
</body>
</html>

max-width는 화면의 넓이가 0~500까지를 의미하며 min-width는 최소 800부터 그 이상의 크기를 의미합니다. 물론 min-width와 max-width를 범위를 명확히 지정할 수도 있습니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   border:1px solid black;
}

@media print and (max-width: 500px) {
    div {
        background-color: red;
    }
}

@media screen and (min-width: 800px) and (max-width: 1000px) {
    div {
        background-color: blue;
    }
}
</style>

스마트폰이나 패드 같은 장치의 경우 화면이 회전할 수도 있는데 이는 orientation으로 지정할 수 있습니다.

<style type="text/css">
div
{
   width:100px;
   height:75px;
   border:1px solid black;
}

@media print and (max-width: 500px) {
    div {
        background-color: red;
    }
}

@media screen and (orientation: landscape) {
    div {
        background-color: blue;
    }
}

@media screen and (orientation: portrait) {
    div {
        background-color: blue;
    }
}
</style>

728x90

저작자표시 비영리 변경금지

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5&CSS3] Less 스타일시트 - 변수, 연산, 선택자 (0)	2020.01.20
[HTML5&CSS3] Less 스타일시트 - 개요 (0)	2020.01.10
[HTML5&CSS3] 3차원 구현 (0)	2020.01.10
[HTML5&CSS3] 2차원 구현 (0)	2020.01.10
[HTML5&CSS3] 키 프레임(keyframes)을 통한 애니메이션 구현 (0)	2019.12.25

'Web > HTML5 & CSS3' 카테고리의 다른 글

티스토리툴바