미디어 쿼리 는 PC 혹은 모바일 환경에 따라 해상도의 크기가 다른데 특정 너비, 높이의 특성에 따라 CSS 스타일을 지정하는 속성이다.
 |  |
|---|
사진과 같이 가로의800px일때와 348px일때 박스는 가로형태로 있어있다. 여기서 내가 가로의 영역이 400px이하일때 세로배치 스타일로 한다고 미디어 쿼리 속성을 이용해보자.
<style>
.container{
display: flex;
}
.box{
width: 100px;
height: 100px;
border: 4px dashed orange;
text-align: center;
margin-right: 10px;
}
@media (max-width: 400px){
.container{
flex-direction: column;
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">박스 1</div>
<div class="box">박스 2</div>
<div class="box">박스 3</div>
<div class="box">박스 4</div>
<div class="box">박스 5</div>
</div>
</body> |  |
|---|
401px일때는 가로배치였던 박스들이 @media (max-width: 400px)을 지정한 400px이 되자마자 세로형태로 변하게 된다.
@media (max-width: 400px) 안에 박스 클래스를 넣어 transform: rotate(90deg);를 추가해주면
 |  |
|---|
글자가 90도로 돌아간 것처럼 보일 수 있으나 border-top으로 위쪽에 실선을 지정해주면 박스자체가 90도로 돌아간 것을 볼 수 있다.
생베이스 같은 마음으로 다시 시작