[HTML5&CSS3] 규칙(@-rule)
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>