본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

CSS 디버깅, 개발자 도구

최초 작성일
최종 수정일
이번 시간에는...
CSS 작업을 하면서, 파이어 버그같은 웹 브라우저의 개발자 도구를 이용해서 디버깅을 하는 방법을 알아봅니다. 이를 통해서 HTML 문서의 구조 탐색, 요소의 박스 모델 등을 찾아볼 수 있게 합니다.

우리는 지난 CSS 초급 강의들을 통해서, 기본적인 CSS 속성들을 이용해서 간단한 스타일을 줄 수 있었습니다. 여러분들 스스로도 기본적인 스타일을 이용해서 이것저것 꾸며 보았으리라 생각 됩니다.

하지만, 여러분이 CSS 속성들을 넣고 웹 브라우저에서 새로 고침을 해 보면, 종종 여러분의 의도랑은 다른 방식으로 페이지가 보여지기도 할 것입니다. 그리고 그러한 문제를 찾기 위해선, 작성했던 속성을 지우기도 하고, 또는 다른 속성을 넣기도 하면서 찾아냈어야 했을 것입니다. 때로는 그래도 문제를 찾지 못하고, 포기했을 지도 모르겠습니다.

이번 시간에는 이러한 문제 해결을 보다 쉽게 하기 위한, 디버깅 도구를 살펴볼 것입니다. 참고로 디버그(debug)는 버그(오류)를 찾는 행위를 뜻 합니다. 우리가 주요 사용하는 웹 브라우저들은 대부분 디버깅을 위한 '개발자 도구'를 내장하고 있습니다. 이번 시간에는 이 '개발자 도구'를 이용해서 의도치 않았던 출력이 왜 이렇게 나왔는지를 쉽게 찾아내는 방법을 알아 봅니다.

각 브라우저의 개발자 도구

방금 말씀 드렸듯이, 대부분의 주요한 웹 브라우저들은 자체적인 '개발자 도구'를 내장하고 있습니다. (보통 브라우저의 엔진에 따라 형태가 비슷합니다.) 일단은 이 개발자 도구를 실행하도록 하겠습니다.

보통 개발자 도구는 브라우저의 우측 상단 메뉴(크롬, 파이어폭스, IE의 경우), 설정(또는 도구)에 위치하고 있습니다. 보통 해당 단축키는 'F12'키 이거나 'Ctrl + Shit + I' 입니다. (브라우저마다 조금 다를 수 있으니, 단축키는 메뉴에서 확인해 보시기 바랍니다.)

파이어폭스에서 메뉴에서 개발자 도구를 선택하는 모습
파이어폭스에서의 개발자 도구 선택, 대부분의 다른 브라우저도 거의 비슷하게 위치하고 있습니다.

파이어 버그 (Firebug)

예전 버전의 파이어 폭스에서는 따로 개발자 도구를 내장하지 않았었습니다. 대신 '파이어 버그'라는 부가기능을 통해서 개발자 도구를 지원했습니다. 예전에는 이 '파이어 버그'는 웹을 제작하는 사람들이 가장 먼저 설치하던 플러그 인이었습니다. (물론 지금도 많은 사람들이 사용하고 있습니다.) 지금은 대부분의 브라우저들의 내장 개발자 도구가 워낙 좋아져서 내장된 개발자 도구만으로도 웬만한 검토는 충분해 졌습니다. 궁금하신 분들은 파이어폭스 부가기능을 통해서 설치해보시기 바랍니다.

이 강의에서는 주로 제가 사용하는 파이어폭스의 내장 개발자 도구를 기준으로 말씀 드립니다. 하지만, 다른 브라우저의 개발자 도구들도 기본적인 기능들은 비슷합니다. (특히 CSS 확인하는 부분은 거의 같습니다.) 그리고 어차피, 크로스 브라우징을 위해서는 여러 브라우저의 개발자 도구를 모두 사용하게 될 것입니다.

검사기 (Inspector)

브라우저에서 개발자 도구를 실행해 보면, 여러 가지 탭들이 있습니다. 뭐가 먼지 모를 것들이 복잡해 보인다고 당황하지 마시기 바랍니다. 우리가 사용할 부분은 단 하나, '검사기 도구' 입니다.

이 탭의 이름은 개발자 도구마다 조금씩 다릅니다. 파이어폭스에서 '검사기(Inspector)'라 표시되며, 크롬과 같은 웹킷,블링크 엔진 브라우저에서는 'Elements(요소)'라고 표시됩니다. IE에서는 'DOM 탐색기'(IE11 이상) 또는 'HTML'(IE10 이하)로 표시됩니다. 하지만 대부분 가장 첫 번째에 위치하고 있으니, 맨 왼쪽(또는 맨 위쪽)의 탭을 선택하셔서 들어가면 됩니다. 보통 다음과 같은 형태입니다.

파이어 폭스에서 실행시킨 개발자도구, 왼쪽에 문서구조가 보여지고, 오른쪽의 요소의 스타일이 보여집니다.
파이어폭스의 검사기 도구 모습

보시면 왼쪽과 오른쪽의 구역이 나뉘어져 있습니다. 여기서 왼쪽은 HTML의 문서 구조(요소들의 상속관계)를 나타내며, 우측은 해당 요소의 스타일을 보여줍니다.

문서 구조 탐색 영역 (DOM 탐색 영역)

보통 왼쪽 요소의 구조(DOM)를 나타내는 창에서 요소를 선택하면 해당 요소가 표시가 됩니다. (참고로 DOM은 문서 객체 모델 : Document Object Model를 나타냅니다.) 이 부분을 통해서, 여러분이 작성한 마크 업의 요소들의 상속관계를 확인 할 수 있습니다. (개발자 도구에 따라서, 안에 내용을 수정해 볼 수도 있습니다.)

또한, 문서 구조도를 통해서 요소를 선택할 수 있지만, 웹 뷰 페이지에서 바로 선택도 가능합니다. 개발자 도구에서 돋보기 아이콘(IE에서는 커서의 형태입니다.)을 누르면, 해당 웹 페이지에서 직접 요소를 선택할 수 있습니다.

돋보기 아이콘을 누른 뒤, 선택할 요소를 클릭한 모습
페이지 뷰에서 해당 요소를 직접 선택하는 모습

이렇게 선택된 요소에 대한 스타일 속성들을 우측 창에서 확인이 가능합니다.

요소의 세부 정보 영역

검사기의 우측 영역인 세부 정보 영역을 보면, 해당 요소에 어떠한 스타일 속성이 들어갔는 지를 확인 할 수 있습니다. 여러분이 선택자를 어떻게 작성하였는지가 그대로 출력되고, 그에 해당하는 스타일 속성들이 나열됩니다. 또한 상위 요소에서부터 상속받은 스타일 속성도 구분되어 보여지며, 해당 개발자 도구의 설정을 바꾸면, 브라우저가 자체적으로 내장한 스타일 속성까지 확인 가능합니다.

또한 속성 중 덮어 씌어진 속성이 있다면, 취소선의 형태로 보여줍니다. 여러분들은 이를 통해서 본인이 넣은 속성이 다른 속성에 의해 덮어씌워진 건 아닌지 등을 확인할 수 있습니다. 그리고 해당 속성의 체크마크를 해제함으로 써, 임시로 해당 속성을 지울 수도 있습니다. 반대로 스타일 속성을 줄 수도 있습니다. (보통 속성 부분에서 빈 공간을 클릭하면 새로운 속성 입력 칸이 보여집니다.) 또한 우측 클릭 후 규칙 추가로 (크롬에서는 상단 '+'모양의 아이콘입니다.) 선택자마저도 추가 할 수 있습니다. 다만 이러한 속성의 수정은 임시로 확인하기 위함이며, 해당 페이지엔 실제로 영향을 주지 않습니다. (보통 새로 고침을 하게 되면 모든 것이 원래대로 돌아옵니다.) 그렇기 때문에 실질적인 수정은 소스에 직접 하시기 바랍니다.

도구 창 화면 중, 스타일 정보를 보여주는 부분
표시된 스타일 정보

하지만, 소스를 수정하기 위해서는 어떤 CSS파일에서 어떤 부분을 수정해야 하는지 찾아야 합니다. 이런 것은 선택자 표시 우측을 보면, 'style.css:8'과 같은 표시를 볼 수 있을 것입니다. 이는 style.css파일의 8번째 줄을 가리키는 것입니다. 그렇기 때문에 여러분 들은 해당 부분을 수정하려면 style.css파일을 열고 8번째 줄을 찾아가면 됩니다. css파일의 코드가 길어졌을 때, 이러한 부분은 정말 유용합니다.

또한, 여기서 그 'style.css:8'과 같은 부분을 클릭하면 CSS파일 원본 소스를 보여주어, 해당 부분에서 소스를 수정할 경우, 웹 브라우저도 실시간으로 변화되어 표시됩니다. (파이어 폭스에서는 스타일 편집기라는 탭으로 존재하며, IE에서는 아직 실시간 편집을 지원하지 않습니다.) 이런 부분은 CSS를 실시간으로 보며 소스를 작성할 수 있기 때문에, 초보자 분들은 사용해 보시는 것도 괜찮을 것 같습니다. 다만, 이 역시 임시적인 편집으로, 해당 CSS를 별도로 저장하지 않는다면 새로 고침 시 모두 편집 이전으로 돌아가니, 주의 하시기 바랍니다.

박스 모델 뷰

세부 정보 영역에서는 서브 탭을 통해서 다른 정보도 확인 가능합니다. 대표적으로 브라우저마다 조금씩 다르지만, 박스 모델을 확인 할 수 있습니다. 파이어 폭스에서는 '박스 모델', 크롬에서는 'Computed'(계산됨)에 같이 포함되어 있으며, IE에서는 '레이아웃'이라는 명칭을 가지고 있습니다.

파이어폭스 개발자 도구에서 본 박스 모델
박스 모델 확인

이 이미지를 보면, 전에 우리가 박스 모델 강의 시간에 마진과 패딩 등을 설명했던 박스 이미지와 유사합니다. 이러한 형태를 통해서, 해당 요소의 마진(margin)과 패딩(padding), 높이와 너비 등을 쉽게 볼 수 있습니다. 실제로 크로스 브라우징을 할 때, 비슷해 보이지만, 높이나 너비가 조금씩 다른 경우가 있는데, 그러한 부분을 찾는데 매우 유용하게 사용됩니다.

서브 탭 중 박스 모델 외에 '계산됨(Computed)' 탭에서는(크롬에서는 동일한 탭입니다.) 해당 요소에 최종적으로 들어간 스타일 속성을 정리해서 보여 줍니다. 그 외에 크롬에서는 다른 서브 탭들도 있지만, 이는 주로 자바스크립트를 확인하기 위한 탭입니다. 때문에, 따로 다루지는 않습니다.

정리

이번에 살펴본 기능들 말고도, 개발자 도구는 더 많은 기능들을 가지고 있으며, 계속해서 발전해 가고 있습니다. 또한 이런 웹 개발에 유용한 부가기능들도 있습니다. 하지만, 일단은 이 정도 만으로도 여러분들이 앞으로 웹 페이지를 제작하는데 무리가 없으리라 봅니다. 다른 부분들을 짚어 볼 필요가 있다면, 강의를 진행하면서 추후에 더 살펴보도록 하겠습니다.

요점 정리
  • 오류(버그)를 찾는 것을 디버깅(debug)이라고 함.
  • 대부분의 브라우저들은 개발자 도구를 내장. (보통 단축키 F12 또는 Ctrl + Shit + I)
  • 예전에는(또는 현재까지도) 파이어 폭스의 부가 기능인 파이어 버그를 많이 사용
  • 검사기(Inspector)는 HTML 문서 구조를 보면서 해당 요소를 선택하고 정보를 볼 수 있는 도구. Elements 또는 DOM 탐색기로 표현 되기도 함.
  • 검사기에서 요소를 선택하면, 우측 창에 해당 요소에 들어간 스타일을 확인할 수 있음.
  • 해당 스타일 규칙이 나타나고 해당 규칙 우측 상단에 선언된 CSS와 해당 라인(몇 번째 줄인지) 표시됨.
  • 박스 모델을 통해서 이 요소의 너비와 높이, 또한 내부와 외부의 여백, 테두리 선의 굵기 등을 파악할 수 있음.

이 글이 유용하셨다면 친구들에게 공유 해주세요.