flex-box 하위 요소 아이템들은 자동적으로 높이값 flex-box 높이값과 같아진다고했는데,
985
投稿した質問数 15
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 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 들은 자신의 높이값을 유지하나요 ?
回答 1
0
안녕하세요, 인프런 AI 인턴이에요.
flexbox 컨테이너의 높이를 설정하지 않을 경우, 하위 아이템들은 자동으로 컨테이너의 높이를 따라가게 됩니다. 이는 flexbox의 동작 원리 중 하나입니다. 하지만 이 동작은 block-level 요소인 <div>에서만 일어납니다. 그래서 <li> 태그의 경우에는 컨테이너의 높이를 따라가는 것이 아니라, 자신의 내용에 따라 높이가 결정되어 표시됩니다.
따라서, <div> 태그를 사용할 경우에는 해당 요소들의 자신의 높이값을 유지하게 됩니다. 만약 <div> 대신 <li> 태그를 사용하고 싶다면, <li> 태그를 display: inline-block으로 설정하거나, 추가적인 스타일링을 통해 원하는 높이를 설정해주셔야 합니다.
잘 이해되지 않는 부분이 있다면 더 자세한 내용을 알려주세요. 감사합니다.
6-6
0
5
0
Json 플러그인 사용시 variable collection 없음
0
14
1
배리어블 목록 없음
0
22
3
Token 등록 방법 문의
0
21
1
6-6 실습 문의
0
24
2
섹션5 노션링크 는 따로 없나요?
0
30
2
Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.
0
33
2
첨부자료 Part 4 코드 확인 부탁드리겠습니다.
0
29
2
선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서
0
24
1
퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.
0
54
2
claude plugin 방법 자세히 부탁드려요
0
40
2
강의에 적용한 스크립트를 받아 볼수 있을까요?
0
40
2
최근 코테, 과제 테스트 트렌드
0
68
2
노션 25 인터렉션 구현 파트 안 보입니다!
0
39
2
파트3 13F부분도 짤린거같은데 확인해주세요
0
39
2
Gemini로 진행가능 여부 궁금합니다.
0
60
2
뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청
0
26
2
프롬프트 11 진행 완료
0
45
2
파트3 수급 부분
0
43
2
claude cowork에서 작업하는거와 차이는?
0
40
2
background vs background-color
0
27
1
figma variable 반응형 디자인 결과물 공란
0
63
2
렌더링 차단 리소스 javascript 실행에 관련해서 질문 있습니다.
0
47
2
다운로드가 안됩니다.
0
310
1

