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

플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)

플렉스(Flex) – 부모요소 자식요소 개념 정리

작성

612

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

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

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

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

flex 반응형-웹

답변 2

코딩웍스(Coding Works)

지식공유자

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

박제영

질문자

헉.. 아니에요

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

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

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

코딩웍스(Coding Works)

지식공유자

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

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

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

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

박제영

질문자

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

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

*해당 내용은 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에 스타일 주는 방법으로 해결했습니다.

인프런 커뮤니티 질문&답변

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