집 › 컴퓨터 수리 › Google 크롬에서 페이지 코드를 여는 방법. Chrome에서 페이지의 소스 코드를 보는 방법

Google 크롬에서 페이지 코드를 여는 방법. Chrome에서 페이지의 소스 코드를 보는 방법

각 인터넷 사용자는 그가 오랜 시간을 보내는 즐겨 찾는 사이트를 가지고 있습니다. 게으른 사람 만이 그것이 어떻게 만들어졌고 무엇으로 구성되어 있는지 생각하지 않았습니다. 사이트를 만드는 방법에는 여러 가지가 있기 때문에 이러한 모든 질문에 답할 수는 없지만 사이트를 구성하는 명령과 코드를 보는 것은 가능하고 모든 사람이 공개적으로 사용할 수 있습니다.

또 다른 질문은 프로그래밍에 종사하지 않는 사람이 코드를 구성하는 일부 기호를 이해할 수 있는지 여부입니다. 그러나 아래에 표시될 예에서 모든 Google 크롬 사용자는 사이트의 개별 요소를 볼 수 있습니다.

Google 브라우저에서 html 페이지의 소스 코드를 보는 방법

Chrome에서 페이지 코드를 보려면 관심 있는 사이트로 이동하여 다음 단계를 따라야 합니다.

이 두 지점은 사용자, 프로그래머 또는 해커에 대한 기능 및 정보 내용이 다릅니다.

페이지 코드와 "코드 보기" 명령의 차이점은 무엇입니까

이러한 각 기능을 분석하면 별도의 기사를 작성할 수 있습니다. 프로그래머에게는 이 차이가 중요하며 Google Chrome 브라우저에서 "코드 보기"를 사용해야 하는 경우와 "페이지 코드 보기"를 사용해야 하는 경우를 이해합니다.

그러나 일반 사용자를 위해 설명하면 이러한 기능은 다음과 같은 목적으로 나눌 수 있습니다.

"페이지 코드 보기"는 페이지의 기본 조합을 보기 위해서만 필요합니다. 기본적으로 이것은 사이트의 구조입니다(CSS 파일 형식의 추가 모델 및 사이트 작성자의 폴더에 남아 있는 기타 추가 사항 없음). 이 구조는 복사-붙여넣기로 자신의 페이지를 만드는 데 적합하지 않지만 프로그래머가 정확히 무엇을 하고 어떤 순서로 Google 크롬 브라우저의 사이트가 그러한 외부 디자인을 갖게 되었는지 확인할 수 있습니다.
"코드 보기"는 페이지에서 영향을 받는 모든 영역을 강조하는 자세한 구조를 표시합니다. 특정 목록 코드 위로 마우스를 가져가면 해당 코드가 속한 사이트에서 해당 항목이 강조 표시됩니다.
페이지 코드 보기는 편집할 수 없는 별도의 브라우저에서 열립니다. 즉, 사이트 코드 복사 및 읽기에만 적합합니다. 그러나 똑같이 유용한 기능입니다.
"코드 보기"는 변경 가능하며 모든 요소를 자신에게 맞는 방식으로 편집할 수 있습니다. 물론 이러한 모든 변경 사항은 페이지가 새로 고쳐질 때까지 "라이브"되지만 때로는 이러한 설정을 통해 이러한 값 또는 해당 값이 필요한 이유와 변경하면 어떻게 되는지 이해하는 것이 재미있을 수 있습니다. 그러한 행동으로 인해 자신이나 사이트에 해를 끼칠 것이라고 가정해서는 안됩니다. 이러한 변경 사항은 Google 크롬 코드에만 영향을 미치고 온라인에 연결되지 않습니다.

요소 코드를 보는 방법에 대한 질문 고려

그러한 질문에 대답해야 한다면 예가 있는 변형만이 스스로를 제안합니다. 하나의 글로 이 주제를 이해하는 사람(웹 개발자)이 되는 것은 매우 어렵지만, 질문이 해결될 수 있도록 예를 들어 보여주는 것이 훨씬 쉽기 때문입니다.

요소 코드의 기능은 매우 광범위하므로 Google 크롬 브라우저 웹사이트의 단어 중 하나를 사용합니다. 우리 사이트에 어떤 키워드(코드에서는 "키워드"로 작성됨)가 사용되었는지 고려하고 싶었습니다. 이를 위해 다음 알고리즘을 수행합니다.

Google Chrome 브라우저에서 이 기능을 사용하는 다른 방법

일반적으로 요소의 코드를 보는 방법과 필요한 이유에 대한 질문에 계속 대답하면서 해당 기능을 나열해야 합니다. 즉, Google 크롬 브라우저에서 모든 사이트 요소의 코드를 볼 수 있는 기능 덕분에 다음을 수행할 수 있습니다.

head("사이트 헤더")에서 시작하여 end(모든 프로그램의 최종 명령)로 끝나는 사이트 구조를 참조하십시오.
사이트의 모든 기능 보기, 즉 다른 사이트에 대한 링크, 외부 사이트의 추가 모듈 및 다양한 정보 수집을 위한 내장 카운터의 존재
사이트에서 복사가 금지되어 있는지 확인하십시오.
이 코드는 사이트의 다른 페이지에 대한 모든 링크와 링크를 클릭한 후의 디자인 및 후속 작업을 기록합니다.

이것은 완전한 목록이 아닙니다. 그러나 특별한 지식 없이는 Google 크롬 페이지의 코드를 "읽는" 것이 거의 불가능하며 수신 된 데이터는 일반 사용자에게 거의 필요하지 않습니다.

"요소 코드 보기" 항목이 작동하지 않음

각 사이트는 요소 코드에 대한 공개 액세스 권한을 갖게 됩니다. 즉, 가장 인기 있고 값비싼 사이트도 코드를 볼 수 있도록 공개됩니다. 따라서 Google Chrome 브라우저의 항목이 활성화되지 않거나 오류가 발생하는 경우 다음과 같은 이유가 있을 수 있습니다.

사용자 프로필이 손상되었습니다.
컴퓨터에 맬웨어가 있는지 여부
성능 향상을 위해 특정 확장 프로그램으로 차단(이럴 수도 있음).

손상된 사용자 프로필 수정

새 프로필을 만들려면 컴퓨터에서 이전 프로필을 제거해야 합니다. 이렇게 하려면 다음을 수행하십시오.

Google 크롬을 닫고 내장된 Windows 탐색기 브라우저를 시작합니다.
주소 표시줄에 %LOCALAPPDATA%\Google\Chrome\User Data\ 명령을 입력합니다.
디렉토리가 열리면 "Default" 폴더를 찾아 이름에 "Backup"을 추가하여 "Backup Default"를 가져옵니다.
이제 Chrome 브라우저를 새로 실행하면 새 프로필이 생성됩니다.

맬웨어 또는 그 잔해 제거

새 프로필이 페이지 요소 코드에 대한 액세스 권한을 부여하지 않고 여전히 오류가 표시되는 경우 다음을 수행해야 합니다.

Windows 명령 프롬프트(실행)를 열고 "cmd"를 입력합니다.
줄에 다음 명령을 입력합니다. RD /S /Q "%WinDir%\System32\GroupPolicyUsers".
작업을 확인한 후 RD / S / Q "% WinDir% \ System32 \ GroupPolicy"를 입력합니다.
이제 "gpupdate /force"(따옴표 제외).

모든 것이 올바르게 완료되면 컴퓨터를 다시 시작한 후 Chrome에서 요소 코드를 열고 브라우저가 정상적으로 작동합니다.

지침

HTML을 여는 가장 쉬운 방법은 암호내장 브라우저 기능의 사용과 관련이 있습니다. 각각 보기 옵션이 있습니다. 암호페이지. 따라서 Internet Explorer 브라우저에서 보려면 암호"View" - "View html-" 메뉴에서 열어야 합니다. 암호».

Opera 브라우저로 작업하는 사람들을 위해 암호"보기" - "소스 코드"를 열거나 Ctrl + F3 키 조합을 눌러야 합니다. Mozilla Firefox 사용자는 페이지를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 "페이지 소스 코드"를 선택하여 html 코드를 볼 수 있습니다.

Google 크롬으로 작업하는 사용자는 보고 있는 페이지를 마우스 오른쪽 버튼으로 클릭하고 "보기" 항목을 선택하여 호출되는 상황에 맞는 메뉴를 사용해야 합니다. 암호페이지".

Opera에서 열린 코드를 저장하려면 창의 왼쪽 상단에 있는 html로 열린 페이지에서 "저장" 버튼을 클릭합니다. Mozilla Firefox에서 "파일" - "다른 이름으로 페이지 저장..."을 선택합니다. html 코드는 IE에서도 같은 방식으로 저장됩니다. Google Chrome에서 오픈 소스 코드를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 "다른 이름으로 저장"을 선택합니다.

저장된 코드로 작업해야 하는 경우 이를 위한 특수 프로그램을 사용하십시오. HTML 언어를 마스터하려면 구문 강조 기능이 있는 CuteHTML 편집기가 완벽하며 매우 간단하고 사용하기 쉽습니다. 이를 통해 상당히 복잡한 페이지를 만들 수 있습니다.

HTML로 전문적으로 작업하고 복잡한 사이트를 만들려면 Dreamweaver를 사용하십시오. 매우 복잡한 프로젝트도 빠르게 만들 수 있는 시각적 웹 사이트 빌더입니다. 이 프로그램에서 작업하면 인터넷 리소스 생성 속도를 크게 높이고 단순화하는 기성 사이트 템플릿을 사용할 수 있습니다.

매우 아름다운 웹사이트를 만드는 데 사용할 수 있는 많은 무료 템플릿을 온라인에서 사용할 수 있습니다. 원하는 템플릿을 다운로드하고 Dreamweaver에서 연 다음 원하는 방식으로 사용자 지정하기만 하면 됩니다. http://www.internet-technologies.ru/templates/에서 기성품 템플릿을 다운로드할 수 있습니다.

인터넷의 웹 페이지에는 Word 문서에 대한 링크가 포함될 수 있습니다. 링크를 클릭하면 브라우저와 텍스트 편집기 모두에 표시될 수 있습니다. 텍스트 파일을 여는 가장 좋은 방법은 무엇입니까?

Word 편집기에는 문서가 브라우저에서 온 것인지 여부에 대한 독립적인 설정이 없습니다. 모든 매개변수는 Windows에서 직접 구성됩니다.

다음 중 하나를 수행하여 파일 형식 대화 상자를 엽니다.

Windows 키(OS 로고가 포함되어 있으며 키보드 하단, Ctrl 키와 Alt 키 사이에 있음)를 길게 누릅니다.
- 바탕 화면에서 내 컴퓨터 아이콘을 두 번 클릭합니다.

이제 나타나는 메뉴에서 도구 > 폴더 옵션을 선택하고 파일 형식 탭으로 이동합니다. Windows에서 다양한 파일 형식에 대한 정보를 수집하는 동안 몇 분 정도 기다려야 합니다.

목록이 나타나면 목록에서 DOC 확장자를 찾아야 합니다. 그것을 클릭하여 강조 표시한 다음 "더 보기" 버튼을 클릭하십시오. 이제 파일 형식 속성 변경 대화 상자를 볼 수 있습니다. 편집은 브라우저에서 Word 문서를 표시하기 위한 두 가지 옵션을 제공합니다.

텍스트 편집기에서 문서 열기

이것이 기본 설정입니다. 유지하기로 결정한 경우 일부 설정만 조정하면 됩니다. 문서 열기 또는 저장 여부를 선택하려면 "다운로드 후 열기 확인" 항목 옆의 확인란을 선택해야 합니다. "이 형식의 파일을 열 때 항상 확인" 체크를 해제하면 위 항목을 체크할 수 없게 되니 유의하시기 바랍니다.

Internet Explorer에서 문서 열기

파일 형식 속성 편집 대화 상자에서 같은 창에서 찾아보기 탭 옆에 있는 확인란을 선택합니다. 이 설정은 Word 문서가 기본적으로 Internet Explorer에서 열림을 의미합니다. 그런 다음 브라우저는 Word와 Internet Explorer의 기본 메뉴가 결합된 도구 모음인 적절한 플러그인을 사용합니다. 텍스트 편집기에서와 동일한 방식으로 문서를 수정하고 서식을 지정할 수 있지만 일부 옵션을 사용하지 못할 수 있습니다.

이 설정을 제거하는 것은 어렵지 않습니다. "파일 유형 속성 변경" 대화 상자를 열고 "같은 창에서 찾아보기"를 선택 취소하십시오. 그런 다음 문서는 기본적으로 Word에 로드됩니다.

다른 브라우저에서 문서 열기

다른 브라우저에서 문서를 여는 것은 특수 플러그인을 설치한 후에만 가능합니다. 예를 들어 View Docs는 Opera용으로, Google Docs Viewer 기능은 Firefox용으로 개발되었습니다. 컴퓨터에 다운로드 및 설치가 필요하지 않은 다양한 온라인 도구도 있습니다.

블로그 또는 게시물의 제목, 추가 태그 등과 같은 일부 중요한 블로그 요소의 크기, 색상. 나중에 기사가 작성된 테스트 도메인을 실험하면서 필요한 코드를 수동으로 검색했습니다.

그리고 최근에는 링크의 색상을 변경했습니다. 이 문제에 대한 많은 문헌을 삽질한 후 간단한 사실을 깨달았습니다. 모든 사람이 자신의 템플릿에서 예제를 제공하지만 우리 모두는 다른 템플릿을 가지고 있으며 예제의 코드가 적어도 조금이라도 비슷하면 좋습니다. 어쨌든 찌르는 방법을 사용하여 롤링하여 찾을 것입니다.

번호가 링크 코드와 함께 전달되지 않았습니다. 모두 완전히 다른 길을 가리켰다. 간단하고 정밀한 기구가 있을까 싶었는데, 모든 사이트에서 올바른 html 코드를 찾는 방법.많은 블로거는 경험이 있어도 템플릿을 약간 수정하기가 어렵습니다. 모두가 사이트를 만드는 데 자신의 관심사와 목표가 있기 때문에 걱정할 것이 없습니다.

다음과 같이 템플릿을 약간 변경하려는 경우 제목, 기사 제목 및 제목, 글꼴 및 링크의 색상 및 크기 변경,일반적으로 이 기사에서 논의되는 간단한 원리를 배우는 것으로 충분합니다. 그러나 html과 css에 대한 더 깊은 연구나 전문가의 도움이 필요한 복잡한 경우도 있습니다.

어느 날 친구가 템플릿에서 머리글 패널의 색상을 변경할 위치를 찾아달라고 요청했습니다. 테스트 하위 도메인에 테마를 업로드했습니다. 이 요소에 대한 설정은 style.css에 저장되지 않고 다른 파일에 저장되어 있어 사람이 찾을 수 없었습니다.

사이트의 html 및 css 코드를 찾고 변경하는 방법

긴 글이 싫으신 분들은 여기를 참고하세요. 기사의 끝에서 Notepad ++를 사용하여 사이트의 html 코드를 보는 방법과 글꼴 색상을 변경하는 방법의 예를 사용하여 템플릿의 디자인을 변경하는 방법을 보여주는 비디오 자습서입니다. 비디오에서 블로그를 다루는 다른 미묘함이 있습니다. 그리고 텍스트에 더 가깝고 이해하기 쉬운 사람들을 위해 아래는 스크린샷과 함께 주제에 대한 자세한 분석입니다.
httpv://youtu.be/uIlVvwCt2ho

용어 및 개념

"라는 기사 제목을 붙이는 것이 더 정확할 것입니다. CSS 코드를 찾는 방법", 하지만 기본적으로 이 질문에 대한 답은 html에서 찾고 있기 때문에 "잘못된" 이름에서 멈추기로 결정했습니다. CSS와 HTML은 동일한 시스템의 두 부분이지만 매우 다른 것입니다. 인터넷에는 많은 기술 기사가 있으며 여기에서 다음을 이해하는 것으로 충분할 것입니다.

HTML- 사이트의 구조에 대한 책임(다음에 무엇을, 어떤 순서로 등). 이것은 사이트가 구축되는 기초입니다. 집과 비교하면 이것이 레이아웃, 방 배치입니다.
CSS- 디자인(글꼴, 크기, 색상 등)을 담당합니다. 이것은 집의 일반적인 스타일과 개별 방의 스타일입니다. 어떤 벽지, 램프, 커튼, 가구가 될 것입니다. 따라서 다음을 규정하는 문서는 CSS 코드, "스타일 시트"라고 함

예를 들어 사이트 헤더의 색상, 텍스트의 글꼴 크기 또는 사이드바의 제목 색상을 변경하는 방법이 궁금하다면 CSS 스타일 시트에서 이 모든 것을 찾아야 합니다. 이것은 코드를 직접 변경하기 위해 먼저 이해할 가치가 있는 유일한 것입니다.

저는 복잡한 것을 단순하게 바꾸는 것을 좋아합니다. 오래 전에 첫 차를 가졌을 때 아주 오래되었고 배선이 썩었고 퓨즈가 자주 끊어졌고 견인차로 주유소로 끌 때마다 기억합니다. 독립 교체 비용이 1 페니라는 사실에도 불구하고 얼마나 많은 돈이 버려 졌는지 상상해보십시오.

일단 마스터가 정확히 무엇을하는지 살펴 보았습니다. 퓨즈가 어떻게 작동하는지 아직 모르겠습니다. 그러나 나는 그것을 바꿀 곳을 알고 있습니다). 나는 모터를 직접 수리하지 않을 것이며 퓨즈를 교체하는 것도 어렵지 않습니다. 웹 사이트도 마찬가지입니다.

프로그래머가 되고 싶지 않다면 프로그래밍을 깊이 이해할 필요가 없습니다. 무엇을 위한 것인지, 어디에서 찾을 것인지, 어떻게 변경해야 하는지 명확하게 이해하는 것으로 충분합니다. 스스로 할 수 있는 것은 바꾸고 나머지는 전문가에게 맡기는 것이 좋다. 관련 기사에는 이 주제에 대한 유용한 링크가 있습니다.

모든 일에 전문가가 되어야 합니까?

SEO 블로그에는 초보자가 html을 깊이 이해해야 하는지, 아니면 모든 것이 고유하도록 스스로 사이트를 작성하는 방법을 배워야 하는지에 대한 토론이 자주 있습니다. 여기 누군가에게 더 가까운 것이 있습니다. 조금 더 관심이 생겨 지금은 추가로 블라디미르 선생님과 함께 공부하고 있습니다. 올해 11월 블라디미르는 자신의 블로그를 열었습니다. 그의 블로그는 가장 단순한 무료 템플릿으로 만들어졌으며 자신을 위해 약간만 수정했습니다.

10일 만에 블로그는 일일 트래픽이 약 150만 명으로 모든 Runet 사이트 순위에서 104위를 차지했습니다. 10일 동안. 그래서 거래가 뭐야? Vladimir는 html에 정통하며 자신을 위해 고유 한 템플릿을 주문하고 구입할 수 있습니다. 여기서 당신은 그것을 이해해야합니다 비밀은 패턴에 있는 것이 아니라 정보의 유용성에 있습니다.

HTML 코드는 어디에 숨어 있습니까?

여담에 대해 죄송합니다. 코드로 돌아가겠습니다). 블로그 제목의 글꼴 색상을 변경하고 싶다고 가정해 보겠습니다. 내 테스트 사이트의 예를 고려할 것입니다.

Google Chrome 브라우저에서 사이트 열기 (아직 사용하지 않는 경우 설치하십시오. 웹 사이트 작업에 적합하며 많은 도구가 내장되어 있습니다).
변경하려는 요소 위로 마우스 커서를 이동합니다. . 이 경우 블로그 제목입니다. 마우스 오른쪽 버튼으로 클릭하고 나타나는 창에서 요소 코드 보기를 선택합니다.

중요: 페이지 코드 보기와 혼동하지 마십시오! 이제 전체 페이지가 필요하지 않고 별도의 요소만 필요합니다.

그것을 클릭하면 브라우저 하단에 코드보기 창이 나타납니다.

변경하려는 코드 줄이 빨간색으로 강조 표시됩니다.

그러나 파란색으로 강조 표시된 영역에는 우리가 찾고 있는 것이 포함되어 있습니다. 여기에서 글꼴, 색상, 크기, 강조 표시 등을 담당하는 정확한(대략적이지 않은) 코드 줄을 찾을 수 있습니다. 이렇게 하면 모든 템플릿의 모든 요소에 대한 모든 코드를 찾을 수 있습니다.

파란색으로 강조 표시된 블록에서 원하는 줄을 찾습니다. 오른쪽에는 슬라이더가 있으며 스크롤하여 원하는 라인을 찾을 수 있습니다.

일반 원칙, 여기서 검색 대상은 다음과 같습니다.

글꼴 이름 - FONT FAMILY 행

글꼴 크기 - FONT SIZE 라인

글꼴 색상 - COLOR 라인

다음은 모든 요소의 이름, 크기 및 글꼴 색상을 변경하는 세 가지 주요 라인입니다. 오른쪽에 있는 스타일 css 라인은 문서에서 라인의 위치를 제공합니다. 다른 요소를 변경해야 하는 경우(예: 메뉴 표시줄의 색상이나 링크의 색상을 변경할 수 있는 선이 있는 위치를 찾아야 하는 경우) 모든 것이 정확히 동일한 방식으로 수행됩니다. .

주목:

복사할 줄은 그림에서 빨간색으로 강조 표시되어 있습니다.

나중에 스타일시트에서 찾을 수 있습니다.

4. 라인 복사. 이 예에서는 사이트 이름의 색상을 변경하고 싶기 때문에 두 번째 그림에서 빨간색 사각형으로 강조 표시된 줄을 복사합니다. 내 템플릿에서 그녀는 사이트 이름의 색상 변경을 담당합니다.

#헤더 h1 a, #헤더 h1 a:방문(

"스타일 시트(style.css)" 파일에서 원하는 줄을 찾습니다. 이것은 이미 관리자에서 수행됩니다. 확신과 완전한 이해가 있을 때까지 .

따라서 관리자 패널로 이동합니다: CONSOLE - APPEARANCE - EDITOR. 오른쪽 사이드바에서 STYLE TABLE(STYLE.CSS) 파일을 찾아서 엽니다.

이제 CTRL + F 키를 사용하여 검색 창을 엽니다. 위쪽 창에 빈 줄 창이 나타납니다. 4단계에서 복사한 줄을 붙여넣습니다.

그리고 스타일 시트에서 이 줄이 어떻게 강조 표시되는지 볼 수 있습니다(그림에서 - 주황색).

요소를 변경합니다. 우리의 경우 글꼴 색상을 변경하고 있으므로 COLOR 줄에서 다른 값인 원하는 색상으로 대체합니다. 예에서 색상은 검은색이며 그 의미는 다음과 같습니다.

모든 웹 색상 팔레트 서비스에서 색상을 선택할 수 있습니다. "웹 색상 팔레트" 검색 엔진을 입력하고 원하는 색상을 선택하십시오. 색상을 선택하고 디지털 값을 복사한 다음 이전 값으로 조심스럽게 대체합니다. 그런 다음 파일 업데이트를 클릭하고 무슨 일이 있었는지 확인하십시오.

변경 사항이 표시되지 않으면 지난 1시간 동안 다시 페이지로 이동합니다. 이번에는 모든 것이 표시되어야 합니다.

이것은 오랫동안 설명되었지만 실제로는 특히 초기 기술이 나타날 때 모든 것이 빠르게 수행됩니다.

특정 요소를 변경하는 방법에 대해 자세히 설명합니다.

오늘은 여기까지입니다. 더 이상 코드로 고문하지 않겠습니다. 이제 여러분이 html 코드 또는 오히려 css 코드의 모든 요소를 쉽게 찾고 변경할 수 있기를 바랍니다. 예, 전문가들은 단순화에 대해 저를 용서할 것입니다. 그리고 이해가 안 되더라도 페이지를 방문하세요. 말도 안되는 일에 시간을 낭비하지 마십시오.

모든 엔진(워드프레스, 줌라 등)에 대해 모든 테마/템플릿에서 단어나 요소를 검색하고 찾고 필요한 항목으로 대체하는 방법에 대한 Artem Abramovich의 비디오를 시청하는 것이 좋습니다.

마음에 들면 공유해주세요:

다음 사항에 관심이 있을 수도 있습니다.

인터넷에 게시된 사이트의 파일 및 코드에 영향을 주지 않고 사이트 자체의 모든 변경 사항을 빠르게 확인해야 합니다. 예를 들어 블록의 색 구성표를 변경하고 이동된 요소를 이동하는 등의 작업을 수행할 수 있습니다.

이를 위해 많은 웹마스터는 로컬 Denwer 또는 OpenServer 서버를 사용하여 컴퓨터에서 사이트의 전체 복사본을 실행합니다. 이 방법은 보편적이며 전문가에게 적합하며 다양한 스크립트 및 플러그인의 작동을 확인하고 디자인 변경을 실험하고 모든 사이트 파일을 편집하고 테스트 후 적절한 변경 사항을 사이트로 직접 전송할 수 있습니다.

웹마스터 아트와는 거리가 먼 사용자의 경우 이러한 목적으로 브라우저를 사용하는 것이 좋습니다. 저는 크롬을 사용하기 때문에 이 특정 브라우저에 대한 스크린샷과 함께 지침을 제공할 것입니다. 비유하자면 Opera, Yandex.Browser, Mozilla Firefox 및 기타 브라우저에서 작업할 수 있으며 도구의 원리는 비슷합니다.

지침 1: 브라우저에서 사이트의 전체 HTML 코드를 보는 방법

사이트의 필수 웹 페이지를 엽니다. 필요한 요소를 마우스 오른쪽 버튼으로 클릭하면 사용 가능한 명령이 있는 브라우저 컨텍스트 드롭다운 메뉴가 나타납니다.

그림 1. Chrome 브라우저에서 웹 페이지의 전체 HTML 코드 보기

중요한:예를 들어 활성 요소(링크, 이미지, 동영상)와 비활성 요소(텍스트, 배경, div)에 대해 드롭다운 메뉴의 명령이 다를 수 있습니다.

그림 2. Chrome 브라우저 드롭다운 메뉴

따라서 필요한 명령을 찾지 못한 경우 다른 곳을 마우스 오른쪽 버튼으로 클릭하거나 브라우저 단축키를 사용하십시오.

그림 1로 돌아가서 원본 웹 페이지의 전체 HTML 코드를 보는 데 필요한 명령을 보여 주며 " 페이지 코드 보기". 명령을 클릭하면 원래 웹 페이지의 전체 코드와 함께 새 탭이 열리고 모든 것에 큰 장점이 있습니다. 구문 강조 표시와 함께 보기를 사용할 수 있습니다.

그림 3. 이 사이트의 코드 스니펫

이 도구는 찾고 있는 요소를 찾고 편집하는 데 매우 유용합니다.

웹 페이지의 모든 HTML을 보는 다른 방법

더 빠른 액세스를 위해 다른 방법을 사용하여 이 도구를 호출할 수 있습니다.

그림 1에서는 키보드 단축키를 통해 이 명령을 사용할 수도 있음을 알 수 있습니다. + ;

브라우저 보기 소스의 주소 표시줄에 붙여넣기: 사이트 대신 내 도메인, 주소를 붙여넣습니다.

두 방법 모두 보편적이며 모든 브라우저에서 작동해야 합니다.

처음에는 이것이 필요한 도구가 아닌 것처럼 보일 수 있지만 사이트의 전체 HTML 코드를 보는 것은 코드에서 필요한 요소를 찾는 데 좋습니다. 이러한 요소는 링크, 태그, 메타 태그, 속성 및 다른 요소.

단축키 조합 +검색 상자를 열면 Chrome 브라우저에서 오른쪽 상단에 나타납니다.

그림 3. 사이트 코드로 검색

검색 양식을 요청하면 화면이 찾은 첫 번째 요소로 이동하고 화살표를 사용하여 요소 사이를 이동하고 필요한 요소를 선택할 수 있습니다.

그림 4. 웹사이트 HTML 코드로 검색

지침 2: Google Chrome 브라우저에서 웹사이트 HTML 및 CSS 코드를 보고 편집하는 방법

이제 가장 중요한 부분으로 브라우저에서 사이트의 HTML 및 CSS 코드를 편집하는 방법을 보여드리겠습니다. 그런 다음 변경 사항을 브라우저로 전송합니다.

다음은 브라우저에서 항상 사용할 수 있는 유용한 도구입니다. 사이트를 더 쉽게 편집할 수 있는 다른 명령을 실험해 보십시오.

우리는 "소셜 미디어 콘텐츠 마케팅: 구독자의 머리 속으로 들어가 브랜드와 사랑에 빠지게 만드는 방법"이라는 새로운 책을 출간했습니다.

사이트의 소스 코드는 브라우저가 웹 서버에서 수신하는 HTML 마크업, CSS 스타일 및 JavaScript 스크립트의 모음입니다.

우리 채널의 더 많은 비디오 - SEMANTICA로 인터넷 마케팅 배우기

이것은 지휘관이 병사들에게 내리는 일련의 명령에 비유할 수 있습니다. 청중이 보스를 보거나 듣지 못한다고 상상해보십시오. 그들의 관점에서 군대는 독립적으로 행동합니다. 우리의 경우 사령관은 브라우저이고 명령은 소스 코드이며 행진하는 병사는 최종 결과입니다.

사이트는 사용자의 요청에 따라 페이지를 보내는 웹 서버에 저장됩니다. 요청은 주소 표시줄에 URL을 입력하거나, 링크를 클릭하거나, 양식에서 제출 버튼을 클릭하는 것입니다. 소프트웨어 부분을 포함하는지 여부에 관계없이 웹 페이지가 작성된 언어는 중요하지 않습니다. 모든 서버 측 알고리즘의 최종 결과는 html 태그 및 텍스트 세트입니다.
페이지 소스 코드는 다음을 포함하는 데이터 세트입니다.

HTML 마크업;
스타일 시트 또는 파일 링크 ;
JavaScript로 작성된 프로그램 또는 코드가 있는 파일에 대한 링크.

이 세 섹션은 브라우저에서 처리합니다. 서버의 경우 요청에 대한 응답으로 보내야 하는 텍스트일 뿐입니다.

소스 코드를 연구해야 하는 이유

우리가 보는 모든 것은 특히 사이트를 최적화할 때 사이트 작업 과정에서 발생하는 특정 문제를 해결하기 위해 분석하고 적용할 수 있습니다. 소스 코드를 보면 다음을 수행할 수 있습니다.

분석을 위해 자신 또는 다른 사람 사이트의 메타 태그를 참조하십시오.
카운터, 다양한 시스템의 식별 코드, 특정 스크립트 등 사이트에서 특정 요소의 존재 여부를 확인하십시오.
크기, 색상, 글꼴과 같은 요소의 매개 변수를 찾으십시오.
페이지에서 사진 및 기타 요소의 경로를 찾습니다.
페이지에서 링크를 검사합니다.
사이트 최적화 프로세스를 방해하는 코드 문제 찾기: 별도의 파일, 스크립트, 유효하지 않은 코드로 이동되지 않은 스타일.

이것이 주요 기능이지만 실제로는 코드를 읽을 수 있으므로 페이지에 대해 더 많은 정보를 얻을 수 있습니다.

사이트의 소스 코드를 보는 방법

서버에 배치된 형태로 완전히 브라우저에서 수행할 수 없습니다. 그러나 마우스 오른쪽 버튼으로 페이지를 클릭하면 전체 마크업을 볼 수 있습니다. 여기와 아래에 Google 크롬의 예가 나와 있습니다.

"페이지 코드 보기" 옵션을 선택하고 별도의 탭에서 전체 목록을 가져옵니다.

이해하기 위해 구문 분석해야 하는 텍스트일 뿐입니다. 그러나 개발자 도구를 사용하여 대화형 코드를 얻을 수 있습니다.

웹 사이트 페이지의 소스 코드를 찾는 방법

브라우저에서 메뉴 아이콘을 클릭합니다. 대부분 오른쪽에 있으며 세 개의 점 또는 줄무늬처럼 보입니다.

추가 도구 섹션에서 "개발자 도구"를 선택합니다.

코드의 활성 상태를 보여주는 창이 열립니다. 즉, 옆에 있는 마크업을 클릭하면 요소의 스타일이 표시되고 선택한 블록이 페이지에서 강조 표시됩니다.

"소스" 탭에서 스크립트, 글꼴, 이미지와 같은 일부 파일의 내용을 볼 수 있습니다.

"보안" 탭에서 사이트 인증서 확인이 가능합니다.

"감사" 탭은 호스팅에 게시된 리소스를 확인하는 데 도움이 됩니다.

우측 패널의 위치가 불편하시다면 점 세 개를 클릭 후 원하는 항목을 선택하여 변경하실 수 있습니다.

메타 태그를 보는 방법

모든 html 문서에는 구조 태그가 포함되어 있습니다. 다음은 그 중 일부입니다.

html은 전체 문서입니다.
헤드 - 서비스 헤더 섹션.
제목 – 페이지의 제목(탭에 표시됨).
본문 - 문서의 본문입니다.
H1-H6 - 페이지 텍스트의 제목입니다.
기사 - 기사.
섹션 - 섹션.
메뉴 - 메뉴.
사업부 - 블록.
범위는 문자열입니다.
P - 단락.
테이블 - 테이블.

요소는 페이지의 섹션을 논리적으로 구분하도록 설계되었으며 필요에 따라 스타일이 지정됩니다. 페이지에서 어떻게든 볼 수 있는 텍스트를 포함합니다. 그러나 Head 태그에는 서비스 정보가 포함되어 있습니다. 이를 지정하는 데 메타 태그가 사용됩니다. 거기에 쓰여진 모든 것은 서버와 검색 엔진을 위한 것입니다.

그 내용은 다른 방법으로는 알 수 없습니다.

Link 태그에 주목합시다. 외부 포함 파일에 대한 링크를 지정하는 데 사용됩니다. 원하는 경우 내용을 보고 디스크에 저장할 수 있습니다. 이렇게 하려면 주소 위에 마우스를 놓고 마우스 오른쪽 버튼을 클릭합니다. "새 탭에서 열기"를 선택합니다.

지정된 파일이 보거나 저장할 수 있는 새 탭에서 열립니다.

스크립트를 디버깅하기 위해 페이지의 소스 코드를 보는 방법

이 경우 로컬 시스템에서 페이지를 여는 것이 가장 편리합니다. 마크업, 스타일 및 스크립트만 수정하면 되는 경우 폴더에서 직접 수정할 수 있습니다. HTML 코드는 같은 방식으로 표시됩니다. 그러나 JavaScript 코드 오류는 "콘솔" 탭에서 볼 수 있습니다. 오류에 대한 설명과 오류가 발생한 줄 번호를 표시합니다.