일반적으로 웹 페이지를 편집 할 때는 Adobe Dreamweaver, CoffeeCup, Bluefish 또는 다른 개발 도구 중 하나와 같은 특정 편집 도구를 사용합니다. 하지만 브레인 스토밍 중이거나 라이브 페이지에서 무언가를 시험 해보고 싶다면 어떨까요? 우리는 선택한 도구로 페이지의 사본을 만들고 그와 함께 놀 수 있습니다. 또는 웹 브라우저 내에서 할 수도 있습니다. 이 튜토리얼에서는 브라우저에서 웹 페이지를 편집하는 방법을 보여줍니다.
Firefox는 개발자 도구라고하며 Chrome은 기능을 검사 요소라고하고 Chrome은이를 검사라고합니다. 어느 쪽이든, 그것은 브라우저가 디자인의 광경을 엿보고 그것을 구동하는 코드를 살펴 보는 방법입니다. 이 기능은 잘 알려져 있으며 많이 사용됩니다. 잘 알려지지 않은 것은 즉시 해당 코드를 변경할 수있는 기능입니다.
변경 한 내용은 저장되지 않으며 실시간에 영향을 미치지 않습니다. 개발자 도구에 페이지를로드하지 않으려면 깔끔한 실험 방법입니다.
브라우저에서 웹 페이지를 편집하십시오
Dreamweaver 및 이와 유사한 도구에는 다양한 브라우저에서 디자인이 어떻게 보이는지 시뮬레이션하는 내장 브라우저 에뮬레이터가 있습니다. 그것들이 좋은 것은 항상 정확하지는 않으며 개발자 도구에서 환상적으로 보이는 것이 독립형 브라우저에서는 약간 다르게 보이는 사이트를 시작할 때 종종 발견됩니다.
일반적으로 이러한 이유로 라이브를 시작하기 전에 내부 웹 서버에서 사이트를 시작하고 브라우저에서 테스트합니다. 페이지가 이미 존재하거나 무언가를 시도하고 싶다면 복사하여 개발 도구에로드 할 필요가 없으며 브라우저의 개발자 도구를 사용하면됩니다.
Firefox를 사용하므로 사용법을 알려 드리겠습니다. Chrome은 거의 동일합니다.
- 브라우저에서 실험하려는 웹 페이지를 엽니 다.
- 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하십시오.
하단에 코드가 포함 된 새 창이 나타나면 페이지가 두 개로 나뉩니다. 이 코드는 선택한 페이지의 원동력입니다. 하단 탭 상단의 탭에서 다양한 페이지 요소에 액세스 할 수 있습니다. 예를 들어 Firefox에서 Inspector, Console, Debugger, Style Editor 등이 표시됩니다.
아래쪽 창의 줄 위로 커서를 이동하면 웹 페이지 강조 표시의 다른 부분이 표시됩니다. 강조 표시 중 코드 행은 페이지의 해당 부분에 영향을주는 코드입니다.
- 페이지 모양을 다루려면 스타일 편집기를 사용해보십시오.
- 페이지 작동 방식을 다루려면 콘솔 또는 내게 필요한 옵션을 사용해보십시오.
- 버그를 해결하거나 문제를 해결하려면 콘솔 또는 디버거를 사용하십시오.
성능은 온 사이트 SEO에 유용하지만 메모리, 네트워크 및 스토리지는 그다지 사용되지 않습니다.
원하는만큼 개발자 도구 내에서 혼란 스러울 수 있으며 사이트에는 영향을 미치지 않습니다. 개별 브라우저에서 페이지가 표시되는 방식 만 변경되며 웹 사이트 자체에는 영향을 미치지 않습니다. 도구를 닫으면 모든 변경 사항이 손실됩니다.
페이지 변경
이제 실제 웹 사이트에 영향을 미치지 않고 원하는 것을 변경할 수 있다는 것을 알게되었습니다. 페이지에서 편집하려는 요소를 찾으십시오. 글꼴, 글꼴 색, 배경 이미지 또는 원하는 것을 변경할 수 있습니다. 이 예에서는 배너 헤드 라인의 글꼴 색을 변경하겠습니다.
- 변경하려는 정확한 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하십시오.
- '제목'또는 'H1'으로 줄을 강조 표시하여 상단 창에서 텍스트가 강조 표시되도록합니다.
- 왼쪽 두 창으로 이동하여 글꼴 색을 찾으십시오.
- 선택기를 사용하려면 값을 다른 것으로 변경하거나 색상 점을 선택하십시오.
변경이 완료되면 변경 사항이 동적으로 나타납니다. 색상, 크기, 글꼴, 배경 및 글꼴에 대한 모든 것을 변경할 수 있습니다. 작업을 저장할 수 없지만 해당 세션에 대한 변경 사항은 유지됩니다.
아이디어가 있고 모든 개발 앱을 실행하기 전에 페이지를 빠르게 확인하려는 경우 이상적인 페이지에 대한 모든 것을 변경할 수 있습니다. 변경 한 내용과 여기에 저장할 수없는 위치를 기억하기 만하면됩니다. 스크린 샷을 찍거나 변경 사항을 기록하고 개발자 도구 내에서 복제하여 변경 사항을 적용해야합니다.
브라우저에서 웹 페이지를 편집하면 페이지를 실험하거나 둘러 볼 수있는 깔끔한 방법입니다. 또한 비싼 개발자 도구를 구입하지 않고도 웹 개발에 대해 조금 배울 수있는 좋은 방법입니다. 이제 당신은 방법을 알고 놀러 가십시오!
