Chrome에서 HTML로 페이지를 엽니다. 페이지 소스 코드 및 요소 코드를 보는 방법. 소스코드 편집 및 저장 방법

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

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

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

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

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

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

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

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

인터넷상의 수많은 사이트를 살펴보면 우리가 매우 좋아하는 사이트를 찾을 수 있습니다. 즉시 많은 질문이 발생합니다. 사이트가 직접 작성한 코드인가요, 아니면 일종의 CMS인가요? 그의 것은 무엇입니까? CSS 스타일? 메타 태그는 무엇입니까? 등등.

사이트의 페이지 코드에 대한 정보를 추출하는 데 사용할 수 있는 도구가 많이 있습니다. 하지만 우리 손에는 항상 오른쪽 마우스 버튼이 있습니다. 내 사이트의 예를 사용하여 사용하겠습니다.

페이지 코드를 보는 방법은 무엇입니까?

보다 원천사이트 페이지에서 웹 페이지의 모든 영역(이미지 및 링크 제외) 위로 마우스 커서를 이동해야 합니다. 그런 다음 마우스 오른쪽 버튼을 클릭하십시오. 여러 옵션이 있는 창이 열립니다( 다른 브라우저약간 다를 수 있습니다.) 브라우저에서 구글 크롬, 예를 들어 다음 명령은 다음과 같습니다.

• 뒤쪽에;
• 앞으로;
• 재장전;
• 다른 이름으로 저장;
• 밀봉하다;
• 러시아어로 번역;
• 페이지 코드 보기;
• 코드 보기

우리는 클릭해야합니다 페이지 코드 보기, 사이트 페이지의 HTML 코드가 우리 앞에 열립니다.

페이지 코드 보기: 무엇을 찾아야 할까요?

따라서 Html 페이지 코드는 번호가 매겨진 줄 목록으로, 각 줄에는 이 사이트가 어떻게 만들어졌는지에 대한 정보가 담겨 있습니다. 이 엄청난 수의 기호와 기호를 이해하는 방법을 빨리 배우려면 특수 문자, 코드의 여러 부분을 구별해야 합니다.

예를 들어, head 태그 내부에 있는 코드 줄에는 다음에 대한 정보가 포함되어 있습니다. 검색 엔진그리고 웹마스터. 사이트에는 표시되지 않습니다. 여기에서 방법을 볼 수 있습니다. 키워드이 페이지는 제목과 설명이 적혀 있으므로 승격됩니다. 사이트에서 사용되는 Google 글꼴 모음에 대해 알아보는 링크를 클릭하면 여기에서 링크를 찾을 수도 있습니다.

사이트가 만들어진 경우 CMS 워드프레스또는 Joomla의 경우 여기에도 표시됩니다. 예를 들어 이 영역에는 WordPress 테마 또는 Joomla 사이트 템플릿에 대한 정보가 표시됩니다. 파란색으로 강조표시된 링크의 내용을 읽어보면 알 수 있습니다. 하나의 링크는 웹사이트 템플릿을 보여줍니다.

예를 들어:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

페이지의 CSS 글꼴 스타일을 살펴보겠습니다. 안에 이 경우글꼴이 사용됩니다. 이는 여기에서 볼 수 있습니다 - 글꼴 모음: 'Source Sans Pro'.

이 사이트는 Yoast SEO 플러그인을 사용하여 최적화되었습니다. 이는 주석 처리된 코드 섹션에서 확인할 수 있습니다.

이 사이트는 Yoast SEO 플러그인 v3.4.2에 최적화되어 있습니다 — https://yoast.com/wordpress/plugins/seo/

body 태그 내부의 모든 정보는 브라우저에 의해 모니터 화면에 표시됩니다. 여기서는 페이지의 HTML 코드를 볼 수 있으며 맨 아래에는 Yandex Metrics 스크립트 코드가 있습니다. 이는 다음 텍스트와 함께 주석 처리된 태그로 래핑됩니다.

/Yandex.Metrika 카운터

합산

코드를 다소 피상적으로 분석한 후 홈페이지사이트에서 이 페이지를 만든 도구에 대해 결론을 내릴 수 있습니다. 우리는 그것에 대해 보았습니다:

• CMS 워드프레스;
• Google 글꼴 소스 Sans Pro;
• WordPress 테마 - 시드니;
• 요스트 플러그인
• 카운터 Yandex 측정항목.

이제 분석의 원리 HTML 코드사이트 페이지는 꽤 이해하기 쉽습니다. 조사 중인 페이지를 브라우저에 열어 둘 필요는 없습니다. ctrl+a, ctrl+c, ctrl+v 키 조합을 사용하여 페이지 코드를 컴퓨터에 저장할 수 있습니다. 아무 곳에나 붙여넣으세요. 텍스트 에디터(바람직하게는 Notepad++) html 확장자로 저장합니다. 따라서 언제든지 더 깊이 연구하고 더 유용한 정보를 찾을 수 있습니다.

오랫동안 "페이지 소스 코드 표시" 옵션은 나에게 쓸모없고 흥미롭지 않았습니다. 지금까지 Codecademy에서 HTML을 배우고 나만의 사이트를 구축하는 것은 나의 새로운 취미로 성장하지 못했습니다. 여기에서 질문이 생겼습니다. 실제 사례를 찾고 "돼지 저금통"에 대한 흥미로운 솔루션을 빌릴 수 있는 곳은 어디입니까? 모든 천재들이 그렇듯이 대답은 놀라울 정도로 간단했습니다. Google Chrome에서 페이지의 소스 코드를 확인하세요! 나는 겸손한 결과를 여러분과 공유합니다.

페이지 소스 코드 란 무엇입니까?

나처럼 HTML 프로그래밍의 첫 번째 단계를 시작하는 경우 페이지의 소스 코드가 무엇인지 아는 것이 불필요한 것은 아닙니다.

페이지의 HTML 코드라고도 알려진 소스 코드는 HTML(Hyper Text Markup Language)의 텍스트입니다. 여기에는 실제 페이지 콘텐츠(텍스트, 표)와 태그가 포함됩니다. 후자는 콘텐츠를 표시하는 방법, 사용할 형식의 종류, 하이퍼링크나 미디어 파일을 삽입할 위치 등 브라우저에 대한 지침 역할을 합니다. 음, 초보 프로그래머인 우리에게 소스 코드는 최고의 훈련장입니다. 흥미로운 사이트를 찾고 성공적인 조각을 살펴보고 저장하고 사용합니다. 어떻게?

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

마음에 드는 페이지를 찾아보세요. 예를 들어 저는 사이트 메뉴 디자인에 관심이 있었습니다. Google Chrome 브라우저에서 소스 코드를 여는 방법에는 세 가지가 있습니다.

1. 아이콘을 클릭하세요 메뉴브라우저 오른쪽 상단에서 "추가 도구"를 선택하세요. 그중에서도 "소스 코드 보기" 옵션이 있습니다. 솔직히 저는 이 방법을 거의 사용하지 않습니다. 불필요한 움직임이 많습니다. 더욱 쉽게 만들 수 있습니다.
2. 키 조합을 누르세요 Ctrl+U- 소스 코드가 포함된 새 창을 엽니다.
3. 상황에 맞는 메뉴 팬의 경우: 페이지를 마우스 오른쪽 버튼으로 클릭하고 "페이지 코드 보기" 옵션을 선택하세요.

우리는 브라우저에서 페이지의 HTML 코드를 보는 작업에 대처했습니다. 우리는 가장 흥미로운 단계로 넘어갑니다.

소스코드 편집 및 저장 방법

웹사이트를 만드는 방법을 배우려면 다른 사람의 HTML 코드를 읽는 것만으로는 충분하지 않습니다. 가지고 놀고, 실험하고, 변경하고, 결과를 확인해야 합니다. 몇 가지 성공적인 샘플을 컴파일하여 시작할 수도 있습니다. 소스코드를 편집하고 저장하는 방법은 무엇입니까?

옵션 1. "수동"

페이지의 소스 코드를 연 후 다음을 호출합니다. 상황에 맞는 메뉴"다른 이름으로 저장" 옵션을 선택하고 파일을 다음 위치에 저장하세요. HDD. 메모장이나 메모장에서 파일을 편집하고 변경 사항을 저장하고 브라우저를 통해 엽니다. 변경 결과(성공적이거나 좋지 않음)가 브라우저 창에 반영됩니다.

옵션 2. 전문가용

매일 소스코드를 가지고 "플레이"를 하다 보면 "저장-열기-변경-저장-확인"이라는 과정이 지치게 됩니다. 나 자신을 위해 Google Chrome용 플러그인인 Firebug Lite를 설치하는 형태로 솔루션을 찾았습니다. 브라우저 창을 떠나지 않고도 소스 코드를 편집하고 저장할 수 있습니다.

좋은 하루 되세요, 내 블로그 독자 여러분. 때로는 사이트에서 아름다운 기능을 발견하고 제작자가 어떻게 그렇게 흥미로운 효과를 얻었는지에 대한 질문이 시작됩니다.

대답은 꽤 쉽다는 것이 밝혀졌습니다. 그리고 약간의 기술이 있다면 그러한 칩을 많이 모아 짧은 시간 안에 자신만의 독특한 웹사이트를 만들 수 있습니다.

오늘 우리는 페이지의 코드, 특정 요소를 여는 방법과 이 기술을 유리하게 사용하는 방법에 대해 이야기하겠습니다.

코드에 대한 기본 지식

내 사이트는 초보자를 위한 사이트이므로 먼저 사이트와 코드 전반에 대해 간략하게 이야기하고 싶습니다.

그림을 그린 다음 작은 조각으로 자르고 코드를 작성하면 브라우저가 모든 요소를 ​​다시 하나의 전체로 수집합니다. 모든 것이 매우 복잡해 보이죠? 전혀 그렇지 않으며 걱정할 가치도 없습니다.

이것이 고품질의 웹사이트가 구축되는 방식입니다. 원한다면-이 사업에 참여하고 공부하십시오. 욕망이 없습니다. 아무도 당신을 강요 할 수 없습니다.

한 가지만 말할 수 있습니다... 당신이 쓴 이해할 수 없는 단어가 어떻게 하나의 전체로 변환되어 생명을 얻게 되는지를 보는 것보다 더 즐거운 것은 없습니다. 링크가 작동하고, 버튼이 움직이고, 그림이 움직이고, 텍스트가 크롤링됩니다. 빅터 프랑켄슈타인의 심정이 어땠는지 알 것 같아요.

비밀 언어를 이해하기 시작하고 모든 것이 실제로 처음에 보였던 것보다 훨씬 단순하다는 것을 알게 되면 자신의 두뇌 능력과 능력을 믿을 수밖에 없습니다. 이것은 매우 멋지다.

웹사이트는 어떻게 만들어지나요? 이상적으로는 먼저. 그는 단지 그림을 그리고 있을 뿐입니다. 예를 들어, 아래 그림과 같습니다. 지금까지 이것은 단지 이미지, 사진이었습니다. 링크가 작동하지 않습니다. 클릭해도 아무데도 가지 않고 검색이 수행되지 않습니다.

이 그림에 따르면. 아래 스크린샷을 보세요. 이것이 우스꽝스럽고 매우 복잡한 캐릭터 세트라고 생각할 수도 있습니다. 사실 모든 것이 그렇게 어렵지는 않습니다. 특정 알고리즘이 있습니다.

약 150개의 태그만 있으며 각 태그는 다음을 담당합니다. 특정 행동: 링크, 줄 바꿈, 굵게, 색상, 제목 등. 당신이 욕망이 있고 시간을 신경 쓰지 않는다면 그것들을 이해하는 것은 그리 어렵지 않습니다.

이러한 속성에 대한 지식 덕분에 거의 모든 문제를 해결할 수 있습니다. 목표를 달성하는 방법은 다음과 같습니다. 각 개발자는 자신의 목표를 찾습니다.

숙련된 제작자는 결과를 달성하는 방법을 즉시 확인하는 반면, 다른 제작자는 기사나 경쟁사의 소스 코드에서 답을 생각하고 찾아야 합니다. 그들은 단순히 제3자 사이트에서 필요한 부분을 가져와 스스로 편집합니다. 이로 인해 작업 프로세스가 크게 단축됩니다.

잠시 후에 구체적인 예를 보여 드리겠습니다.

코드 보기

그래서 먼저 다른 사람의 HTML을 배워야 할 경우 진행하는 방법을 보여드리겠습니다. 그런 다음 다른 모든 문제를 자세히 살펴보겠습니다.

가장 좋은 방법

처음 설명할 방법은 초보자에게는 다소 복잡하지만 소개로서 계속 읽어보세요. 페이지를 열고 마우스 오른쪽 버튼을 클릭하세요. "다른 이름으로 저장..."을 선택하세요.

전체 웹페이지를 저장합니다. 스크린샷에서 볼 수 있듯이 저는 이미 모든 것을 미리 다운로드했습니다. 여기에는 두 개의 폴더가 있습니다.

필요한 모든 것이 여기에 있습니다. 모든 요소. 이것을 이해하면 필요한 모든 것을 빨리 얻을 수 있습니다. 그러나 그러한 작업은 점점 불가능해지고 있습니다. 다운로드가 수행되지 않습니다. 페이지 복사가 금지된 경우 어떻게 해야 하나요?

구글크롬이에요

아시다시피 저는 Chrome을 가장 자주 사용하며 이 브라우저에서는 다른 사람의 코드를 쉽게 인식할 수 있습니다. 원칙적으로나 다른 것과 마찬가지로. 계획은 유사하지 않지만 동일합니다. 코드를 알고 싶은 페이지를 열고 마우스 오른쪽 버튼으로 아무 곳이나 클릭합니다. 나타나는 창에서 "페이지 코드 보기"를 클릭하세요.

새 창에 코드 시트가 열리는데, 이는 초보자가 이해하기 매우 어렵습니다. 그러나 미리 두려워하지 마십시오.

한 요소의 코드만 알고 싶다면 해당 요소 위에 마우스를 올려 놓고 마우스 오른쪽 버튼을 클릭하세요. 다른 크롬 기능인 "요소 코드 보기"를 선택합니다.

예를 들어, 그림이나 프로그래밍 언어를 사용하여 로고가 어떻게 만들어졌는지 궁금할 수 있습니다. 결국, 다음을 사용하여 사각형을 그릴 수 있습니다. CSS 도움말. 많은 전문가들은 코드에 최대한 많은 정보를 작성하라고 조언합니다. 인기 있는 사이트는 어떻게 작동하나요?

여기 등장했어요 필요한 정보. 상단 HTML, 하단 CSS. 이것은 두 가지 언어입니다. 첫 번째는 텍스트 구성 요소를 담당하고 두 번째는 디자인을 담당합니다. CSS가 없다면 매번 색상과 글꼴 크기를 지정해야 합니다. 각 페이지마다 내용이 매우 깁니다. 그러나 HTML이 없다면 텍스트도 없을 것입니다. 대략적으로 설명되었지만 일반적으로 모든 것이 그렇습니다.

그런데 여기서 어떻게 작동하는지 궁금하신 분들은 아래 사진 링크를 보시면 됩니다. 당신의 대답은 다음과 같습니다.

모질라 파이어 폭스

총구에서 작업하고 싶다면 모든 것이 똑같을 것입니다. 페이지를 열고 마우스 오른쪽 버튼을 클릭하세요. 전체 코드를 보고 싶다면 "페이지 소스코드"를 선택하세요.

요소 위로 마우스를 가져가면 해당 코드를 열 수 있습니다.

여기서 데이터는 화면 하단에 표시되지만 다른 모든 것은 정확히 동일합니다.

Yandex 브라우저

Yandex 브라우저에서는 모든 것이 이전 두 옵션과 정확히 동일합니다. 페이지를 열고 마우스 오른쪽 버튼을 클릭하고 페이지 코드를 확인하세요.

해당 코드를 정확히 찾으려면 요소 위로 마우스를 가져갑니다.

여기에는 크롬과 같은 방식으로 모든 것이 표시됩니다.

오페라

그리고 마지막으로 오페라.

그런데 마우스를 사용할 필요가 없다는 것을 눈치챘을 수도 있습니다. 코드를 열려면 빠른 키보드 단축키가 있으며 모든 브라우저에서 동일합니다. CTRL+U.

요소의 경우: Ctrl+Shift+C.

결과는 다음과 같습니다.

초보자에게는 흥미로울 것입니다.

이제 모든 것이 어떻게 작동하는지 살펴보세요. 당신은 사이트를 찾았고 어떤 요소가 정말 마음에 들었습니다. 예를 들어, 이것입니다. 당신은 이미 요소 코드를 여는 방법을 알고 있습니다.

이제 복사하세요.

저는 을 사용하고 이 코드를 새 코드에 붙여넣습니다. HTML 파일, body 태그(영문에서는 body)에 있습니다.

이제 브라우저에서 모든 것이 어떻게 보이는지 살펴보겠습니다.

준비가 된. 텍스트를 가장자리에 정렬하고 녹색 색상을 얻으려면 CSS를 이 문서에 연결하고 이 문서를 훔친 사이트에서 코드를 하나 더 복사해야 합니다.

이제 나는 그것을하지 않을 것입니다. 시간이 더 걸립니다. 저와 여러분 모두요. 나는 향후 출판물에서 모든 세부 사항을 설명할 것이라고 생각합니다. 뉴스레터를 구독하고 기사가 나올 때 가장 먼저 알아보세요.

참을 수 없지만 지금 당장 html과 css에 대해 더 많이 배우고 싶다면 전통적으로 무료 교육 과정을 추천해 드릴 수 있습니다.

다음은 HTML을 마스터할 수 있는 33개의 강의입니다. « 무료 강좌 HTML로" .

그리고 여기 전체 정보 CSS에 대해 - "무료 CSS 강좌(45개의 비디오 레슨!)" .

이제 조금 더 알게 되었습니다. 귀하의 노력이 성공하기를 바랍니다. 곧 봐요!

브라우저 개발자는 동일한 브라우저에서 열리는 사이트를 만드는 사람들, 즉 웹마스터의 편의를 배려했습니다. 표준 기능에 개발자 도구를 추가했는데, 이를 통해 쉽게 열고 브라우저에서 사이트 페이지의 소스 코드 보기: HTML, CSS, JavaScript(JS), 사이트 구조에 대한 다양하고 유용한 데이터 획득, 기술 분석 수행. 일반적으로 유용한 것들을 많이 볼 수 있습니다.

물론 이러한 도구는 업무용 사이트 제작자뿐만 아니라 일반 사용자, 소스 코드를 통해 다양한 페이로드를 볼 수 있습니다.

이 글에서는 브라우저에서 웹사이트 페이지의 소스 코드를 보는 방법(HTML, CSS, 자바스크립트 코드대지).

브라우저에서 페이지 소스 코드를 여는 방법

브라우저에서 웹페이지의 소스 코드를 여는 방법에는 두 가지가 있습니다.

1. 단축키 사용
2. 상황에 맞는 메뉴에서 엽니다.

Ctrl+U- 별도의 새 창에서 사이트 전체 페이지의 소스 코드를 볼 수 있는 단축키 조합입니다. 모든 브라우저의 표준: Google Chrome, Opera, Mozilla Firefox, Yandex 브라우저, IE.

다음과 같이 개발자 도구를 입력할 수도 있습니다.

페이지에서 원하는 코드, 단어 또는 텍스트를 빠르게 찾으려면 모든 브라우저에서 표준 검색 단축키 조합인 Ctrl + G를 사용할 수 있습니다.

비디오 교육:

요소 코드 보기 | 요소 탐색 | 요소를 점검하다

갑자기 전체 소스 코드를 보지 않고 페이지의 일부 섹션만 표시해야 하는 경우 이전 도구는 작동하지 않습니다. 이를 위해 개발자 도구에는 아래에서 설명할 또 다른 기능이 있습니다.

페이지에서 요소의 코드를 보는 방법:

또한 키보드 단축키를 사용하여 요소 검사에 빠르게 액세스할 수 있습니다.

단축키(버튼):

구글 크롬: Ctrl+Shift+I 및 Ctrl+Shift+C

오페라: Ctrl+Shift+I 및 Ctrl+Shift+C

모질라 파이어폭스: Ctrl+Shift+I 및 Ctrl+Shift+C

Yandex 브라우저: Ctrl+Shift+I 및 Ctrl+Shift+C

작업이 완료되면 소스 코드가 동일한 브라우저 창에서 열립니다. 웹페이지:

모든 HTML 코드는 왼쪽 큰 열에 있습니다. CSS 스타일은 오른쪽에 있습니다.

이점 이 방법물론 사용자는 소스 코드를 변경하고 스타일을 편집할 수 있습니다. 즉, 호스팅 서버에 있는 파일을 즉시 변경하지 않고도 사이트의 스타일을 편집하고 특정 스타일이 어떻게 표시되는지 확인할 수 있습니다. 변경하거나 추가하려면 프로그래밍 코드, 원하는 조각이나 섹션을 두 번 클릭해야 합니다. 물론 호스팅 서버에서는 브라우저의 코드 수정이 이루어지지 않습니다. 따라서 앞으로는 어떤 경우에도 이 코드를 복사하여 파일에 작성해야 합니다.

이 비디오 튜토리얼에서는 개발자 도구를 사용하여 작업하는 방법을 자세히 설명하고 보여줍니다.

따라서 이 사이트의 파일을 컴퓨터에 다운로드할 필요 없이 온라인, 브라우저에서 바로 사이트 페이지의 소스 코드를 보고, HTML 및 CSS 코드에 대한 기본 정보를 얻고, 변경 및 복사할 수 있습니다.

그런데, 페이지 코드를 변경하고 저장되기를 기대하는 경험이 없는 인터넷 사용자들은 실망할 것입니다. 결국 페이지를 새로 고치면 페이지의 모든 변경 사항이 손실됩니다. 이것은 사이트를 해킹하기에 충분하지 않습니다 🙂

Android 휴대폰에서 소스 코드를 보는 방법

또한 개발자 도구는 데스크톱 버전의 브라우저, 즉 컴퓨터와 노트북에서만 사용할 수 있다는 점에 주목하고 싶습니다. 휴대폰과 태블릿(Android, IOS)에서도 소스 코드를 볼 수 있습니다.

이렇게 하려면 검사한 페이지의 URL에 view-source 접두어를 추가하세요.

예를 들어:

보기 소스:https://website/turbo-mode-opera/