css : 디버깅할때 border 대신 outline 사용하기

보통 css 으로 레이아웃을 잡을때 해당 태그나 클래스, 아이디에 대한 영역이 실제로 얼마만큼 잡고 있는지 눈으로 확인해볼필요가 있죠. 

그럴때 보통 이렇게 합니다. 

.debug { border: 1px solid red; } 
 
이렇게 하면 해당 클랙스의 영역에 1px 빨간색 테두리가 생겨서 해당 영역의 크기를 눈으로 확인해볼 수 있죠.

그런데 이렇게 하면 실제 해당 영역의 정확한 사이즈를 확인하는 것은 아닙니다.

왜냐하면 border 속성은 실제로 영역을 차지합니다. 위와 같은 경우 가로 세로가 실제로 2px 늘어난 사이즈를 확인하게 되는것이죠. 1px 단위로 레이아웃을 자를때는 위와 같이 해서 확인하면 레이아웃이 뒤틀어지기 때문에 정확하게 해당영역만의 사이즈를 확인할 수는 없게 되죠.

이럴때 좋은 방법이 바로 outline을 사용하는것입니다.

아래 같이 border를 outline으로만 바꿔쓰면 됩니다.

.debug { outline: 1px solid red; }

outline 속성은 영역을 차지하지 않고 실제 영역의 테두리를 표시해줍니다. 그러므로 실제 영역의 크기를 확인할 수 있게 됩니다. 

하지만 outline은 border 같이 4면 (위, 아래, 오른쪽, 왼쪽)의 색깔이나 굵기, 선모양등을 개별로 설정할 수는 없고, 4면을 동일한 속성으로만 정의할 수 있죠.


css 작업하시면서 사용해보시면 좋은 방법이 되실겁니다.



 

참고자료

댓글 0개

댓글쓰기