• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

안녕하세요. span 태그의 부모에 display: flex 를 적용하는데 왜 적용되는지 아무리 생각해도 이해가 되지 않아 질문드립니다.

23.08.18 16:30 작성 23.08.18 16:43 수정 조회수 331

1

<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 관련 질문이 아니라 너무 지엽적인 질문이라 죄송합니다...!)

course-thumbnail

Next.js 시작하기(feat. 지도 서비스 개발)

DetailSection UI 완성하기

강의실 바로가기

답변 2

·

답변을 작성해보세요.

1

박용주님의 프로필

박용주

지식공유자

2023.08.21

안녕하세요. 주말동안 바빠 답변이 늦었습니다ㅠㅠ

인프런 AI의 답변대로, flex item이 inline(span)이라고해서 flex의 영향을 받지 않는 것은 아닙니다! 부모 container(li)의 Flex 속성에 따라 자식 item(span)들은 영향을 받게됩니다. 또한, 자식 item(span)에 flex-item의 CSS (ex> 'flex: 1')를 적용하는 것도 가능합니다.

감사합니다! :)

수병수병님의 프로필

수병수병

질문자

2023.08.21

아닙니다.
지엽적인 질문이었는데도 친절하게 답변해주셔서 너무나도 감사드립니다!!

1

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.08.20

안녕하세요, 인프런 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 속성을 추가하면 됩니다.
아무래도 소중한 질문에 대한 답변을 드리지 못한 것 같아 죄송합니다. 추가적인 궁금한 점이 있다면 언제든지 질문해주세요. 수고하세요!

이 글과 비슷한 Q&A