레이아웃을 수정하기 위해 CSS 코드를 작성하는 중, 희한한 버그를 발견했다.
부모 요소에 display: flex
를 주고, flex-direction
을 column
으로 설정, 너비(width
)를 50%으로 만들어둔 레이아웃이다.
<div id="parent">
<div class="view-column"></div>
<div class="view-column"></div>
</div>
#parent {
display: flex;
}
.view-column {
display: flex;
flex-direction: column;
width: 50%;
}
그러면 view-column
이라는 요소가 화면을 세로 방향(column)으로 50%씩 차지하게 된다.
여기서 두 번째(마지막) view-column
요소의 넓이를 약간 더 넓히고 싶어서,
.view-column:first-child {
width: 45%;
}
.view-column:last-child {
width: 55%;
}
라고 수정했다.
결과는 :last-child
만 적용되고, :first-child
는 무시되는 현상이 생겼다.
혹시 내가 :first-child
의 사용법을 잘 몰라서 뭔가 잘못되었나 싶어 MDN을 찾아봤지만 잘 모르겠다.
참고: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.
라고 나와있으니, 잘못 사용한 것 같지는 않아보인다.
그럼 대체 뭐가 문제인 걸까?
:first-child
를 :nth-child(1)
로 수정해보았다.
.view-column:nth-child(1) {
width: 45%;
}
.view-column:last-child {
width: 55%;
}
결과는, 여전히 :last-child
만 적용된다.
이번에는 첫 번째 요소를 :not(:last-chilid)
로 수정해보기로 했다.
.view-column:not(:last-child) {
width: 45%;
}
.view-column:last-child {
width: 55%;
}
결과는...
적용이 된다!
하지만 여전히 이유를 모르겠다.
혹시 요소가 2개밖에 없을 때는 :first-child
가 듣지 않는 버그가 있나 싶어서 .view-column
을 하나 더 추가해보았지만, 똑같이 :first-child
나 :nth-child(1)
은 안 되고 :last-child
만 적용이 되는 현상을 발견했다.
:last-child
를 제거하고, :first-child
만 두었을 때도 마찬가지로 적용이 되지 않더라.
flex
레이아웃과 연관이 있을 것 같기도 한데, 아직은 잘 모르겠다. ㅠㅠ