문서 창에서 문서를 열고 문서 툴바의 [라이브 뷰] 버튼 옆에 있는 [검사] 버튼을 클릭합니다.
마지막 업데이트 날짜
2022년 11월 28일
Dreamweaver의 라이브 뷰와 함께 검사 모드를 사용하면 HTML 요소 및 연결된 CSS 스타일을 빠르게 식별할 수 있습니다.
참고:
Dreamweaver CC 이상에서 CSS 스타일 패널이 CSS Designer로 바뀌었습니다. 자세한 내용은 CSS Designer를 참조하십시오.
검사 모드는 라이브 뷰를 사용하여 작업하면 HTML 요소 및 연결된 CSS 스타일을 빠르게 식별할 수 있습니다. 검사 모드가 활성화된 상태에서 페이지 요소에 커서를 올려 놓으면 블록 수준 요소에 대한 CSS 상자 모델 속성을 확인할 수 있습니다.
참고:
CSS 상자 모델에 대한 자세한 내용은 CSS 2.1 사양을 참조하십시오.
검사 모드에서 상자 모델의 시각적 확인 외에도 문서 창에서 요소에 커서를 올려 놓으면 [CSS 스타일] 패널을 사용할 수 있습니다. [현재] 모드에서 CSS 스타일 패널을 열고 페이지 요소에 커서를 올려 놓으면 해당 요소에 대한 규칙과 속성이 표시되도록 CSS 스타일 패널의 규칙 및 속성이 자동으로 업데이트됩니다. 또한 커서를 올려 놓은 요소와 관련된 보기 또는 패널도 업데이트됩니다(예: 코드 보기, 태그 선택기, 속성 관리자 등).
-
참고:
라이브 뷰를 사용하고 있지 않은 경우 검사 모드가 자동으로 활성화됩니다.
-
페이지 요소에 커서를 올려 놓으면 CSS 상자 모델을 확인할 수 있습니다. 검사 모드에서는 테두리, 여백, 패딩 및 내용이 다른 색상으로 강조 표시됩니다.
-
(선택 사항) 컴퓨터 키보드의 왼쪽 화살표 키를 눌러 현재 강조 표시된 요소의 부모를 강조 표시합니다. 오른쪽 화살표를 눌러 자식 요소가 강조 표시되도록 되돌립니다.
-
(선택 사항) 요소를 클릭하여 강조 표시 선택을 잠급니다.
참고:강조 표시 선택을 잠그려는 요소를 클릭하면 검사 모드가 해제됩니다.
