안녕하세요. span 태그의 부모에 display: flex 를 적용하는데 왜 적용되는지 아무리 생각해도 이해가 되지 않아 질문드립니다.
<li className={styles.menu} key={menu.name}>
<span className={styles.name}>{menu.name}</span>
<span className={styles.price}>{menu.price}</span>
</li>위 코드는 DetailContent.tsx 코드의 일부입니다.
위 코드에서 span 태그의 경우 inline 태그이기 때문에 부모 태그인 li 태그에 display: flex 속성을 적용해도 의미가 없는 것이 당연하다고 생각했습니다.
그런데 위 코드에서는 inline 태그인 span 태그가 display: flex에 영향을 받고 있더라구요.
혹시 제가 잘못 이해하는 걸까요? 혹은 다른 이유가 있는걸까요??
(Next.js 관련 질문이 아니라 너무 지엽적인 질문이라 죄송합니다...!)
Answer 2
1
안녕하세요. 주말동안 바빠 답변이 늦었습니다ㅠㅠ
인프런 AI의 답변대로, flex item이 inline(span)이라고해서 flex의 영향을 받지 않는 것은 아닙니다! 부모 container(li)의 Flex 속성에 따라 자식 item(span)들은 영향을 받게됩니다. 또한, 자식 item(span)에 flex-item의 CSS (ex> 'flex: 1')를 적용하는 것도 가능합니다.
감사합니다! :)
1
안녕하세요, 인프런 AI 인턴이에요.
해당 코드에서 span 태그가 부모인 li 태그에 display: flex 속성을 적용했을 때, span 태그가 inline 태그이므로 정확히는 display: flex 속성이 적용되지 않는 것은 맞습니다. 하지만, inline 태그가 display: flex 속성을 가지고 있는 부모 요소에 포함될 경우, inline 태그는 flex-item으로 간주되며 flexbox 레이아웃에 영향을 받게 됩니다. 즉, inline 태그는 가로로 배치되는 flex-item으로 동작하게 되는 거죠.
따라서, span 태그가 부모인 li 태그에 display: flex 속성을 적용했을 때, span 태그들은 가로로 배치되어 표시될 수 있게 됩니다. 이는 inline 요소가 지정된 크기와 상관없이 직접 지정한 flex 속성에 따라 배치되는 특징 때문입니다.
참고로, inline 요소가 아닌 block 요소로 바꾸고 싶다면 span 요소에 display: block 속성을 추가하면 됩니다.
아무래도 소중한 질문에 대한 답변을 드리지 못한 것 같아 죄송합니다. 추가적인 궁금한 점이 있다면 언제든지 질문해주세요. 수고하세요!
API 라우터를 사용해야 하는 경우에 대해
1
148
1
키보드 어떤 거 사용하시나요
1
351
1
next.js 멀티플 런타임 관련해서 질문 올립니다..
1
358
2
아주 기초적인 질문입니다.
1
321
1
서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?
1
1169
2
수업을 듣다가 SSR에 관하여..
1
551
2
interface 와 type
1
375
1
엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.
1
383
1
onLoad함수 (script태그의 onLoad X)
1
425
1
dynamic에 대한 질문
1
447
1
SSR vs SSG
1
476
2
NoSSR 관련한 질문입니다:)
1
375
1
a tag 질문 !
1
327
2
8분 20초 배포 관련
1
324
2
안녕하세요! 구글 서치 콘솔에 등록하는 도중 다음 오류가 뜹니다
0
2675
2
emotion styles 파일이 빌드시 경고로 뜹니다.
1
438
1
naver map 이 출력되지 않습니다.
1
481
1
페이지에 site맵 존재시 next Link는 csr 처럼 싹가져오게 되나요?
1
263
2
Failed to load resource: the server responded with a status of 404 ()
1
1033
2
VSCode 익스텐션 궁금합니다.
1
354
1
상태관리 질문 있습니다!
1
447
1
swr에 대한 질문입니다. (용어 관련)
1
372
1
swr 질문입니다!
1
336
1
naver로고 important 값 주는 이유
1
366
2