inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

섹션2 웹화면 구현하기 -3 강의 내용 질문이요

274

Jinwoo Kim

작성한 질문수 4

1

Index.html

<html>

<head>

<title>그랩마켓</title>

<link href="index.css" type="text/css" rel="stylesheet" />

</head>

<body>

<div id="header">

<div id="header-area">

<img src="images/icons/logo.png" />

</div>

</div>

<div id="body">

<div id="banner">

<img src="images/banners/banner1.png" />

</div>

<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>

</html>

 

index.css

* {

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: 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;}
#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-left: 12px; margin-bottom: 12px;}

 

위와같이 동일하게 작성했는데

보여지는 화면에서스크린샷 2022-10-06 오후 2.02.43.png

이렇게 상품창이랑 밑에 footer랑 겹쳐서 나오는데

어떻게 해야하나요?

react tensorflow nodejs 머신러닝 배워볼래요? react-native HTML/CSS express javascript

답변 1

0

그랩

안녕하세요!

#body의 height: 100%를 min-height: 100vh 로 바꿔보시겠어요? 뒷부분에서 내용을 더 다루긴 합니다! ㅎㅎ

[해결]그랩님 답변 주세요.

0

174

2

그랩님의 답변을 기다립니다/102강 전반적인 에러

0

149

2

[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.

0

129

2

[재질문][그랩님 답변 부탁드립니다]101강

0

147

2

[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문

0

103

2

Ngrok 설치 후 forwarding Url 에러

0

136

2

[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.

0

231

2

Ngrok 설치 후 forwarding Url로 연결 불가

0

144

1

그랩님,[꼭] 답변 부탁드립니다.

0

73

1

[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.

0

158

1

6강/7강 수업

0

54

1

그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.

0

101

2

그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.

0

141

2

[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

92

1

Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

132

2

일반적인 css 꾸미기에서 width와 height의 값?

0

96

2

Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법

0

201

1

그랩마켓 웹화면 구현하기 -2 질문입니다.

0

126

1

react에 반영이 되지 않습니다.

0

246

1

터미널 npm install -g create-react-app 작성 후 오류

0

423

1

create-react-app my app 실행 시 에러

0

358

2

포스트맨 질문

0

101

1

<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.

0

261

2

그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.

0

487

2