브라우저에서 열리는 파일은 이미 페이지입니다. 웹 사이트로 만드는 것은 주소를 제공하고 다른 사람이 웹 사이트를 열 때만 문제가 발생하는 네 가지 문제를 해결하는 것을 의미합니다.
이 가이드에서는 네 가지 도메인과 도메인의 용도를 다룹니다.
하나: 경로
로컬로 작업하는 것과 출판 작업 사이의 가장 일반적인 차이점은 다음과 같습니다.
<link rel="stylesheet" href="/style.css"> <!-- fails under a subfolder -->
<link rel="stylesheet" href="style.css"> <!-- works -->
선행 슬래시는 도메인의 상단을 의미합니다. 로컬에서는 맨 위가 폴더이므로 작동합니다. 하위 폴더 아래에 게시되면 파일이 없는 곳을 가리킵니다.
사건도 중요합니다. 대부분의 데스크탑 컴퓨터는 Logo.png와 logo.png를 동일한 파일로 취급합니다. 서버는 일반적으로 그렇지 않습니다. 게시하기 전에 모든 이름을 소문자로 바꾸면 문제가 사라집니다.
두 번째: 머리
귀하가 아닌 모든 사람에 대한 페이지의 작동 방식을 결정하는 세 줄입니다.
<title>What this page is</title>
<meta name="description" content="One sentence for a search result.">
<meta name="viewport" content="width=device-width, initial-scale=1">
제목은 브라우저 탭, 검색 결과 및 공유 링크에 표시됩니다. 그것이 없으면 페이지 이름은 파일 이름을 따서 지정됩니다.
설명은 검색 결과의 제목 아래 줄이며, 링크를 붙여넣을 때 메시징 앱에 표시되는 내용입니다.
뷰포트 태그는 데스크톱인 척하고 축소하는 대신 전화기가 전화기 너비로 페이지를 렌더링하도록 하는 것입니다. 그것이 없으면 완벽하게 반응하는 페이지가 휴대폰에서는 여전히 작게 보입니다.
| 누락 | 증상 |
|---|---|
| 제목 | 탭 및 검색 결과에 파일 이름이 표시됩니다. |
| 설명 | 공유 링크가 노출된 것처럼 보입니다. |
| 뷰포트 태그 | 휴대폰에서는 페이지가 작게 렌더링됩니다. |
| 상대 경로 | 스타일 없음, 이미지 누락 |
세 번째: 전화로 확인해보세요
페이지는 올바르게 보이는 기계에 구축되었습니다. 그것은 거의 증명되지 않았습니다.
공개된 주소를 실제 휴대폰에서 열어보세요. 가로 스크롤, 너무 작아서 읽을 수 없는 텍스트, 이제 아무 작업도 수행하지 않지만 마우스 오버가 필요한 모든 항목을 찾아보세요.
이 세 가지는 일반적인 세트이며 데스크탑에서는 모두 보이지 않습니다.
4: 한 페이지면 충분합니다
단일 페이지는 한 가지만 말하면 완전한 웹사이트입니다.
웹사이트에 정보 페이지, 연락처 페이지 및 블로그가 있어야 하기 때문에 추가하면 4페이지로 구성되고 그 중 3페이지에는 아무것도 없는 사이트가 생성됩니다. 그것은 좋은 페이지 하나보다 더 나쁩니다.
첫 번째 페이지에 실제로 속하지 않는 콘텐츠가 있는 경우 페이지를 추가하세요.
도메인
페이지는 페이지 없이도 작동합니다. 주소는 주소 없이는 살아남지 못하는 것입니다.
호스팅 제공업체 도메인의 주소는 해당 제공업체에 속합니다. 이동하거나 닫히면 게시한 모든 링크가 끊어집니다. 메시지, 다른 사람의 페이지, 인쇄물, 검색 결과의 링크가 모두 깨집니다.
자신의 도메인이 이동하면 가리키는 위치가 변경된다는 의미입니다. 아무것도 깨지지 않습니다.
1년 후에도 이러한 링크를 계속 사용할 것으로 예상되면 주소를 게시한 이후보다는 주소를 게시하기 전에 링크를 얻으십시오.
밀접하게 관련됨: 인접한 문제에 대한 무료 HTML 파일 호스팅, 비교 및 링크할 HTML.
주소에 넣어두세요
이름을 index.html로 지정하고, 모든 경로를 상대적이고 소문자로 만들고, 제목, 설명 및 뷰포트 태그를 추가하고, 휴대폰에서 확인하고, 그 앞에 자신의 도메인을 배치하세요.
그러면 귀하의 컴퓨터에서 작동했던 파일이 모든 사람에게 작동합니다.