Samla's Study

 

반응형 웹 (Responsive Web)

• 브라우저(화면) 크기에 따라 요소의 크기와 배치가 유동적으로 변하는 웹
• CSS "@media" 설정으로 브라우저 크기에 맞춘 요소 설정을 변경할 수 있다.

<style>
	/* 기본적으로 적용되는 css */
	h1 {
	font-size: 24px;
	}


	p {
	font-size: 12px;
	}


	/* 브라우저 넓이 768 px 이상일 경우 적용되는 css */
	@media (min-width: 768px) {	
		h1 {
		fontsize: 36px;
		}
		p {
		font0size: 24px;
		}
	}


	/* 브라우저 넓이 992 px 이상일 경우 적용되는 css */
	@media (min-width: 992px) {
		h1 {
		fontsize: 48px;
		}

		p {
		font0size: 32px;
		}
	}  
</style>


<h1>반응형웹 만드는 CSS 설정</h1>
<p>브라우저 넓이 조건에 맞추어 요소의 크기와 배치 방법을 변경할 수 있습니다.</p>