flex-box 하위 요소 아이템들은 자동적으로 높이값 flex-box 높이값과 같아진다고했는데,
1021
15 asked
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요 강의를 듣던중 flex-box 안에 있는 하위 요소들이 자동적으로 flex-box 높이 값을 먹는다고 했는데 실제로,
<ul class="container">
<li class="item">호랑이</li>
<li class="item">고양이</li>
<li class="item">냥냥이</li>
<li class="item">강아지</li>
<li class="item">고슴도치</li>
</ul>
.container { display : flex} 적용했을경우 li 태그들이 container 와 높이가 같은걸 확인 할 수있었습니다. 그런데 왜
<div class="container">
<div class="item">호랑이</li>
<div class="item">고양이</li>
<div class="item">냥냥이</li>
<div class="item">강아지</li>
<div class="item">고슴도치</li>
</div>인경우 container 하위 요소 div 들은 자신의 높이값을 유지하나요 ?
Answer 1
0
안녕하세요, 인프런 AI 인턴이에요.
flexbox 컨테이너의 높이를 설정하지 않을 경우, 하위 아이템들은 자동으로 컨테이너의 높이를 따라가게 됩니다. 이는 flexbox의 동작 원리 중 하나입니다. 하지만 이 동작은 block-level 요소인 <div>에서만 일어납니다. 그래서 <li> 태그의 경우에는 컨테이너의 높이를 따라가는 것이 아니라, 자신의 내용에 따라 높이가 결정되어 표시됩니다.
따라서, <div> 태그를 사용할 경우에는 해당 요소들의 자신의 높이값을 유지하게 됩니다. 만약 <div> 대신 <li> 태그를 사용하고 싶다면, <li> 태그를 display: inline-block으로 설정하거나, 추가적인 스타일링을 통해 원하는 높이를 설정해주셔야 합니다.
잘 이해되지 않는 부분이 있다면 더 자세한 내용을 알려주세요. 감사합니다.
연애인 사주는 그냥 넣어도 상관없나요?
0
36
1
14강. 업체 연결이 필요하신 분은 개인톡으로 문의해주세요.
0
38
1
인프당 무당 캐릭터 뽑는 프롬프트
0
45
2
10월 15일 삭제예정 강의 문의
0
42
1
강의가 중복됐어요
0
55
1
결제가 이루어지는 방식에 대한 문의
0
64
1
강의제목에 10/15일 삭제라고 나와있는데,
0
48
1
선생님 강의자료를 받을수 없어요! 메일보냈어요.
0
57
2
1강 동영상 재생 오류
1
67
2
헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?
0
44
1
Composition단계에서 `Layer`는 누가 만드는지
0
46
1
Strict Mode 예시 질문!
0
65
2
해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?
0
66
2
만일 실물을 택배로 배송해야 할 경우 주소지 입력하는 방법이 궁금해서요.
1
94
4
설명이 잘못된거같습니다.
1
79
2
31강 학습자료에 프롬프트가 엉뚱한것이 있어요
1
67
1
bitnami 설치
0
40
0
강의 소스 코드는 어디서 볼수 있나여?
1
71
1
자료집 관련
0
68
2
13. (App 2) 기본기 훈련 에서
0
98
1
17강 강의에 목데이터 첨부파일이 없습니다.
2
92
2
2. 어떤 도구를 사용하는 것이 가장 유리할까? 강의 중
0
65
1
11차시 Antigravity IDE 설치 후
1
75
1
다운로드가 안됩니다.
0
340
1

