웹 사이트를 올바르게 검사하는 방법

프로젝트에서 새로운 기능을 테스트하는 개발자든 HTML 및 CSS 코드를 자세히 살펴보고자 하는 디자이너든 웹 사이트와 해당 요소를 검사해야 하는 이유는 많습니다. 그러나 어디서부터 시작해야 할지 아는 것이 (처음에는) 혼란스러워 보일 수 있습니다.

다행스럽게도 다양한 간단한 도구, 기술 및 요령을 사용하여 웹 요소를 적절하게 검사할 수 있습니다. 또한 거의 모든 브라우저와 운영 체제(OS)에 대한 옵션이 있습니다.

이 게시물에서는 웹 사이트를 검사해야 하는 이유에 대해 설명합니다. 그런 다음 무엇을 찾아야 하는지 설명하기 전에 사용할 수 있는 최고의 도구를 안내합니다. 뛰어들자!

웹사이트를 검사해야 하는 이유

웹 사이트를 검사하려는 몇 가지 이유가 있습니다. 예를 들어 문제를 해결하거나 특정 정보를 찾아야 할 수 있습니다.

브라우저에서 웹 요소를 검사하면 WordPress 개발자, 디자이너 및 디지털 마케터가 웹 페이지의 모양을 조작하고 변경 사항을 테스트할 수 있습니다. 개발자나 테스터는 이 기능을 사용하여 특정 요소를 디버깅하거나 레이아웃 테스트를 수행하거나 라이브 CSS 편집을 수행할 가능성이 높습니다.

웹 요소 검사는 웹 디자이너에게도 유용합니다. 색상 변경 또는 새 글꼴을 빠르게 테스트하려는 경우 CSS 코드를 파고들지 않고도 테스트할 수 있습니다.

또한 디지털 마케터는 요소 검사 도구를 사용하여 특정 변경 사항이 웹 페이지의 전반적인 모양과 느낌에 어떤 영향을 미치는지 확인할 수 있습니다. 예를 들어 새로운 CTA(Call To Action) 버튼이나 다른 색 구성표를 시도할 수 있습니다. 도구를 사용하여 라이브 사이트를 변경하지 않고 업데이트를 복제할 수 있습니다.

마지막으로, 웹사이트 검사는 웹사이트가 구축되고 작동하는 방식에 대해 배울 수 있는 훌륭한 방법이 될 수 있습니다. 웹 개발에 대해 자세히 알아보고 싶다면 사이트 검사를 시작하는 것이 좋습니다.

웹 사이트 검사를 위한 최고의 도구 및 확장 프로그램

웹 사이트를 검사하는 데 사용할 수 있는 다양한 도구와 확장 프로그램이 있습니다. 다음은 가장 인기 있는 옵션입니다!

요소를 점검하다

요소 검사 도구는 가장 일반적인 옵션입니다. 웹 페이지를 구성하는 HTML 및 CSS 코드를 자세히 볼 수 있습니다. 또한 이를 사용하여 CSS를 실시간으로 편집하고 영구적인 변경 없이 변경 사항이 어떻게 보이는지 확인할 수 있습니다.

Google Chrome 확장 프로그램으로 사용할 수 있지만 Inspect Element 도구는 모든 주요 브라우저와 함께 제공됩니다. 이 기능은 웹 페이지의 HTML 및 CSS 코드를 검사하고 편집할 수 있는 프로그램 모음인 Chrome 개발자 도구의 일부입니다.

Google Chrome 개발자 도구에 액세스하려면 Ctrl+Shift+I (Mac에서는 Cmd+Opt+I )를 누르기만 하면 됩니다. Chrome 메뉴를 열고 추가 도구 > 개발자 도구를 선택하여 도구에 액세스할 수도 있습니다.

다른 브라우저에서 동일한 개발자 도구에 액세스할 수 있습니다. 예를 들어 Firefox 개발자 도구에는 유사한 기능이 있습니다. 도구에 액세스하려면 Ctrl+Shift+I (Mac에서는 Cmd+Opt+I )를 누르기만 하면 됩니다. Firefox 메뉴를 열고 Web Developer > Inspector를 선택하여 도구를 찾을 수도 있습니다.

또한 Safari 개발자 도구를 사용하면 Mac 장치에서 웹 페이지의 HTML 및 CSS 코드를 검사하고 편집할 수 있습니다. Cmd+Opt+I 를 누르기만 하면 됩니다. Safari 메뉴를 열고 메뉴 막대에서 환경 설정 > 고급 > 개발 메뉴 표시를 선택할 수도 있습니다.

BrowserStack

웹 사이트 테스트에 사용할 수 있는 또 다른 플랫폼은 BrowserStack입니다.

이 클라우드 기반 테스트 플랫폼은 모든 주요 브라우저 및 장치에서 작동합니다. 무료 평가판에 가입한 후 라이브 대시보드로 이동하여 OS를 선택할 수 있습니다.

그런 다음 원하는 브라우저 버전을 선택하여 브라우저에서 라이브 세션을 시작할 수 있습니다. 마지막으로 요소 검사를 통해 검사할 웹 사이트를 탐색할 수 있습니다.

웹사이트를 검사하는 방법

요소 검사 도구를 사용하여 웹 사이트를 검사하는 방법을 살펴보겠습니다. 웹 페이지 요소를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 검사를 선택하여 시작하십시오.

그러면 브라우저에서 요소 검사 도구가 열립니다. 도구가 열리면 HTML 및 CSS 코드 조작을 시작하여 웹 페이지의 모양에 어떤 영향을 미치는지 확인할 수 있습니다.

예를 들어 요소의 색상을 변경하거나 클래스를 추가 또는 제거하거나 요소의 위치를 ​​변경할 수도 있습니다. 상단의 검색 필드를 사용하여 텍스트나 이미지를 검색할 수도 있습니다.

물론 요소 검사를 사용하여 변경한 내용은 일시적일 뿐입니다. 페이지를 새로 고치거나 브라우저를 닫으면 저장되지 않습니다. 그러나 이것은 웹 사이트를 영구적으로 변경하지 않고 특정 변경 사항이 어떻게 보이는지 시험해 볼 수 있는 좋은 방법입니다.

Ctrl+Shift+I (Mac에서는 Cmd+Opt+I )를 눌러 개발자 도구를 열어 도구에 액세스할 수도 있습니다. 그런 다음 창 상단의 요소 탭을 클릭합니다.

마지막으로 Chrome 메뉴를 열고 앞에서 설명한 추가 도구 > 개발자 도구를 선택하여 요소 검사에 액세스할 수도 있습니다.

요소를 변경하는 방법

웹 페이지의 요소를 변경하려면 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다. 열리는 요소 패널에서 변경하려는 부분을 찾아 두 번 클릭합니다.

요소 상자를 열면 패널 왼쪽 상단에 있는 검사 커서 아이콘을 사용하여 수정하려는 요소의 소스 코드를 강조 표시할 수 있습니다. 강조 표시된 코드를 마우스 오른쪽 버튼으로 클릭하고 HTML로 편집을 선택합니다.

상자가 확장되면 텍스트를 변경할 수 있습니다. 변경 사항을 미리 보려면 요소를 선택 취소하면 됩니다. 텍스트를 두 번 클릭하여 편집할 수도 있습니다.

이 기술을 사용하여 요소의 CSS 코드를 변경할 수도 있습니다. 이렇게 하려면 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다. 요소 패널에서 변경하려는 요소를 찾고 element.style 속성을 선택합니다. 그런 다음 중괄호 안에 코드나 선언을 추가할 수 있습니다.

요소를 숨기거나 삭제하는 방법

웹 페이지에서 요소를 숨기거나 삭제할 수도 있습니다. 숨기거나 삭제하려는 요소를 찾았으면 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하여 요소 검사 도구를 시작합니다.

여기에서 요소를 마우스 오른쪽 버튼으로 클릭한 다음 요소 삭제 또는 요소 숨기기 옵션을 선택합니다.

삭제 버튼은 문서 개체 모델(DOM) 요소를 제거합니다. 숨기기 버튼은 단순히 요소를 숨기지만 여전히 DOM에 있습니다.

CSS 클래스를 검사하는 방법

CSS 클래스를 검사하는 방법에는 여러 가지가 있습니다. 그러나 가장 쉬운 방법은 검토하려는 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하는 것입니다. 그런 다음 스타일 탭을 열어 CSS 스타일을 확인합니다.

이 탭에는 적용된 인라인 스타일만 표시되며 스타일 시트에서 가져온 스타일은 표시되지 않습니다.

요소에 적용된 모든 CSS 스타일을 보려면 계산됨 탭을 사용할 수 있습니다. 스타일 시트의 스타일을 포함하여 요소에 적용되는 모든 CSS 스타일을 보여줍니다.

웹 페이지 검사를 마치면 요소 검사 도구를 닫기만 하면 됩니다. 변경 사항은 저장되지 않으므로 실수로 무언가를 깨뜨릴 염려가 없습니다.

웹 사이트를 검사할 때 찾아야 할 사항

Inspect Element에 액세스하는 데 어떤 방법을 사용하든 동일한 인터페이스가 표시됩니다. HTML 창과 CSS 창의 두 창으로 구성됩니다.

HTML 창은 웹 페이지의 구조를 보여줍니다. 다양한 요소가 어떻게 중첩되고 관련되어 있는지 확인할 수 있습니다.

CSS 창에는 선택한 요소에 적용된 스타일이 표시됩니다. CSS 규칙을 편집하여 변경 사항이 요소의 모양에 어떤 영향을 미치는지 확인할 수도 있습니다.

특정 텍스트나 이미지 등 웹 사이트에서 특정 항목을 찾고 있다면 요소 검사를 사용하여 찾을 수 있습니다. 특정 요소를 찾을 수 있는 검색 필드가 있습니다.

웹 사이트를 검사할 때 염두에 두어야 할 몇 가지 사항이 있습니다.

• HTML: 웹 페이지의 구조를 정의하는 코드입니다. 요소가 구성되는 방식과 서로 상호 작용하는 방식에 주의를 기울이십시오.
• CSS: 웹 페이지의 스타일을 정의하는 코드입니다.
• JavaScript : 웹 페이지의 동작을 정의하는 코드입니다. 요소가 상호 작용하는 방식과 페이지가 사용자 입력에 응답하는 방식에 영향을 줍니다.
• 디자인 : 웹사이트의 전반적인 모양과 느낌. 레이아웃이 얼마나 사용자에게 친숙하고 웹 사이트의 목적에 얼마나 잘 맞는지에 영향을 미칩니다.
• 콘텐츠: 웹사이트의 텍스트, 이미지 및 기타 미디어.

웹 사이트를 검사할 때 찾아야 할 사항은 주로 디자이너, 개발자 또는 디지털 마케터인지에 따라 달라집니다. 앞서 논의한 것처럼 Inspect Element 도구는 디자인 테스트에서 문제 해결에 이르기까지 모든 것을 도울 수 있습니다.

결론

요소 검사는 디자이너와 개발자에게 유용한 기능입니다. 이를 사용하여 웹 페이지의 HTML 및 CSS를 보고 편집할 수 있습니다. 이 도구는 작업 중인 웹 페이지를 변경하거나 코딩 방법을 확인하려는 경우에 유용할 수 있습니다.

요소 검사는 대부분의 웹 브라우저에서 사용할 수 있습니다. 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 검사를 선택하여 액세스할 수 있습니다. 검사 창을 열면 웹 페이지의 HTML 및 CSS 코드를 볼 수 있으며 다양한 변경을 할 수 있습니다.

웹사이트 관리 또는 최적화에 도움이 필요하십니까? WP Engine이 WordPress 호스팅에서 사이트 및 클라이언트 관리에 이르기까지 모든 것을 어떻게 도울 수 있는지 알아보십시오!