단위심화 강의 중..
안녕하세요 단위심화 강의 중 두 번째 실습 과정 중, 두 번째 줄에 사진이 3개만 들어가는데 왜 그런건지요..?? flex-wrap: wrap; 까지 적용시켰는데 영상과는 다르게 되네요..
답변 1
0
안녕하세요 liltjay님
더 정확한 문제 파악을 위해 전체적인 코드내용이 필요합니다
또한 박스의 총 개수가 몇 개인지 알려주시겠어요?
0
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06-02-calc2</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</div>
<div class="contents">
<div class="item">상품</div>
<div class="item">상품</div>
<div class="item">상품</div>
<div class="item">상품</div>
<div class="item">상품</div>
<div class="item">상품</div>
<div class="item">상품</div>
</div>
</div>
</body>
</html>css
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.sidebar {
width: 170px;
background-color: orange;
padding: 5px 15px;
}
.sidebar ul {
width: 100%;
padding: 0;
}
.sidebar ul li {
list-style: none;
padding: 5px 0;
color: #ffffff;
border-bottom: 1px dashed rgba(255,255,255,0.3); /* 메뉴 사이 구분선*/
}
.contents {
width: calc(100% - 170px);
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
}
.item {
width: 24%;/
height: 180px;
background-image: url("../img/dochihello.jpg");
}강의 영상에서는 사진이 총 8장이 들어가던데
저는 총 7장만 표시됩니다. 첫번째 장은 네 장으로 정상인데, 두번째 줄은 세 장입니다.
background vs background-color
0
28
1
노션 자료위치
0
86
2
강의 수강 후 실습
0
329
1
강의 내용과 같은 작업을 쉽게 도와주는 라이브러리 같은 것도 있나요?
1
312
1
강의학습시 작성한 코드를 블로그에 올려도 될까요?
0
395
2
안녕하세요 이미지 관련해서 질문이 있습니다,
0
366
1
codepen질문입니다.
0
305
2
transition질문있습니다~
0
350
1
섹션 5. position 강의 중 absolute와 relative의 사용법에 대한 질문 있습니다!
0
226
1
노션 학습 링크
0
375
1
반응형 실습
0
285
2
@media 미디어 쿼리 적용 안되는 이유
0
1263
1
35분 강의 내용중 :after 사용관련
0
271
2
코드캠프 로드맵 이후 질문사항
0
329
1
diary-date 부분 질문
0
315
1
transform 3번째 강의 질문
0
315
1
강의자료
0
471
1
학습자료 요청건
0
396
1
레이아웃 질문드려요~
0
385
1
vscode 새로운 폴더 불러오기
0
392
1
grid속성 6:36에 나오는 것.
0
320
1
left:calc(100% - 100px) 질문드립니다.
0
736
1
텍스트박스안에서 padding-bottom 이 이렇습니다
0
401
2
단위심화 강의 중 질문 있습니다.
0
348
1