-
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
상품이 아래로 나열되요 ㅜ
22.10.27 15:38 작성 조회수 213
0
똑같은 css파일인데 왜 다르게 나타날까요 ㅠㅠ위가 처음에 react없이 그냥 html로만 만든거구요
아래가 react로 만든건데
같은 index.css파일인데 왜 다르게 나타날까요 ㅠㅠ
답변을 작성해보세요.
3
그랩
지식공유자2022.10.29
아마 product-list쪽 flex 설정 부분이 다르게 작성되지 않았을까 하는데요.
index.css를 보여주시면 조금 더 확인하기 쉬울 것 같아요!
thhwang
질문자2022.10.30
* {
margin: 0;
padding: 0;
}
#header {
height: 64px;
display: flex;
justify-content: center;
border-bottom: 1px solid gray;
}
#body {
height: 100%;
width: 1024px;
margin: 0 auto;
padding-bottom: 24px;
}
#footer {
height: 200px;
background-color: rgb(230, 230, 230);
}
#banner {
height: 300px;
background-color: yellow;
}
#header-area {
width: 1024px;
height: 100%;
display: flex;
align-items: center;
}
#header-area > img {
width: 240px;
height: 60px;
}
#banner > img {
width: 100%;
height: 300px;
background-color: #def1de;
}
#body > h1 {
margin-top: 16px;
}
#product-list {
display: flex;
flex-wrap: wrap;
margin-top: 12px;
}
.product-card {
width: 180px;
height: 300px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid rgb(230, 230, 230);
border-radius: 12px;
overflow: hidden;
}
.product-img {
width: 100%;
height: 180px;
}
.product-contents {
display: flex;
flex-direction: column;
padding: 10px;
}
.product-name {
font-size: 20px;
margin: 0 auto;
}
.product-price {
font-size: 16px;
font-weight: 600;
margin: 0 auto;
margin-top: 4px;
}
.product-seller {
display: flex;
align-items: center;
margin-top: 12px;
}
.product-avatar {
width: 24px;
}
이렇게 했습니다!
그랩
지식공유자2022.11.05
음 잘 작성해주신 것 같은데요!
css가 같으면 아마 react쪽 컴포넌트에서 product-list가 id에 잘들어가 있는지 확인해보시면 좋을 것 같아요! 계속 안되면 개발자 도구를 활용해서 해당 요소에 css가 잘 작성되었는지 확인해보면 좋을 것 같네요
https://www.youtube.com/watch?v=rcuycJWjCA0&ab_channel=%EC%86%8C%ED%94%84%ED%8A%B8%EC%A1%B4
답변 1