[CSS] 미디어타입

[미디어타입]

CSS2 도입 미디어타입 (유형) ?

다른 미디어 (컴퓨터, 프린터, 스마트폰, TV 등등) 에 서로 다른 스타일 적용 규칙 정의

CSS2 도입 미디어타입 (유형)

CSS2 미디어유형 + 확장 (인쇄)

[미디어 쿼리]

1. 뷰포트의 너비와 높이
2. 장치의 너비와 높이
3. 방향 (가로/세로모드)

반응형 웹

[미디어 쿼리] 는 여러장치 (미디어) 에 맞춤형 스타일시트를 제공하기 위해서 사용되는 기술...

[미디어 쿼리 형식]

@media not|only mediatype and (expressions 참, 거짓 - 여러개 표현식) {
    css 코딩;
}

mediatype

• all
• print
• screen
• speech
• not 특정 미디어타입만 적용 X
• only 특정 미디어타입만 적용 O
• all 기본값.

 

 

    480 미만일 경우 배경색 red

    480 이상일 경우 배경색 blue
@media screen and(min-wdith:480px){
    body{
        background-color:blue

    }

}