반응형 웹(미디어 쿼리)

높이나 너비(크기)에 반응하는 웹 -> 미디어 쿼리(@media)를 이용하여 구현

 

-매체유형

screen : 컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체에 사용

print : 프린터 기기

all : 모든 매체

<style>
	@media screen and (max-width:767px) {
		html {
			background: red;
			color : white;
		}}
	@media screen and (min-width:768px) and (max-width: 959px) {
		html {
			background: green;
			color : white;
			font-weight: bold;
		}}
	@media screen and (min-width:960px) {
		html {
			background: blue;
			color : white;
			font-weight: bold; 
		}}
		
	}
</style>

<style>
	@media screen and (orientation: portrait) {		/* 세로방향 */
		html {
			background: red;
			color : white;
		}}
	@media screen and (orientation: landscape) {		/* 가로방향 */
		html {
			background: green;
			color : white;
			font-weight: bold;
		}}
</style>