inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

모던 웹을 위한 상세한 CSS flexbox 이해1

질문있습니다

160

zosel0434

작성한 질문수 7

0

안녕하세요 선생님

해당 강의 4:42 부분에서 개발자 도구를 열어 확인 시, .container의 content 높이가 106px로 보입니다

.item의 content 높이가 102px인데 .container의 content 높이가 102px이 아닌 106px로 나오는 이유가 무엇인지 궁금합니다

javascript HTML/CSS es6

답변 1

0

잔재미코딩 DaveLee

안녕하세요.

container 같은 경우는 별도로 height 를 지정하지 않았기 때문에, 이 경우, div 가 block 요소 이면, 브라우저와 PC 환경에 따라 디폴트 height 가 자동으로 적절히 지정됩니다. 그래서, 106px 로 나오는 것으로 이해가 됩니다. 저같은 경우는 109px 로 나오더라고요.  딱 맞게 지정하고 싶으시다면, 다음과 같이 container 에 height 를 102px 로 명시적으로 지정하시면, 딱 맞게 지정도 가능합니다.

감사합니다.

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8" />
<style>
.container {
border: 1px solid red;
height: 102px;
}

.item {
border: 1px solid blue;
width: 100px;
height: 100px;
border-radius: 10px;
display: inline-block;
}
</style>
</head>

<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>

</html>

교육기간을 연장할 수 있는지 문의드립니다.

0

54

1

메일 확인부탁드립니다

0

69

1

CodeSandbox Vanilla 질문있습니다

0

70

1

part1을 수강하지 않아도 지장이 없다 하셨는데

0

120

1

강의에 관해 문의 드립니다.

0

107

1

메일확인 부탁드립니다.

0

97

1

14강 - 72,73번 강의 영상이 동일한거 같습니다.

0

118

1

Symbol 관련 테스트 코드 실행 결과 문의

0

153

1

호환성 관련 태그

0

126

1

강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요

0

157

1

강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요

0

154

1

div id="highlighter"가 강의화면에는 없는데 왜 샌드박스파일에는 있는지 궁금해요

0

94

1

강의화면에 height 가 vh가 아닌 vw라고 나와있는데 뭐가맞는거죠

0

129

1

메일 확인 부탁드립니다.

0

155

1

메일 확인 부탁드립니다

0

155

1

특별한 형태의 javascript배열에서

0

146

1

메일 확인부탁드립니다!

0

170

1

codesandbox 업데이트..

0

153

1

pdf 파일에 있는 링크주소로 들어가지지가 않습니다.

0

275

2

강의에서 알려주신 Properties for the flex container 복습 사이트, 검색 발견되어서 공유드립니다~

0

160

1

removeEventlistener 를 왜 해주어야 하는지

0

234

1

100vw 관련 질문

0

349

2

VS CODE html:5 <tab>기능이 안됩니다

0

363

1

[모던웹페이지 만들기9](1:40)class-desc 카드부분관련

0

257

2