조건부 그룹 at-규칙
공통 구문을 공유하고 그 각각은 중첩 문(규칙 집합(ruleset) 또는 중첩 @-규칙 중 하나)을 포함
모두 일반 semantic 의미를 전달
모두 언제라도 참 또는 거짓 중 하나로 평가하는 어떤 유형의 조건을 링크
-> 조건을 참으로 평가하면, 그룹 내 모든 문이 적용 됌
@규칙(at-rule)
식별자가 뒤따르는 at 기호('@' )로 시작하는 CSS문
세미콜론(';' ) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함
@import
다른 스타일 시트에서 스타일 규칙을 가져올 수 있는 규칙
스타일 시트에 사용되는 문자 인코딩을 지정하는 @charset 규칙을 제외하고 모든 다른 규칙보다 앞서 명시
추가하는 CSS 파일의 개수가 늘어날수록 웹 서버의 부하도 같이 커지게 되므로 HTML 문서에는 일정 개수의 CSS 파일만을 추가하고, 추가된 CSS 파일에서 @import 규칙을 이용해 또 다른 CSS 파일을 추가
@import 규칙을 이용하면 미디어 쿼리(media query)의 조건에 따라 필요한 CSS 파일만을 선별적으로 불러옴
ex) 프린트할 때에는 firstStyleSheet.css 파일을 부르고
스크린이 가로 방향으로 설정되어 있을 때는 secondStyleSheet.css 파일을 불러오는 예제
<head>
<title>@import 규칙</title>
@import url("firstStyleSheet.css") print;
@import "secondStyleSheet.css" screen and (orientation:landscape);
</head>
@font-face
웹 폰트(web font)를 정의
사용자의 컴퓨터에 설치되어 있지 않은 글꼴(font)을 웹 브라우저가 사용할 수 있음
먼저 웹 폰트를 서버에 올려놓고, CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의하고 추가
그러면 해당 웹 페이지에 접속하는 모든 웹 브라우저는 자동으로 서버에서 웹 폰트를 내려받아 해당 글꼴을 표시
<style>
@font-face {
font-family: "myWebFont";
src: local("NanumGothic"), url("NanumGothic.eot"), url("NanumGothic.ttf"), url("NanumGothic.woff");
}
* { font-family: "myWebFont"; }
</style>
@media
서로 다른 미디어 타입을 위한 맞춤식 스타일 시트를 지원
매체 유형과 하나 이상의 표현식로 구성된 미디어 쿼리 사용 가능
미디어 쿼리는 width, height, color 속성과 같은 미디어 관련 속성을 이용한 표현식을 통해 스타일이 적용범위 조절 가능
미디어 쿼리를 사용하면 콘텐츠를 별도로 변경하지 않아도 웹 페이지에 접속중인 기기에 알맞은 형태로 스타일 조정
ex) HTML 문서가 스크린에 표현될 때와 프린트할 때 서로 다른 스타일을 적용
<style>
body { background-color: darkorange; }
@media screen {
body { background-color: black; color: white; }
}
@media print {
body { background-color: white; color: black; }
}
</style>
같은 파일 내의 <style>태그 안에 미디어 쿼리가 위치
@media only|not 매체유형 and (표현식) { CSS스타일코드; }
외부 CSS 파일에 미디어 쿼리를 따로 저장
<link rel="stylesheet" media="매체유형 and|only|not (표현식)" href="CSS파일URL"/>
미디어 쿼리 -> 반환값 참
웹 페이지에 접속하고 있는 기기의 매체 유형과 명시된 매체 유형이 일치하고, 모든 표현식이 참(true)이면, 미디어 쿼리는 참(true)을 반환
미디어 쿼리의 반환값이 참 -> 해당 블록 안에 명시된 CSS 스타일 코드가 실행
에 and, only, not 등과 같은 키워드를 사용하여 더욱 복잡한 조건을 명시 가능
매체 유형(media type)
all : 모든 매체에 사용
print : 프린터 기기에 사용
screen : 컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체에 사용
speech : 웹 페이지를 읽어주는 스크린 리더에 사용
미디어 쿼리(media query) 속성
orientation 속성을 제외한 모든 속성의 앞에는 min 또는 max 접두사를 사용 가능
적절히 활용하면 반응형 웹 사이트 제작 가능
width : 화면의 너비
height : 화면의 높이
device-width : 매체 화면의 너비
device-height : 매체 화면의 높이
devie-aspect-ratio : 매체 화면의 비율
orientation : 매체 화면의 방향
color : 매체의 색상 비트 수
color-index : 매체에서 표현 가능한 색상의 개수
monochrome : 흑백 매체에서의 픽셀당 비트 수
resolution : 매체의 해상도
CSS3 미디어 쿼리(media query) 예제
뷰포트의 너비가 480픽셀이거나 그 이하일 경우에는 배경색을 darkorange로
뷰포트의 너비가 그 초과일 경우에는 배경색을 lightblue로
<style>
body { background-color: darkorange; }
@media screen and (min-width: 480px) {
body { background-color: lightblue; }
}
</style>
웹 브라우저에서 실행하면 배경색을 검정색으로, 텍스트의 색상은 흰색으로 표현
웹 페이지를 프린트하게 되면 배경색을 흰색으로, 텍스트의 색상을 검정색으로 바꿔서 프린트
<style>
@media screen {
body { background-color: black; color: white; }
}
@media print {
body { background-color: white; color: black; }
}
</style>
@charset
스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 함
조건부 그룹 at-규칙 내에 사용 불가
여러 @charset at-규칙이 정의된 경우, 첫 번째 것만 사용
HTML 요소의 style attribute 또는 HTML 페이지의 문자 집합과 관련 있는 <style> 요소 내에서 사용될 수 없음
@document(en-US)비표준지원이 중단되었습니다
@scope(en-US)Experimental
@starting-style(en-US)Experimental
.. 등등
https://www.tcpschool.com/css/css3_expand_mq
https://developer.mozilla.org/ko/docs/Web/CSS/At-rule
https://www.tcpschool.com/css/css_advanced_rules
https://developer.mozilla.org/ko/docs/Web/CSS/@charset
