Google Chrome - 웹마스터를 위한 도구입니다. 복사가 금지된 경우에도 브라우저에서 페이지 코드를 빠르게 여는 방법

27.09.2019

기술 페이지 소스 코드 변경– 고급 인터넷 사용자에게 유용한 기술입니다. HTML 코드를 대체하여 열려 있는 웹 페이지를 원하는 대로 변경할 수 있습니다. 이 기사에서 우리는 당신에게 말할 것입니다 페이지 코드를 변경하는 방법 Google 크롬에서. 그러나 다른 브라우저에서는 모든 것이 유사하게 수행되므로 어려움이 없어야 합니다.

페이지의 HTML 코드는 무엇입니까?

브라우저에서 여는 모든 페이지에는 HTML 마크업 언어로 된 자체 코드가 있습니다. 이 코드는 태그와 텍스트를 나타냅니다. 태그는 브라우저에 사이트의 특정 부분을 표시하는 방법을 알려주는 고유한 레이블입니다. 텍스트는 사용자가 보는 페이지의 내용입니다. 또한 페이지 요소의 모양을 정의하는 CSS 스타일을 페이지에 연결할 수 있습니다. 에게 사이트 소스 코드 변경 HTML과 CSS를 완전히 알 필요는 없으며 곧 직접 알게 될 것입니다.

웹페이지를 변경하는 이유는 무엇입니까?

사이트의 데이터를 교체하거나, 메시지 텍스트를 변경하거나, 가짜 스크린샷을 찍을 수 있습니다. 모든 변경 사항은 본인에게만 표시되며 페이지를 새로고침하면 사라집니다. 또한 변경된 데이터는 실제가 아닙니다. 예를 들어 10달러가 없는데 100으로 바꾸면 더 이상 돈이 없게 됩니다. 이는 브라우저에 의해 페이지가 표시되는 것일 뿐입니다. 예:

후에:

예를 들어, 동일한 사이트를 사용하여 "Google Chrome에서 메인 페이지 열기"라는 기사의 이전 공지를 변경하겠습니다. 예를 들어 공지사항 제목 등 변경하려는 요소를 마우스 오른쪽 버튼으로 클릭하고 "코드 보기"를 선택합니다.

열리는 창에서 요소 탭으로 이동하여 페이지의 HTML 코드를 확인하세요. 그 안에서 우리가 관심 있는 텍스트를 찾아야 합니다. (빨간색 밑줄)

이제 이전 텍스트를 삭제하고 새 텍스트를 작성하겠습니다.

공지사항 제목이 변경되었습니다. 이제 공지사항 자체와 태그, 카테고리를 변경하겠습니다.

img 태그의 src 속성을 변경하여 다른 이미지를 삽입할 수 있습니다.

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

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

나처럼 HTML 프로그래밍의 첫 번째 단계를 시작하는 경우 페이지의 소스 코드가 무엇인지 알아내는 것이 좋습니다.

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

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

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

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

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

소스코드 편집 및 저장 방법

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

옵션 1. “수동”

페이지의 소스 코드를 연 후 컨텍스트 메뉴를 호출하고 "다른 이름으로 저장" 옵션을 선택한 다음 파일을 하드 드라이브에 저장합니다. 메모장이나 메모장에서 파일을 편집하고 변경 사항을 저장한 다음 브라우저를 통해 엽니다. 변경 결과(성공 여부)가 브라우저 창에 반영됩니다.

옵션 2. 전문가용

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

웹페이지를 열면 사이트의 유형과 초점에 따라 변하지 않는 일반적인 요소가 포함되어 있습니다. 예제 4.1에서는 기본 태그가 포함된 간단한 문서의 코드를 보여줍니다.

예제 4.1. 웹페이지 소스코드

예제 웹페이지

표제

첫 번째 단락.

두 번째 단락.

이 예제의 내용을 복사하여 c:\www\ 폴더에 example41.html로 저장합니다. 그런 다음 브라우저를 시작하고 메뉴 항목을 통해 파일을 엽니다. 파일 > 파일 열기(Ctrl+O). 문서 선택 대화 상자에서 example41.html 파일을 선택합니다. 그림 1에 표시된 웹 페이지가 브라우저에서 열립니다. 4.1.

쌀. 4.1. 예제 실행 결과

요소현재 문서의 유형(DTD(문서 유형 정의, 문서 유형 설명))을 나타내기 위한 것입니다. 이는 HTML이 여러 버전으로 존재하고 HTML과 유사하지만 구문이 다른 XHTML(EXtensible HyperText Markup Language)이 있기 때문에 브라우저가 현재 웹 페이지를 해석하는 방법을 이해하는 데 필요합니다. 브라우저가 "혼란에 빠지지 않고" 웹 페이지를 표시할 표준을 이해하려면 코드의 첫 번째 줄에 설정해야 합니다. .

여러 종류가 있습니다, 대상으로 삼는 HTML 버전에 따라 다릅니다. 테이블에 4.1. 설명과 함께 주요 유형의 문서가 제공됩니다.

테이블 4.1. 유효한 DTD

문서 유형	설명
HTML 4.01
	엄격한 HTML 구문.
	전환 HTML 구문.
	HTML 문서는 프레임을 사용합니다.
HTML5
	이 HTML 버전에는 문서 유형이 하나만 있습니다.
XHTML 1.0
	엄격한 XHTML 구문.
	전환 XHTML 구문.
	문서는 XHTML로 작성되었으며 프레임을 포함합니다.
XHTML 1.1
	XHTML 1.1 개발자들은 XHTML 1.1이 점차적으로 HTML을 대체할 것으로 예상하고 있습니다. 보시다시피, 이 정의는 구문이 동일하고 명확한 규칙을 따르기 때문에 유형으로 구분되지 않습니다.

엄격한 문서 설명과 과도기적 문서 설명의 차이점은 문서 코드 작성에 대한 접근 방식이 다르다는 것입니다. 엄격한 HTML은 HTML 사양을 엄격하게 준수해야 하며 오류를 용납하지 않습니다. 전환 HTML은 일부 코드 결함에 대해 더 완화되어 있으므로 특정 경우에는 이 유형을 사용하는 것이 좋습니다.

예를 들어 엄격한 HTML 및 XHTML에서는 태그가 필요합니다. , 전환 HTML에서는 생략되거나 지정되지 않을 수 있습니다. 동시에 우리는 브라우저가 구문과 일치하는지 여부에 관계없이 어떤 경우에도 문서를 표시한다는 것을 기억합니다. 이 검사는 유효성 검사기를 사용하여 수행되며 주로 개발자가 문서의 오류를 추적하기 위한 것입니다.</p> <p>앞으로는 주로 엄격한 방법을 사용할 것입니다.<!DOCTYPE>, 별도의 규정이없는. 이를 통해 우리는 흔히 발생하는 실수를 방지하고 구문적으로 올바른 코드를 작성하는 방법을 배울 수 있습니다.</p> <p>HTML 코드를 사용하지 않고도 HTML 코드를 찾을 수 있는 경우가 많습니다.<!DOCTYPE>, 이 경우 웹페이지는 계속 표시됩니다. 그러나 브라우저를 사용하면 동일한 문서가 브라우저에서 다르게 나타나는 경우가 발생할 수 있습니다.<!DOCTYPE>그리고 그것 없이는. 게다가, 브라우저는 그러한 문서를 자신만의 방식으로 표시할 수 있으며, 그 결과 페이지가 "무너진다". 개발자가 요구하는 것과는 완전히 다르게 표시됩니다. 이러한 상황을 피하려면 항상 다음을 추가하십시오.<!DOCTYPE>문서의 시작 부분에.</p><p>꼬리표 <html>HTML 파일의 시작 부분을 정의하며 헤더는 그 안에 저장됩니다( <head>) 및 문서 본문( <body> ).</p><p>블록이라고도 하는 문서 제목 <head>, 텍스트와 태그를 포함할 수 있지만 이 섹션의 콘텐츠는 컨테이너를 제외하고 페이지에 직접 표시되지 않습니다. <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>꼬리표 <meta>보편적이며 특히 메타 태그를 사용하여 전체 기능 클래스를 추가합니다. 이 태그는 일반적으로 호출되므로 페이지 인코딩을 변경하고 키워드, 문서 설명 등을 추가할 수 있습니다. 브라우저가 UTF-8 인코딩(유니코드 변환 형식, 유니코드 변환 형식)을 처리하고 있음을 이해하고 이 행이 추가됩니다.</p><p> <title>예제 웹페이지

꼬리표 웹페이지의 제목을 결정합니다. 이는 많은 문제를 해결하기 위해 설계된 중요한 요소 중 하나입니다. Windows 운영 체제에서는 제목 텍스트가 브라우저 창의 왼쪽 상단에 표시됩니다(그림 4.2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>쌀. 4.2. 브라우저의 헤더 보기</p> <p>꼬리표 <title>필수이며 반드시 문서 코드에 있어야 합니다.</p><p>닫는 태그를 추가해야 합니다.</head>문서 제목 블록이 완료되었음을 나타냅니다.</p><p>문서 본문 <body>웹페이지의 태그와 콘텐츠를 배치하기 위한 것입니다.</p><p> <h1>표제</h1> </p><p>HTML은 제목 다음 섹션의 상대적 중요성을 나타내는 다양한 수준의 6개 텍스트 제목을 제공합니다. 응, 태그해 <h1>가장 중요한 첫 번째 수준 제목을 나타내며 태그는 <h6>여섯 번째 수준 제목을 나타내는 역할을 하며 가장 중요하지 않습니다. 기본적으로 첫 번째 수준 제목은 가장 큰 굵은 글꼴로 표시되고 이후 수준 제목은 크기가 더 작습니다. 태그 <h1>...<h6>블록 요소를 참조하면 항상 새 줄에서 시작하고 그 뒤에 다른 요소가 다음 줄에 나타납니다. 또한 제목 앞뒤에 공백이 추가됩니다.</p><p>  </p><p>일부 텍스트는 주석을 달아 브라우저에 표시되지 않도록 숨길 수 있습니다. 이 텍스트는 사용자에게는 보이지 않지만 문서에는 계속 전송되기 때문에 소스코드를 살펴보면 숨겨진 메모를 발견할 수 있습니다.</p> <p>인터넷에 게시된 사이트의 파일과 코드에 영향을 주지 않고 사이트 자체의 모든 변경 사항을 빠르게 확인해야 합니다. 예를 들어, 블록의 색상 구성표를 변경하고, 밖으로 이동한 요소를 이동하는 등의 작업을 수행합니다.</p> <p>이를 위해 많은 웹마스터는 로컬 Denwer 또는 OpenServer 서버를 사용하여 자신의 컴퓨터에서 사이트의 전체 복사본을 실행합니다. 이 방법은 보편적이며 전문가에게 적합합니다. 다양한 스크립트 및 플러그인의 작동을 테스트하고, 디자인 변경을 실험하고, 모든 사이트 파일을 편집하고, 테스트 후에 적절한 변경 사항을 사이트로 직접 전송하는 데 사용할 수 있습니다.</p> <p>웹마스터 아트와 거리가 먼 사용자의 경우 이러한 목적으로 브라우저를 사용하는 것이 좋습니다. 저는 Chrome을 사용하므로 이 특정 브라우저에 대한 스크린샷과 함께 지침을 제공하겠습니다. 비유하자면 Opera, Yandex.Browser, Mozilla Firefox 및 기타 브라우저에서 작업할 수 있는 도구의 원리는 비슷합니다.</p> <h2>지침 1: 브라우저에서 사이트의 전체 HTML 코드를 보는 방법</h2> <p>사이트의 필수 웹페이지를 엽니다. 필요한 요소를 마우스 오른쪽 버튼으로 클릭하면 사용 가능한 명령이 포함된 브라우저 상황별 드롭다운 메뉴가 나타납니다.</p> <p>그림 1. Chrome 브라우저에서 웹페이지의 전체 HTML 코드 보기</p> <p><b>중요한:</b>예를 들어, 드롭다운 메뉴의 명령은 활성 요소(링크, 사진, 비디오)와 비활성 요소(텍스트, 배경, div)에 따라 다를 수 있습니다.</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%92%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E%D1%89%D0%B5%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E-%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0-Chrome.jpg' width="100%" loading=lazy loading=lazy></p><p>그림 2. Chrome 브라우저 드롭다운 메뉴</p> <p>따라서 필요한 명령을 찾지 못한 경우 다른 곳을 마우스 오른쪽 버튼으로 클릭하거나 브라우저의 단축키를 사용하세요.</p> <p>그림 1로 돌아가서 소스 웹 페이지의 모든 HTML 코드를 보는 데 필요한 명령을 보여줍니다. " <b>페이지 코드 보기</b>". 명령을 클릭하면 소스 웹 페이지의 전체 코드가 포함된 새 탭이 열립니다. 이는 모든 것에 큰 장점이 됩니다. 구문 강조를 통해 볼 수 있습니다.</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%A4%D1%80%D0%B0%D0%B3%D0%BC%D0%B5%D0%BD%D1%82-%D0%BA%D0%BE%D0%B4%D0%B0-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg' width="100%" loading=lazy loading=lazy></p><p>그림 3. 이 사이트의 코드 조각</p> <p>이 도구는 찾고 있는 요소를 찾고 편집하는 데 매우 유용합니다.</p> <h3>웹 페이지의 모든 HTML 코드를 보는 다른 방법</h3> <p>더 빠른 액세스를 위해 이 도구를 호출하는 다른 방법을 사용할 수 있습니다.</p> <ol><li>그림 1에서는 키보드 단축키를 통해 이 명령을 사용할 수 있음을 알 수 있습니다. <Ctrl>+<U> ;</li> <li>내 도메인 대신 브라우저의 주소 표시줄에 view-source:site를 붙여넣고 주소를 입력하세요.</li> </ol><p>두 방법 모두 보편적이며 모든 브라우저에서 작동합니다.</p> <p>처음에는 이것이 전혀 필요한 도구가 아니라고 생각할 수도 있지만 사이트의 전체 HTML 코드를 보는 것은 코드에서 필요한 요소를 찾는 데 좋습니다. 이러한 요소는 링크, 태그, 메타 태그, 속성 및 기타 요소일 수 있습니다. .</p> <p>단축키 조합 <Ctrl>+<F>검색 창을 열면 Chrome 브라우저의 오른쪽 상단에 나타납니다.</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%BF%D0%BE%D0%B8%D1%81%D0%BA-%D0%BF%D0%BE-%D0%BA%D0%BE%D0%B4%D1%83-%D1%81%D0%B0%D0%B9%D1%82%D1%83.jpg' width="100%" loading=lazy loading=lazy></p><p>그림 3. 사이트 코드로 검색</p> <p>검색 양식에 요청을 입력하면 화면이 발견된 첫 번째 요소로 이동하며 화살표를 사용하여 요소 사이를 이동하고 필요한 요소를 선택할 수 있습니다.</p> <p><img src='https://i0.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA-%D0%BF%D0%BE-HTML-%D0%BA%D0%BE%D0%B4%D1%83-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg' width="100%" loading=lazy loading=lazy></p><p>그림 4. HTML 사이트 코드로 검색</p> <h2>지침 2: Google Chrome 브라우저에서 사이트의 HTML 및 CSS 코드를 보고 편집하는 방법</h2> <p>이제 가장 중요한 부분인 브라우저에서 웹사이트의 HTML 및 CSS 코드를 편집하는 방법을 보여드리겠습니다. 그런 다음 변경 사항을 브라우저로 전송합니다.</p> <br><img src='https://i1.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9A%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0-%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B5%D1%82%D1%8C-%D0%BA%D0%BE%D0%B4.jpg' width="100%" loading=lazy loading=lazy><p>이 유용한 도구는 브라우저에서 항상 사용할 수 있습니다. 사이트를 더 쉽게 편집할 수 있는 다른 명령을 실험해 보세요.</p> 1표 <p>좋은 하루 되세요, 내 블로그 독자 여러분. 때로는 웹사이트에서 아름다운 기능을 발견하고 제작자가 어떻게 그렇게 흥미로운 효과를 얻었는지 궁금해지기 시작합니다.</p> <p>대답은 아주 간단하다는 것이 밝혀졌습니다. 그리고 약간의 기술이 있다면 이러한 기능을 많이 수집하여 짧은 시간 안에 자신만의 독특한 웹사이트를 만들 수 있습니다.</p> <p>오늘 우리는 페이지의 코드, 특정 요소를 여는 방법과 이 기술을 귀하의 이익을 위해 사용하는 방법에 대해 이야기하겠습니다.</p> <h2><span>코드에 대한 기본 지식</span></h2> <p>내 사이트는 초보자를 위한 사이트이므로 먼저 사이트와 일반적인 코드에 대해 간략하게 이야기하고 싶습니다.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/cit1-75-537x292.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>그림을 그린 다음 작은 부분으로 자르려면 브라우저가 모든 요소를 하나의 전체로 다시 조립하도록 코드를 작성합니다. 모든 것이 매우 복잡해 보입니까? 전혀 그렇지 않으며, 그것에 대해 슬퍼할 필요도 없습니다.</p> <p>이것이 바로 고품질의 웹사이트가 만들어지는 방법입니다. 원한다면 이 문제에 참여하고 연구하십시오. 원하지 않으면 아무도 당신에게 강요할 수 없습니다.</p> <p>한 가지만 말씀드리겠습니다... 당신이 쓴 이해할 수 없는 단어가 어떻게 하나의 전체로 변환되어 살아나는지 보는 것보다 더 즐거운 것은 없습니다: 링크 작동, 버튼 이동, 그림 이동, 텍스트 크롤링. 빅터 프랑켄슈타인의 심정이 어땠는지 알 것 같아요.</p> <p>비밀 언어를 이해하기 시작하고 모든 것이 처음에 보였던 것보다 실제로 훨씬 단순하다는 것을 알게 되면 자신의 두뇌의 강점과 능력을 믿을 수밖에 없습니다. 이것은 매우 멋지다.</p> <p>웹사이트는 어떻게 만들어지나요? 이상적으로는 먼저. 그는 단지 그림을 그리고 있을 뿐입니다. 예를 들어, 아래 그림과 같습니다. 지금은 단지 이미지, 사진일 뿐입니다. 링크가 작동하지 않습니다. 클릭해도 아무데도 가지 않고 검색이 수행되지 않습니다.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_1-46.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>이 그림에 따르면. 아래 스크린샷을 보세요. 이것이 우스꽝스럽고 매우 복잡한 기호 집합이라고 생각할 수도 있습니다. 사실 모든 것이 그렇게 복잡하지는 않으며 특정 알고리즘이 있습니다.</p> <p>약 150개의 태그만 있으며 각 태그는 링크, 하이픈 넣기, 굵게, 색상, 제목 등 특정 작업을 담당합니다. 당신이 욕망이 있고 시간에 신경 쓰지 않는다면 그것들을 이해하는 것은 그리 어렵지 않습니다.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-43.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>이러한 속성에 대한 지식 덕분에 거의 모든 문제를 해결할 수 있습니다. 그러나 각 개발자는 목표를 달성하기 위한 자신만의 방법을 찾습니다.</p> <p>숙련된 제작자는 결과를 달성하는 방법을 즉시 확인하는 반면, 다른 제작자는 기사나 경쟁사의 소스 코드에서 답을 생각하고 찾아야 합니다. 그들은 단순히 제3자 사이트에서 필요한 부분을 가져와 스스로 편집합니다. 이로 인해 작업 프로세스가 크게 단축됩니다.</p> <p>잠시 후에 구체적인 예를 보여 드리겠습니다.</p> <h2>코드 보기</h2> <p>그래서 먼저 다른 사람의 HTML을 알아내야 할 경우 어떻게 행동해야 하는지 보여드리겠습니다. 그런 다음 다른 모든 질문을 더 자세히 살펴보겠습니다.</p> <h3><span>가장 좋은 방법</span></h3> <p>먼저 설명드릴 방법은 초보자에게는 다소 복잡하지만 소개 차원에서 읽어보시기 바랍니다. 페이지를 열고 마우스 오른쪽 버튼을 클릭하세요. "다른 이름으로 저장..."을 선택하세요.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-1-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>전체 웹페이지를 저장합니다. 스크린샷에서 볼 수 있듯이 저는 이미 모든 것을 미리 다운로드해 두었습니다. 여기에는 두 개의 폴더가 있습니다.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-2-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>필요한 모든 것이 여기에 있습니다. 모든 요소. 이것을 이해하면 필요한 모든 것을 빨리 얻을 수 있습니다. 그러나 그러한 작업은 점점 불가능해지고 있습니다. 다운로드가 없습니다. 페이지 복사가 금지된 경우 어떻게 해야 합니까?</p> <h3><span>구글 크롬입니다</span></h3> <p>이미 눈치채셨겠지만 저는 Chrome을 가장 자주 사용하며 이 브라우저에서 다른 사람의 코드를 배우는 것은 배 껍질을 벗기는 것만큼 쉽습니다. 원칙적으로 다른 것과 마찬가지로. 계획은 유사할 뿐만 아니라 동일합니다. 코드를 알고 싶은 페이지를 열고 아무 곳이나 마우스 오른쪽 버튼으로 클릭하세요. 나타나는 창에서 '페이지 코드 보기'를 클릭하세요.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_3-40.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>새 창에 코드 시트가 열리는데, 이는 초보자가 이해하기 매우 어렵습니다. 그러나 미리 놀라지 마십시오.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_4-36.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>한 요소의 코드만 알고 싶다면 해당 요소 위에 마우스를 올려 놓고 마우스 오른쪽 버튼을 클릭하세요. 다른 Chrome 기능인 '요소 코드 보기'를 선택하세요.</p> <p>예를 들어, 그림이나 프로그래밍 언어를 사용하여 로고가 어떻게 만들어졌는지 궁금할 수 있습니다. 결국 CSS를 사용하여 사각형을 그릴 수 있습니다. 많은 전문가들은 코드에 가능한 한 많은 정보를 기록하라고 조언합니다. 인기 있는 사이트에서는 어떻게 작동하나요?</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_5-33.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>이제 필요한 정보가 나타났습니다. 위쪽이 html, 아래쪽이 css입니다. 이것은 두 가지 언어입니다. 첫 번째는 텍스트 구성 요소를 담당하고 두 번째는 디자인을 담당합니다. CSS가 없다면 매번 색상과 글꼴 크기를 지정해야 합니다. 각 페이지마다 매우 깁니다. 그러나 HTML이 없다면 텍스트도 없을 것입니다. 대략적으로 설명했는데 대체적으로는 그렇습니다.</p> <p>그런데 여기서 어떻게 작동하는지 궁금하시다면 아래 사진 링크를 보시면 됩니다. 당신의 대답은 다음과 같습니다.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_6-33.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>모질라 파이어 폭스</h3> <p>매스틱에서 작업하고 싶다면 모든 것이 똑같을 것입니다. 페이지를 열고 마우스 오른쪽 버튼을 클릭하세요. 전체 코드를 보고 싶다면 “페이지 소스코드”를 선택하세요.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_7-32.jpg' align="center" width="100%" loading=lazy loading=lazy></p><p>요소 위로 마우스를 가져가면 해당 코드를 열 수 있습니다.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_8-29.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>여기서 데이터는 화면 하단에 표시되지만 그 밖의 모든 것은 완전히 동일합니다.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_9-29.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Yandex 브라우저</h3> <p>Yandex 브라우저에서는 모든 것이 이전 두 옵션과 정확히 동일합니다. 페이지를 열고 마우스 오른쪽 버튼을 클릭하고 페이지 코드를 확인하세요.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_10-27.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>해당 코드를 정확히 찾으려면 요소 위에 커서를 놓습니다.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_11-27.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>여기에는 모든 것이 Chrome과 동일하게 표시됩니다.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_12-25.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>오페라</h3> <p>그리고 마지막으로 오페라.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_13-24.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>그런데 마우스를 사용할 필요가 없다는 사실을 눈치챘을 수도 있습니다. 코드를 여는 빠른 키보드 단축키가 있으며 모든 브라우저에서 동일합니다. <b>CTRL+U</b>.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_14-24.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>요소의 경우: Ctrl+Shift+C.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_15-22.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>결과는 다음과 같습니다.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_16-23.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h2><span>초보자에게는 흥미로울 것입니다.</span></h2> <p>이제 모든 것이 어떻게 작동하는지 살펴보세요. 당신은 사이트를 찾고 일부 요소를 정말 좋아합니다. 예를 들어, 이것입니다. 당신은 이미 요소 코드를 여는 방법을 알고 있습니다.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_17-20.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>이제 복사하세요.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_18-19.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>저는 를 사용하여 이 코드를 새 HTML 파일의 body 태그(영문 body)에 붙여넣습니다.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_19-18.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>이제 모든 것이 브라우저에서 어떻게 보이는지 살펴보겠습니다.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_20-16.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>준비가 된. 텍스트를 가장자리에 정렬하고 녹색 색상을 얻으려면 CSS를 이 문서에 연결하고 이 문서를 복사한 사이트에서 다른 코드를 복사해야 합니다.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_21-16.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>이제 이런 일은 하지 않겠습니다. 이를 위해서는 나와 당신 모두에게 더 많은 시간이 필요합니다. 나는 향후 출판물에서 모든 세부 사항을 설명할 것이라고 생각합니다. 뉴스레터를 구독하고 기사가 언제 나오는지 가장 먼저 알아보세요.</p> <p>참을 수 없지만 지금 html과 css에 대해 더 많이 배우고 싶다면 전통적으로 무료 교육 과정을 추천해 드릴 수 있습니다.</p> <p>다음은 HTML을 마스터할 수 있는 33개의 강의입니다. <i><b><span>"HTML에 대한 무료 강좌"</span> </b> </i>.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_22-16-537x476.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>그리고 여기에 CSS에 대한 완전한 정보가 있습니다 - <i><b><span>“CSS 무료 강좌(45개의 비디오 강의!)”</span> </b> </i>.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_23-15.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>이제 조금 더 알게 되었습니다. 귀하의 노력이 성공하기를 바랍니다. 또 보자!</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </article> </div> </div> <div id="secondary"> <aside id="search-2" class="widget widget_search clearfix"> <form action="/" class="search-form searchform clearfix" method="get"> <div class="search-wrap"> <input type="text" placeholder="찾다" class="s field" name="s"> <button class="search-icon" type="submit"></button> </div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>최근 항목</span></h3> <ul> <li> <a href="https://olegshein.ru/ko/system-and-update/kak-otklyuchit-nochnoi-draiv-na-tele-2-nochnoi-bezlimit-tele2--/">야간 무제한 Tele2 - 의미와 연결 방법은 무엇입니까?</a> </li> <li> <a href="https://olegshein.ru/ko/applied/optimizaciya-operativnoi-pamyati-dlya-windows-xp-programmy-dlya-ochistki/">RAM 청소 프로그램</a> </li> <li> <a href="https://olegshein.ru/ko/contacts-and-messages/prilozhenie-chtob-govorit-po-internetu-luchshie-prilozheniya/">데이트와 커뮤니케이션을 위한 최고의 앱</a> </li> <li> <a href="https://olegshein.ru/ko/applied/krymskii-rouming-ot-megafona-stoimost-zvonkov-sms-i/">Megafon의 크림 로밍 : 통화, SMS 및 인터넷 비용</a> </li> <li> <a href="https://olegshein.ru/ko/instructions/pri-skanirovanii-prosmotr-mac-os-kontrast-izobrazheniya-kak/">OS X에서 문서와 사진을 스캔하는 방법</a> </li> <li> <a href="https://olegshein.ru/ko/security/blade-soul-zapuskaetsya-oshibka-1073-oshibki-blade-and-soul-i-sposoby-ih/">블레이드 앤 소울 오류 및 해결 방법</a> </li> <li> <a href="https://olegshein.ru/ko/security/kak-nastroit-monitor-dlya-pravilnoi-cvetoperedachi-s-pomoshchyu-po/">지침: 노트북 화면 보정 - 연색성 조정 모니터의 연색성 불량</a> </li> <li> <a href="https://olegshein.ru/ko/security/pochemu-gnezdo-usb-ne-rabotaet-kak-otklyuchit-ili-vklyuchit-usb-porty-v/">Windows에서 USB 포트를 비활성화하거나 활성화하는 방법</a> </li> </ul> </aside> <aside id="text-5" class="widget widget_text clearfix"> <div class="textwidget"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script> <div id="vk_groups"></div> </div> </aside> <aside id="text-4" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> <aside id="text-3" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-sectoin"> <div class="copyright">2024년 <a href="https://olegshein.ru/ko/" title="olegshein.ru"><span>olegshein.ru</span></a>. Oleg Shein의 컴퓨터 클럽. <br></div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type="text/javascript"> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "colormag_right_sidebar", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-3'] }; </script> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common" data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln." data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true" class="uptolike-buttons"></div> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var pwebcontact_l10n = pwebcontact_l10n || {}; pwebcontact_l10n.form = { "INIT": "Initializing form...", "SENDING": "Sending...", "SEND_ERR": "Wait a few seconds before sending next message", "REQUEST_ERR": "Request error: ", "COOKIES_ERR": "Enable cookies and refresh page to use this form" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr"> <div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free"> <span class="pweb-text">질문이 있으신가요?</span> <span class="pweb-icon"></span> </div> <div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr"> <div class="pwebcontact-container-outset"> <div id="pwebcontact1_container" class="pwebcontact-container"> <div class="pwebcontact-container-inset"> <form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8"> <div class="pweb-fields"> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-name pweb-field-name"> <div class="pweb-label"> <label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name">이름</label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-email pweb-field-email"> <div class="pweb-label"> <label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email">이메일 <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-textarea pweb-field-message"> <div class="pweb-label"> <label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message">메시지 <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none"></textarea> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-buttons"> <div class="pweb-field"> <button id="pwebcontact1_send" type="submit" class="btn pweb-button-send" data-role="none">보내다</button> </div> </div> </div> </div> </div> <div class="pweb-msg pweb-msg-after"> <div id="pwebcontact1_msg" class="pweb-progress"> <script type="text/javascript"> document.getElementById("pwebcontact1_msg").innerHTML = "Initializing form..." </script> </div> </div> <input type="hidden" name="5eb40beb9e" value="1" id="pwebcontact1_token"> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(function() { jQuery(".tooltips img").closest(".tooltips").css("display", "inline-block"); new jQuery.Zebra_Tooltips(jQuery('.tooltips').not('.custom_m_bubble'), { 'background_color': '#000000', 'color': '#ffffff', 'max_width': 250, 'opacity': 0.95, 'position': 'center' }); }); </script> <script type="text/javascript"> jQuery(document).on('ready post-load', function() { jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox'); }); jQuery(document).on('ready post-load', easy_fancybox_handler); jQuery(document).on('ready', easy_fancybox_auto); </script> <div id="mistape_dialog" data-mode="comment" data-dry-run="0"> <div class="dialog__overlay"></div> <div class="dialog__content"> <div id="mistape_confirm_dialog" class="mistape_dialog_screen"> <div class="dialog-wrap"> <div class="dialog-wrap-top"> <h2>오타 신고</h2> <div class="mistape_dialog_block"> <h3>편집자에게 전송될 텍스트:</h3> <div id="mistape_reported_text"></div> </div> </div> <div class="dialog-wrap-bottom"> <div class="mistape_dialog_block comment"> <h3><label for="mistape_comment">귀하의 의견(선택사항):</label></h3> <textarea id="mistape_comment" cols="60" rows="3" maxlength="1000"></textarea> </div> <div class="pos-relative"> </div> </div> </div> <div class="mistape_dialog_block"> <a class="mistape_action" data-action="send" data-id="389" role="button">보내다</a> <a class="mistape_action" data-dialog-close role="button" style="display:none">취소</a> </div> <div class="mistape-letter-front letter-part"> <div class="front-left"></div> <div class="front-right"></div> <div class="front-bottom"></div> </div> <div class="mistape-letter-back letter-part"> <div class="mistape-letter-back-top"></div> </div> <div class="mistape-letter-top letter-part"></div> </div> </div> </div> <script type="text/javascript">  </script><br> <br> </body> </html>