프로그래밍 스터디( 공부노트 )/HTML, CSS
css 반응형 예제 : display: flex 이용하기
김갤럭시
2021. 12. 27. 20:58
반응형
부모 요소에 적용하고
display: flex
justify-content: center;
align-items: center;
flex-wrap: wrap;
자식에게 폭만 잘 지정해주면
이러한 것을 폭을 줄여주면 잘 넘어간다.
그러나 테블릿 일 때 2단으로 보여주고
모바일 화면일 때 80%찬 화면으로 보여주려면
미디어 쿼리도 잘 써줘야 한다.
코딩을 시작하면....
html 부분은 단순함
|
<div class="explain-container">
<div>
<h4>피자</h4>
<p>풍부한 토마토 소스</p>
</div>
<div>
<h4>햄버거</h4>
<p>풍부한 불향</p>
</div>
<div>
<h4>치킨</h4>
<p>깊은 간장맛</p>
</div>
<div>
<h4>콜라</h4>
<p>느끼함을 제거하는 맛</p>
</div>
</div>
|
css 부분에는 특별하게 미디어쿼리를 사용한다.
|
.explain-container {
font-size: 25px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.explain-container > div {
background-color: rgb(185, 185, 185);
width: 300px;
padding: 10px;
margin: 10px;
border-radius: 10px;
}
@media screen and (max-width: 1200px) {
.explain-container > div {
width: 40%;
}
}
@media screen and (max-width: 768px) {
.explain-container > div {
width: 80%;
}
}
|
만약에 폭을 줄이면 그냥 요소가 밀려나가게 하려면
미디어 쿼리는 사용할 필요가 없고 width 만 잘 설정하면 된다.
태블릿, 스마트폰을 고려한다면...
미디어 쿼리를 이용하여
태블릿의 폭은 40%, 스마트폰의 폭은 80%로 해준다.
반응형