Inflearn Community Q&A

asked

Flex Responsive Website Portfolio (The World's Best Cities)

Flex (Flex) – Parent Element Child Element Concept Summary

상위 태그 영역 무시 하는 방법

Written on

·

816

1

<div className="할아버지">
  <div className="아버지">
    <div className="본인"></div>
  </div>
</div>;

분명 이 강의 어디에서 배웠는데 기억이 안나서 질문을 올립니다.

classname="본인"이 아버지의 영역을 무시하고
할아버지의 영역을 기준으로 본인의 영역을 설정하는 방법이 있었는데요 기억이 안나네요

분명 아버지 class에 어떤 css 속성을 설정을 해주면 아버지의 영역을 무시할 수 있었던 것으로 기억을 하는데 도움 부탁드립니다!

flex반응형-웹

Answer 2

1

Instructor

혹시 제가 성의없이 답변을 했다고 오해하실까봐 드리는 말씀인데.. 개발자가 아닌 저로서는 부모요소를 무시해야 하는 경우가 딱히 생각이 나지 않아서 입니다.

Questioner

헉.. 아니에요

저는 진심으로 한 말인데 오해를 하셨군요

저는 진짜 선생님이 저보다 훨씬 경험이 많으시니 저런 경우는 거의 필요하지 않다고 말해주셔서 진짜 감사한 마음입니다. 왜냐면 효율적이라서 제 시간을 아낄수있었다고 생각했어요

오해하시면 안됩니다!!! 저는 진짜 효율적인 좋은 답변 주셔서 감사한 마음이였어요!!

1

Instructor

바로 위의 부모요소를 무시한다... 이런 말씀이신거죠?

제가 아는 바로는 그렇게 해볼 필요를 느낀적이 없어서요.

글쎄 이런 걸 어떤 경우에 사용하게 되는지 의문이네요.

혹시 예시가 있다면 예시를 알려주세요.

Questioner

선생님에게 해당 내용을 배운적 있는 것 같아서 물어봣습니다.

선생님이 필요를 느낀적이 없으시다면 제가 생각하는 방식이 잘못될 확률이 높다고 생각이 되네요
다른 방법으로 구현하는게 맞겟지요
답변 주셔서 감사드립니다.

*해당 내용은 React에서 styled-component사용해서 React.Fragment에 스타일링하고 싶었는데 그게 안되서 부모요소를 무시하는 방법을 찾고있었습니다.

function Parent() {
  return (
    <div>
      <div>
        <div></div>
      </div>
      <div>
        <div></div>
      </div>
      <Child />
    </div>
  );
}

function Child() {
  return <> <- 여기서 전체 스타일링을 정해주고 싶었음
  <div className='a'></div> 
  <div className='b'></div>
  <div className='c'></div>
  <div className='d'></div>    
  </>
}

그냥 자식의 각 a,b,c,d에 스타일 주는 방법으로 해결했습니다.

asked