MediaQuery 사용

MediaQuery 는 반응형 웹을 만들때 어떤 특정 조건이 만족하게 되면 적용되는 css 이다

사용 예제)

<style>

@media(min-width: 578px) {

.bg-yellow{

background-color: yellow;

}

아래의 media query 의 중괄호 안에 작성한 css 는 조건부로 적용된다

( ) 안의 조건이 true 인 경우에만 적용된다.

따라서 device 의 폭이 최소 768px 이상이 되어야 지만 적용된다.

@media(min-width: 768px) {

.bg-green {

background-color: green;

}

</style>

</head>

<body>

</body>

</html>

폭이 768px 이상인 경우 배경색이 초록색으로 바뀐다.

폭이 578px~768px 사이인 경우 배경색이 노란색으로 바뀐다.

폭이 578px 이하가 될 경우 배경색이 사라진다.

Rubbery