F12 개발자 도구를 사용하여 HTML 및 CSS 디버깅

이 콘텐츠는 이전 버전의 F12 개발자 도구를 참조합니다.최신 F12 도구 설명서를 참조하세요.

F12 도구는 소스 코드에서는 찾기 어려운 HTML과 CSS(Cascading Style Sheets) 코드의 오류를 찾아 수정하는 데 도움이 될 수 있습니다. Windows Internet Explorer가 소스를 해석함에 따라 HTML과 CSS 코드가 DOM(문서 개체 모델) 트리로 표시되므로 동적으로 생성된 변경 사항 등의 코드를 더 쉽게 디버깅할 수 있습니다.

이 항목의 내용은 다음과 같습니다.

HTML 탭 사용

HTML 탭 보기에는 메모리에 Windows Internet Explorer 9이 표시하는 대로 웹 페이지의 동적 태그가 트리 뷰로 표시됩니다. 이 보기는 F12 도구가 열려 있을 때의 DOM을 반영하며, 변경 사항이 있을 경우에는 이 보기를 새로 고쳐야 합니다. 마우스나 키보드를 사용하여 바로 트리를 탐색하고 특성을 보고 값을 변경할 수 있습니다.

웹 페이지에서 특정 요소로 이동하려면 Ctrl+B를 누르거나 클릭으로 요소 선택 클릭으로 요소 선택 단추의 그림 단추를 클릭합니다. 웹 페이지에서 요소는 마우스로 가리키면 강조 표시됩니다. 요소를 클릭하면 DOM 트리의 해당 노드가 HTML 보기로 강조 표시됩니다.

웹 페이지에서 선택되는 요소

웹 페이지에서 요소를 클릭하여 선택한 코드

HTML 탭에서 요소를 선택하면 보기 > 원본 메뉴를 사용하여, 연결된 CSS 스타일로 선택한 요소에 따라, 또는 이 요소별로 보기를 필터링할 수 있습니다.

스타일이 적용된 요소 소스 단추 F12 도구 스타일이 적용된 요소 소스 단추의 그림는 선택한 요소의 HTML 소스 및 해당 내용만 이 요소에 적용되는 CSS와 함께 새 창에 표시합니다. 이렇게 하면 선택한 요소의 소스에만 집중할 수 있습니다. 이 명령을 실행하려면 먼저 HTML 탭 보기를 사용하여 DOM 트리 본문 내의 HTML 요소를 선택해야 합니다. 요소를 선택하려면 클릭으로 요소 선택 단추를 클릭하거나 DOM 트리에서 요소를 클릭합니다. 클릭으로 요소 선택을 사용하면 먼저 보기를 새로 고치는 것이 좋습니다.

요소의 속성을 확장 또는 축소하려면 더하기(+ ) 또는 빼기(-) 기호로 표시된 상자를 클릭합니다. HTML 및 CSS 보기의 모든 요소는 편집 가능하며 편집 작업은 즉시 적용됩니다. 스타일 규칙과 특성은 요소 이름 옆에 있는 확인란을 클릭하여 설정 또는 해제할 수 있습니다.

DHTML(동적 HTML) 코드 보기

대부분의 웹 사이트에서는 동적 코드를 사용합니다. 클라이언트 쪽 스크립팅은 대개 사용자가 보는 렌더링된 HTML을 생성하는 데 사용됩니다. 정적 HTML 코드는 대개 최소 수준으로 페이지에서 작업을 시작하는 데만 사용됩니다. F12 도구는 브라우저에서 렌더링되는 HTML 및 CSS 코드를 표시하고 완전한 HTML 소스를 표시하지는 않으므로 더욱 쉽게 오류를 찾을 수 있습니다.

HTML 탭은 DOM의 현재 상태를 보여 주며 변경 사항을 자동으로 추적하지 않습니다. 값이나 특성을 변경했는데 변경 사항이 즉시 표시되지 않는 경우에는 HTML 탭에서 F5를 눌러 보기를 새로 고치세요.

값 변경 및 특성 추가

F12 도구를 사용하면 대부분의 특성 또는 속성 값을 변경할 수 있습니다. HTML 탭 내에서, DOM 트리에서 요소를 선택하거나 클릭으로 요소 선택 단추를 사용하여 요소를 선택합니다. 속성 보기(오른쪽 창)에서 강조 및 변경할 값을 클릭합니다.

예를 들면, Internet Explorer 9에서 CSS3을 사용하여 둥근 모서리를 추가하는 방법CSS 샘플 페이지를 열고 F12를 눌러 도구를 엽니다. 클릭으로 요소 선택 단추 클릭으로 요소 선택 단추의 그림를 클릭하고 , 적갈색의 Now in stock at Fourth Coffee 제목을 클릭합니다. 속성 창의 "h2" 선택기에서 색상 특성을 클릭합니다. 파란색과 같은 새 색상 이름이나 값을 입력하고 Enter 키를 누릅니다. 제목 색상이 즉시 변경됩니다.

특성을 추가하려면 HTML 또는 CSS 탭의 왼쪽 창에서 요소를 마우스 오른쪽 단추로 클릭하고, 상황에 맞는 메뉴에서 특성 추가를 클릭합니다. "background-color:"와 같은 특성의 형식과 올바른 값을 알아야 합니다.

사용자가 추가한 특성이든 기존 특성이든 특성을 제거하려면 오른쪽 창 보기에서 특성을 클릭한 다음 Delete 키를 누릅니다. 원본 페이지에 있는 특성의 경우 웹 페이지를 새로 고쳐서 다시 가져올 수 있습니다. 추가된 특성은 다시 적용해야 합니다.

세션 중에 일시적으로 특성을 끄려면 HTML 또는 CSS 탭의 오른쪽 창에서 특성 옆에 있는 확인란의 선택을 지웁니다.

HTML 탭 보기 및 도구

왼쪽 창 트리 뷰에서 요소를 선택하면 오른쪽에서는 선택한 요소 및 자식 요소에 대한 스타일, 상자 모델 레이아웃 및 특성을 보고 변경할 수 있습니다. 변경한 사항은 영구적이지 않으며 페이지를 새로 고치거나 다른 페이지를 열면 손실됩니다. 그러나 저장 단추를 클릭하여 HTML 코드를 저장할 수 있습니다.

스타일 탭과 추적 스타일 탭에서 선택한 요소에 적용되는 여러 개의 CSS 규칙을 보면 규칙은 CSS 사양에 따라 규칙의 특이성을 기반으로 표시됩니다. 목록 상단에 있는 규칙은 선택한 요소에 첫 번째로 적용되는 규칙이며, 하단에 있는 규칙은 현재 선택한 요소의 스타일 속성을 정의하는 규칙입니다. 이러한 규칙의 값은 편집 가능합니다. 새 값을 입력하고 "Enter" 키를 누릅니다. 변경 사항은 웹 페이지에 즉시 나타납니다. 두 속성 유형 모두에 있는 정보는 동일합니다. 하지만 추적 스타일 속성 유형에서 동일한 정보는 그 아래 표시된 규칙이 있는 속성별로 그룹화됩니다. 속성은 사전순으로 나열되며 규칙도 특이성을 기반으로 배열됩니다.

F12 개발자 도구 HTML 탭의 스크린샷

  • 스타일 트리 뷰에서 선택한 요소에 대한 규칙 및 스타일을 표시합니다. 스타일은 규칙별로 구성되며 상속된 특성과 재정의된 특성을 포함합니다.

    HTML 탭의 스타일 탭 스크린샷

  • 추적 스타일 스타일과 동일한 정보를 표시하지만, 규칙이 아니라 속성별로 그룹화됩니다.

    HTML 탭의 추적 스타일 탭 스크린샷

  • 레이아웃 선택한 요소에 대한 상자 모델을 보여 줍니다. 레이아웃 보기에 있는 모든 값은 다이어그램에서 클릭하여 변경할 수 있습니다. 레이아웃 탭은 SVG(Scalable Vector Graphics) 요소에 대해 사용되지 않습니다.

    선택한 요소의 CSS 상자 모델 보기

  • 특성 선택한 요소에 대한 특성(예: ID)을 보여 줍니다. 특성은 추가하거나 제거할 수 있습니다.

    선택한 요소와 그 특성을 보여주는 특성 탭의 스크린샷

HTML 탭의 마우스 오른쪽 단추 메뉴

앞서 언급한 것처럼 HTML 탭의 왼쪽 창에서 요소를 마우스 오른쪽 단추로 클릭할 수 있습니다. HTML 탭에서 사용할 수 있는 옵션은 다음과 같습니다.

메뉴 항목설명
특성 추가태그나 요소에 새 특성을 추가합니다.
복사태그 및 특성을 클립보드에 복사합니다.
InnerHTML 복사요소의 InnerHTML 내용(자식 텍스트, 요소 및 특성)을 클립보드에 복사합니다.
OuterHTML 복사요소의 OuterHTML 내용(자식 텍스트, 요소 및 특성)을 클립보드에 복사합니다.

 

HTML 탭에서, "h2" 태그의 텍스트 요소와 같은 요소의 자식 노드를 클릭하면 모든 옵션을 가져오지 못할 수 있습니다. 원하는 옵션이 보이지 않으면 부모 요소로 가서 다시 시도해 보세요.

CSS 규칙 검사

CSS 탭은 스타일시트 간 상호 작용을 보여 줍니다. 이 탭은 여러 스타일시트를 사용하는 사이트에 가장 유용합니다. 스타일시트 간을 전환하려면 스타일시트 선택자를 사용하세요. 스타일시트를 선택하면 규칙과 규칙이 연결된 스타일 속성이 왼쪽 창에 나타납니다. 기본적으로 이 단추는 웹 페이지에 참조된 첫 번째 스타일시트를 보여줍니다. 웹 페이지에서 사용되는 스타일시트가 두 개 이상 있을 경우 다른 스타일시트를 선택하려면 드롭다운 목록을 클릭하세요.

스타일시트 선택자에 있는 스타일시트 드롭다운 목록의 스크린샷

CSS 탭의 바로 가기 메뉴 옵션

CSS 탭을 마우스 오른쪽 단추로 클릭하면 바로 가기 메뉴에서 HTML 탭보다 많은 옵션을 제공합니다. 사용하도록 설정된 옵션은 상황에 따라 표시되므로 CSS 탭에서 클릭하는 위치에 따라 달라집니다.

메뉴 항목설명마우스 오른쪽 단추 클릭 위치
특성 추가태그나 요소에 새 특성을 추가합니다.요소의 규칙 또는 특성에서.
규칙 추가선택기, 선언 또는 스타일을 추가합니다.기존 요소가 아닌 흰색 영역에서.
뒤에 규칙 추가현재 규칙 뒤에 선택기 또는 규칙을 추가합니다.요소에서.
앞에 규칙 추가현재 규칙 앞에 선택기 또는 규칙을 추가합니다.요소에서.
특성 삭제선택한 특성을 삭제합니다. 특성에서.
규칙 삭제선택한 규칙 및 모든 관련 특성을 삭제합니다.규칙 또는 선택기에서.

 

CSS 탭에서 숫자 CSS 값 변경

CSS 속성 값은 F12 도구의 거의 모든 다른 속성처럼 변경할 수 있습니다. 속성 값을 클릭하고 새 값을 입력하여 CSS 속성을 변경할 수 있습니다. CSS 탭에서는 위쪽 및 아래쪽 화살표 키를 사용하여 숫자 값을 늘리거나 줄일 수 있습니다.

변경 사항 검색 및 저장

F12 도구의 다른 탭과 마찬가지로, HTML 및 CSS 탭에서 모두 검색 상자로 특정 태그, 속성, 특성 또는 값을 검색할 수 있습니다. 검색 단추를 클릭하면 모든 키워드 인스턴스가 모두 강조 표시되고 창이 스크롤되어 첫 번째 일치 항목을 보여줍니다.

F12 도구 검색 상자의 그림

일치 항목이 여러 개일 경우에는 다음 단추와 이전 단추를 사용하여 앞뒤로 스크롤할 수 있습니다.

F12 도구 검색 다음 및 이전 단추의 그림

상자 모델을 조정하거나 특성을 추가하는 등의 사용자 변경 사항은 영구적이지 않습니다. 브라우저에서 페이지를 다시 로드하거나 다른 웹 페이지로 이동하면 변경 사항은 손실됩니다. 변경 사항을 HTML/CSS 파일의 로컬 복사본에 저장하려면 왼쪽 창에서 저장 단추를 클릭하세요.

관련 항목

F12 개발자 도구를 사용하여 웹 페이지를 디버깅하는 방법

 

 

표시:
© 2014 Microsoft