-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
저도 가로 배치가 잘되다가 세로 배치가 되어 질문드립니다.
23.09.29 17:49 작성 23.09.29 18:55 수정 조회수 315
0
저도 강의 따라가다가 세로로 갑자기 변환되어서 답변 내용대로 해봤지만 고쳐지지를 않아서 질의 드립니다 아래 코드는 html코드입니다
<html>
<head>
<title>그랩마켓</title>
<link href="index.css" type="text/css" rel="stylesheet" />
<body>
<div id="header">
<div id="header-area">
<img src="images/images/icons/logo.png"/>
</div>
</div>
<div id="body">
<div id="banner">
<img src="images/images/banners/banner1.png"/>
</div>
<h1>판매되는 상품들</h1>
<div id="product-list">
<div class="product-card">
<img class="product-img" src="images/images/products/basketball1.jpeg"/>
<div class="product-contents">
<span class="product-name">농구공 1호</span>
<span class="product-price">50000원</span>
<div class="product-seller">
<img class="product-avatar" src="images/images/icons/avatar.png"/>
<span>그랩</span>
</div>
</div>
</div>
</div>
<div class="product-card">
<img class="product-img" src="images/images/products/keyboard1.jpg"/>
<div class="product-contents">
<span class="product-name">키보드 1호</span>
<span class="product-price">30000원</span>
<div class="product-seller">
<img class="product-avatar" src="images/images/icons/avatar.png"/>
<span>그랩</span>
</div>
</div>
</div>
<div class="product-card"></div>
<div class="product-card"></div>
</div>
<div id="footer"></div>
</body>
</head>
</html>아래는 css코드입니다
* {
margin: 0;
padding: 0;
}
#header{
height: 64px;
display: flex;
justify-content: center;
border-bottom: 1px solid gray;
}
#body{
min-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%;
display: flex;
align-items: center;
}
#header-area > img{
width: 128px;
height: 36px;
}
#body > h1{
margin-top: 16px;
}
#banner > img{
width: 100%;
height: 300px;
}
#product-list{
display: flex;
flex-wrap: wrap;
margin-top: 12px;
flex-direction: row;
}
.product-card{
width: 180px;
height: 300px;
margin-right: 12px;
margin-bottom:12px;
border: 1px solid rgb(230, 230, 230);
border-radius: 12px;
}
.product-img{
width: 100%;
height: 210px;
}
.product-contents{
display: flex;
flex-direction: column;
padding: 8px;
}
.product-name{
font-size: 14px;
}
.product-price{
font-size: 16px;
font-weight: 200px;
margin-top: 4px;
}
.product-seller{
display: flex;
align-items: center;
margin-top: 12px;
}
.product-avatar{
width: 24px;
}바쁘시겠지만 답변 해주시면 감사하겠습니다!
+해당 코드 진행 후 개발자 도구 이용해서 보면 flex에 의해 정해지지않은 보라색 칸이 있는데 해당 칸 처리가 힘들어 추가 질문 올립니다!
답변을 작성해보세요.
-2
인프런 AI 인턴
2023.10.01
안녕하세요, 인프런 AI 인턴이에요. 가로 배치가 세로로 변환되어서 원하는대로 되지 않는다고 하셨죠? 해당 코드를 보면서 문제를 파악해보도록 할게요.
먼저 코드를 보면 태그가 닫히지 않은 부분이 있습니다. 다음과 같은 부분입니다.
</div>
이 태그를 <div id="body"> 태그 위에 추가해주셔야 합니다. 그리고 태그들 사이에 공백과 줄바꿈도 추가해주시면 가독성이 좋아집니다.
그리고 문제가 된 원인은 CSS 파일을 사용하고 있지만, 해당 파일이 정상적으로 연결되어 있는지 확인해볼 필요가 있습니다. CSS 파일의 경로가 제대로 설정되어 있는지 확인해보세요.
만약 이로써 문제가 해결되지 않는다면, 강의에서 제공한 코드와 다른 부분이 있는지 확인해보세요. 문제의 원인을 파악하기 위해서는 코드의 다른 부분도 확인해야 할 수 있습니다. 해당 부분을 수정하시고, 결과를 알려주시면 다시 도움을 드릴게요. 수고하세요!
답변 1