parent 2 CSS selector, nth-child()와 nth-of-type() 비교 ※ CSS selector div:nth-child(3) 하나의 부모 container에 들어 있는 자식들 중 3번째 자식이 이면 CSS 적용시키고, 만약 와 같은 다른 요소이면 이 규칙은 적용되지 않습니다. 요약하면, - 유형(type) 상관 없이 부모 객체의 3번째 자식 객체를 찾아서 - 앞에 지정한 요소(div)와 동일한 유형(div)의 자식일 경우에만 CSS 적용 div:nth-of-type(3) 하나의 부모 container에 들어 있는 자식들 중 만 선택 대상에 포함하여 그들 중 3번째 자식에게 CSS 적용 - 부모 객체의 유형(type) 자식들만 찾아서 - 그것들(div) 중 3 번째 자식에게 CSS 적용 부모 container에 child가 1개만 있을 때 1. first-child와 la.. 2022. 3. 19. position absolute의 height 설정 position: relative + position: absolute "position: relative" 객체는 document의 정상적인 흐름을 따르지만, "position: absolute" 객체는 그 흐름에서 튀어나와 분리됩니다. position 속성에 absolute 값을 지닌 child(자식) 객체에 top, bottom, left, right, height, width 값을 설정할 때 "position: relative" 값을 가진 가장 가까운 parent(상위, 부모) 객체를 기준으로 지정합니다. 바로 상위 객체에 position 속성으로 relative 값을 가진 객체가 없을 경우 찾을 때까지 더 상위 객체로 거슬러 올라갑니다. 만약에 없을 경우에는 - "document body"를 이.. 2021. 8. 31.
