인프런 커뮤니티 질문&답변
작성한 질문수
부모요소, 자식요소 상속 관련 질문있습니다.
작성
·
349
1
아래의 코드 중에서 <div class="app-ui"> 에
position:absolute; 를 명령하면 저 태그의 자손,자식요소에다 그 명령이 상속되나요? 저는 상속될줄알고 absolute 를 이미지의 부모 요소에 적용하는거라고 생각했었거든요.
공부하다보면,
부모요소에 명령한것이 자손,자식에게 까지 상속되고,
어떨때는 어떨대는 안되는거같아서 헷갈려요
<div class="conatainer">
<div class="app-ui">
<img src="../img/app-ui-01.jpg" alt="">
<img src="../img/app-ui-02.jpg" alt="">
<img src="../img/app-ui-03.jpg" alt="">
<img src="../img/app-ui-04.jpg" alt="">
</div>
</div>
답변 1
1
먼저 결론부터 말씀드리면 부모요소의 속성이 자식요소의 속성에 상속되는건 몇가지 없습니다.
예를들어 font-size, color, background-color 등 입니다.
이외 대부분은 부모요소의 속성이 자식요소의 속성에 상속되지 않습니다.
지금 말씀하신 포지션 속성도 그렇습니다. 부모요소에 position: absolute를 주었다고 자식요소가 position: absolute가 되는건 아닙니다. 자식요소는 여전히 포지션 속성의 기본 속성인 position: static 입니다.
자동상속은 아니고 inherit라는 값을 사용해주면 상속을 받습니다.
예를들어 부모요소의 너비와 높이가 width: 300px, height: 500px일 때 자식요소에 width: inherit, height: inherit라고 하면 부모요소의 너비값과 높이값을 상속 받습니다. 물론 inherit를 사용하지 않으면 자식요소의 고유의 너비와 높이가 유지됩니다.