안녕하세요. 혀코입니다.
이번 시간에는 레이아웃 오류 디버깅하는 방법에 대해서 알아보겠습니다.
JavaScript 에서는 오류가 나면, console.log를 찍어서 연산이 잘 되고 있는지 확인하는 과정이 있으나, 웹사이트의 레이아웃이 오류가 나면 각 노드당 css 속성이 잘 들어가 있는지 확인하느라 시간이 상당히 오래 걸리는 편입니다.
그래서 레이아웃 오류시 디버깅을 하려면 두가지 방법을 추천 드립니다.
첫번째, 모든 노드에 outline을 적용해서 레이아웃에 오류가 있는지 확인해 봅니다.
* {
outline: 1px solid orange !important
}
두번째, 모든 노드에 background 을 적용해서 레이아웃에 오류가 있는지 확인해 봅니다.
* {
background: rgb(0 0 100 / 0.1) !important
}
위 두가지 방법을 적용하면, 쉽게 레이아웃 오류를 찾아낼 수 있고 빠르게 수정을 할 수 있습니다.
이렇게 레이아웃 오류 디버깅하는 방법에 대해서 알아봤습니다.
해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글