특정 색상, 글꼴, 스타일로 어떻게 보이는지 확인하기 위해 웹 페이지를 일시적으로 편집하고 싶었던 적이 있습니까? 브라우저에 이미있는 ""라는 도구를 사용하면 가능합니다. 요소 검사 ". 이것은 CSS를 조작하고자하는 모든 사용자에게 실현 된 꿈입니다.
이 자습서에서는 항목 검사의 기본 사항과 WordPress 사이트에서 사용하는 방법을 안내합니다.
품목 검사 도구는 무엇입니까?
Chrome 및 Mozilla Firefox와 같은 최신 브라우저에는 웹 개발자가 오류를 디버깅 할 수있는 도구가 내장되어 있습니다. 이 도구는 페이지의 HTML, CSS 및 JavaScript를 표시하고 코드 실행 방법을 보여줍니다.
도구 사용 " 요소 검사 모든 웹 페이지의 HTML, CSS 또는 JavaScript 코드를 편집하고 변경 사항을 실시간으로 볼 수 있습니다 (전적으로 컴퓨터).
소유자의 경우 사이트 웹, 이러한 도구를 사용하면 모든 사람에게 실제로 변경 사항을 적용하지 않고도 특정 스타일이 어떻게 보일지 미리 볼 수 있습니다.
작가의 경우 이러한 도구는 실제로 요소를 흐리게 처리 할 필요없이 스크린 샷을 찍으면서 개인 식별 정보를 쉽게 변경할 수 있기 때문에 훌륭합니다.
지원 상담원의 경우 갤러리가로드되지 않거나 제대로 작동하지 못하게하는 오류를 식별 할 수있는 좋은 방법입니다.
우리는 사용 사례의 표면 만 긁고 있습니다. 요소 검사 정말 강력합니다.
이 기사에서는 " 요소 검사 Google 크롬에서, 우리가 선택한 브라우저이기 때문입니다. Firefox에는 메뉴를 선택하여 호출 할 수있는 자체 개발 도구가 있습니다. " 요소를 검사 ".
"요소 검사"도구 출시 및 코드 현지화
당신은 눌러이 도구를 실행할 수 있습니다 Ctrl + Shift + I를 키보드에서. 또는 웹 페이지의 아무 곳이나 클릭 한 다음 브라우저 메뉴 항목 검사를 선택할 수 있습니다.
브라우저 창이 두 개로 분할되고 하단 창에 웹 페이지의 소스 코드가 표시됩니다.
개발자 도구 창은 두 개의 창으로 더 나뉩니다. 왼쪽에 페이지의 HTML 코드가 표시됩니다. 오른쪽 창에 CSS 규칙이 표시됩니다.
마우스를 HTML 코드 소스 위로 가져 가면 강조 표시된 영역이 웹 페이지에서 강조 표시됩니다. 또한 해당 요소에 대한 CSS 규칙을 알 수 있습니다.
웹 페이지의 항목 위로 마우스 포인터를 가져간 다음 마우스 오른쪽 버튼을 클릭하고 " 요소를 검사 ". 클릭 한 항목은 소스 코드에서 강조 표시됩니다.
코드 개발자 및 개발자 디버거
요소 검사 창의 HTML 및 CSS는 편집 가능합니다. HTML 소스 코드를 두 번 클릭하고 원하는대로 코드를 편집 할 수 있습니다.
CSS 분할 창에서 스타일의 속성을 두 번 클릭하고 편집 할 수도 있습니다. 규칙을 추가하려면 상단의 스타일 창에서 더하기 아이콘을 클릭하십시오.
CSS 또는 HTML 코드를 변경하면 이러한 변경 사항이 브라우저에 즉시 반영됩니다.
여기서 변경 한 내용이 모두 어디에도 저장되지는 않습니다. 도구 요소 검사 디버깅 도구이며 서버의 파일에 대한 변경 내용을 저장하지 않습니다. 즉, 페이지를 새로 고치면 모든 변경 사항이 손실됩니다.
실제로 변경하려면 스타일을 수정해야 합니다. 워드 프레스 테마 또는 템플릿을 사용하여 저장하려는 변경 사항을 추가합니다.
편집을 시작하기 전에 워드 프레스 테마 도구를 사용하여 존재하는 " 요소 검사 하위 테마를 작성하여 모든 변경 사항을 저장하십시오.
워드 프레스에 대한 오류를 찾는 방법
도구 요소 검사 "라는 영역이 있습니다 콘솔에서 사이트에 존재하는 모든 오류가 표시됩니다. 오류를 디버깅하거나 테마 또는 플러그인 작성자에게 도움을 요청하기 전에 항상 무엇이 잘못되었는지 확인하는 것이 좋습니다.
예를 들어 고객 인 경우 OptinMonster 왜 자신의 옵틴이로드되지 않는지 궁금한 경우 " 페이지의 총알이 일치하지 않습니다 ".
공유 표시 줄이 제대로 작동하지 않으면 JavaScript 오류가 원인임을 알 수 있습니다.
이것이 이 튜토리얼의 전부입니다. 워드 프레스 블로그. 이 튜토리얼을 친구들과 자유롭게 공유하세요.
