Dreamweaver의 라이브 뷰와 함께 검사 모드를 사용하면 HTML 요소 및 연결된 CSS 스타일을 빠르게 식별할 수 있습니다.

참고:

Dreamweaver CC 이상에서 CSS 스타일 패널이 CSS Designer로 바뀌었습니다. 자세한 내용은 CSS Designer를 참조하십시오.

검사 모드는 라이브 뷰를 사용하여 작업하면 HTML 요소 및 연결된 CSS 스타일을 빠르게 식별할 수 있습니다. 검사 모드가 활성화된 상태에서 페이지 요소에 커서를 올려 놓으면 블록 수준 요소에 대한 CSS 상자 모델 속성을 확인할 수 있습니다.

참고:

CSS 상자 모델에 대한 자세한 내용은 CSS 2.1 사양을 참조하십시오.

검사 모드에서 상자 모델의 시각적 확인 외에도 문서 창에서 요소에 커서를 올려 놓으면 [CSS 스타일] 패널을 사용할 수 있습니다. [현재] 모드에서 CSS 스타일 패널을 열고 페이지 요소에 커서를 올려 놓으면 해당 요소에 대한 규칙과 속성이 표시되도록 CSS 스타일 패널의 규칙 및 속성이 자동으로 업데이트됩니다. 또한 커서를 올려 놓은 요소와 관련된 보기 또는 패널도 업데이트됩니다(예: 코드 보기, 태그 선택기, 속성 관리자 등).

  1. 문서 창에서 문서를 열고 문서 툴바의 [라이브 뷰] 버튼 옆에 있는 [검사] 버튼을 클릭합니다.

    참고:

    라이브 뷰를 사용하고 있지 않은 경우 검사 모드가 자동으로 활성화됩니다.

  2. 페이지 요소에 커서를 올려 놓으면 CSS 상자 모델을 확인할 수 있습니다. 검사 모드에서는 테두리, 여백, 패딩 및 내용이 다른 색상으로 강조 표시됩니다.

  3. (선택 사항) 컴퓨터 키보드의 왼쪽 화살표 키를 눌러 현재 강조 표시된 요소의 부모를 강조 표시합니다. 오른쪽 화살표를 눌러 자식 요소가 강조 표시되도록 되돌립니다.

  4. (선택 사항) 요소를 클릭하여 강조 표시 선택을 잠급니다.

    참고:

    강조 표시 선택을 잠그려는 요소를 클릭하면 검사 모드가 해제됩니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책