인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요 똑같이 한거 같은데 확인 해보니 달라서 질문 글 올립니다 ㅜㅜ
작성
·
128
1
Css 부분
* {
margin: 0;
padding: 0;
}
#header {
height: 64px;
display: flex;
justify-content: center;
border-bottom: 1px solid black;
}
#body {
height: 100%;
width: 1024px;
margin: 0 auto; /*부모로 부터 중앙 정렬*/
padding-bottom: 24px;
}
#footer {
height: 200px;
background-color: red;
}
#banner {
height: 300px;
background-color: yellow;
}
#header-area {
width: 1024px;
height: 100%;
/* margin: 0 auto; */
display: flex;
align-items: center;
}
#header-area > img {
width: 128px;
height: 36px;
}
#banner > img {
width: 100%;
height: 300px;
}
#body > h1 {
margin-top: 16px;
}
#product-list{
display: flex;
flex-wrap: wrap;
margin-top: 12px;
}
.product-card {
width: 180px;
height: 300px;
background-color: gray;
margin-right: 12px;
margin-bottom: 12px;
}
Html 부분
<h1>판매되는 상품들</h1>
<div id="product-list">
<div class="product-card"></div>
<div class="product-card"></div>
<div class="product-card"></div>
<div class="product-card"></div>
<div class="product-card"></div>
<div class="product-card"></div>
</div>
</div>
<div id="footer"></div>
확인을 해 보니 밑의 결과 처럼 나오는데 원래 이런건지 맥북이 아니라서 이러는건지 도통 모르겠어서..
넵 뒷 부분에 body의 height를 100vh로 두는 내용이 나옵니다 :)