[CSS3] 추가 규칙

🖼️  @import 규칙

• CSS 파일에서 다른 CSS 파일을 추가하는 방법
• CSS파일의 규모가 커지면 코드를 쉽게 알아보기 위해 파일 분리
• link 태그의 숫자를 줄일 수 있는 방법 

@import url(StyleSheetA.css);
@import url(StyleSheetB.css);

🖼️  @font-face 규칙

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

font-family	폰트 이름을 지정
src	폰트 파일 지정
font-weight	폰트 두께 지정
font-style	폰트 스타일 지정

🖼️  @media규칙

• 다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙
• HTML 페이지가 다양한 장치에서 실행되면서 중요하게 부각된 규칙  

<title> </title>
<link rel=" " href=" " media=" " />

🖼️  반응형 웹 

• 징치를 구분하고 장치의 크기나 비율 구분 가능

width	화면의 너비
height	화면의 높이
device-width	장치의 너비
device-height	장치의 높이
orientaton	장치의 방향
device-aspect-ratio	화면의 비율
color	장치의 색상 비트
monochrome	흑백 장치의 픽셀당 비트 수
resolution	장치의 해상도
color-index	장치에서 표현 가능한 최대 색상 수

@media screen and (max-width: ){

}
@media screen and (min-width: ) and (max-width: ){

}
@media screen and (min-width: ){

}

🖼️  화면 방향 전환 

• 화면 방향 전환을 확인하고 싶다면 orientation 속성 사용
• portrait 키워드 또는 landscape 키워드 적용하면 디바이스 방향 확인

@media screen and (orientation: ){
}
@media screen and (orientation: ){
}