[CSS] border-right 안나올때

작업을 진행하다가 border-right가 나오지 않는 문제에 부딪혔었다.

 

 

처음에는 뭔가 안쪽요소에 밖의 요소가 잡아먹혔나 생각했다.

 

position이 absolute라서 그런가? 등등 계속 생각도 해보고 codepen을 띄워서 재현을 해보려고도 했다. 그런데 어떤 방법을 써도 문제는 재현되지 않았고 내 프로젝트 안에서만 발생했다.

 

 

outline속성을 주었을때는 테두리가 잘 나왔기 때문에 문제를 계속 찾았다. 하던중에 문득

 

!important를 주면 어떻게 될까란 생각이 들어서 주었더니 테두리가 정상적으로 나왔다...

 

 

그럼 결국 겹친 요소가 있었다는 건데 내 머리로는 도저히 이해가 되지 않았고 결국 리액트를 build해서 하나의 css파일로 만든 후에 border-right를 건드린 부분들을 다보았다.

 

그랬더니 요소들 중 하나에 div:last-child() 를 사용한 부분이 있었었다... 꽤나 떨어진 부분이었기에 생각치도 못했는데 가만 생각해보니까 적용되는게 맞았었다.

 

 

이래서 태그선택자는 최대한 지양해야하는구나.. 하고 배우게 된거 같다. 비록 반나절이란 시간을 투자했지만..

 

 

만약 의도한 CSS가 나오지 않는다면 !important나 z-index 등 기본적인 값을 한번 확인해보고 다른것을 의심하는 습관을 들일 필요가 있을 것 같다.