HTML 및 CSS를 사용하여 사용자 지정 랜딩 페이지를 만드는 방법

이 안내서는 HTML 및 CSS를 사용하여 기본 '건설 랜딩 페이지에서 기본'을 만드는 방법을 배우게됩니다.

방문 페이지를 만들려면 CPANEL 파일 관리자, 메모장 ++ 또는 원하는 텍스트 편집기에 제공된 텍스트 편집기가 있어야합니다.이 가이드에서는이 가이드를 따라야합니다.CPANEL과 같은 제어판을 사용하는 경우 이러한 파일을 public_html 디렉토리 또는 도메인 이름에 대한 문서 루트에 추가합니다.제어판을 사용하지 않는 경우 도메인의 문서 루트의 위치가 다를 수 있지만 / var / www / html 에이 파일을 추가 할 수 있습니다.

사이트 파일 만들기

index.html 파일을 만들고 텍스트 편집기에서 열어서 시작하십시오.

왜 색인?
Apache가 설정된 방식, 도메인 폴더 (또는 public_html)에서 index.htm, index.html 또는 index.php와 같은 directoryIndex를 폴더의 홈페이지로 제공 하고이 파일을 제공합니다.이러한 파일 중 하나가없는 경우 인덱스 목록이 표시됩니다..htaccess 파일을 통해 디렉토리 색인을 변경할 수 있습니다.

HTML은 본질적으로 웹 사이트 페이지의 구조이므로 올바르게 설정되어 있는지 확인해야합니다.

이 예에서는 HTML 스크립트, 헤더 및 본문을 식별해야합니다.다음 "태그"를 사용 하여이 작업을 수행 할 수 있습니다.

<html>
<head></head>
<body></body>
</html>

태그는 HTML 문서에서 다른 요소를 식별하는 방법과 일반적으로 쌍으로 올 것입니다.대부분의 태그에는 Start \ <> 및 End \, 일부 태그는 두 번째 태그가 없으며 /> 이는 링크 및 이미지에서 주로 볼 수있는 '빈 요소'라고합니다.

헤드 태그

이는 사이트 메타 데이터, 문서 제목, 문자 집합, 인라인 스타일, 스크립트 링크 및 기타 메타 정보와 같은 콘텐츠가 아닌 데이터를 저장하는 위치입니다.우리는 머리 섹션에서 두 개의 다른 태그를 사용합니다 :

제목 태그 -이 태그는 탭에 표시되는 것을 변경합니다.

링크 태그 - 외부 스타일이나 스크립트를 첨부하는 곳입니다.우리는 이것을 사용하여 우리 웹 사이트에 스타일 시트를 추가 할 것입니다.

본문 태그

이것은 사이트 콘텐츠가 어디로가는 곳입니다.우리가 원한다면, 우리는 테스트를 직접 추가 할 수 있습니다.예를 들어, "Hello World!"를 추가하면우리의 HTML에서는 다음과 같습니다.

<!DOCTYPE html>
<HTML>
<head></head>
<body>Hello World!!</body>
</HTML>

이 코드를 추가하고 브라우저로 도메인 이름을 방문한 후 웹 페이지는 다음과 같습니다.

그런 다음 HTML의 스타일 시트를 연결 해 봅시다.위에서 언급했듯이 HTML 문서의 머리에 스타일 시트를 링크하는 것을 추가하여 스타일 시트를 첨부 할 수 있습니다.당신이 끝난 후에, 그것은 다음과 같이 보일 것입니다 :

<!DOCTYPE html>
<html> 
<head>
<link rel="stylesheet" href="css.css"/>
</head> 
<body>
 </body> 
</html>

컨테이너 및 콘텐츠 추가

콘텐츠를보다 잘 구성하려면 태그를 사용하여 컨테이너, 이미지, 헤더 등과 같은 다른 객체를 지정할 수 있습니다. 나중에 스타일 시트에서 이러한 다른 태그를 호출합니다.

이 예에서는 DIV 컨테이너를 사용하고 있습니다.

\

태그.

<!DOCTYPE html>
<html>
<head>
    <title>Coming Soon</title>
    <link rel="stylesheet" href="css.css"/>
</head>
<body>

<div>
    <h1>This Site is Under Construction</h1>
        <p>Content Coming December 2018</p>

</div>

</body>
</html>

스타일 시트에 추가하기 전의 웹 페이지는 다음과 같습니다.

사이트에 스타일 추가

스타일 시트 'CSS.CSS'작성 및 편집

이제 .css 파일을 만들어 봅시다.위의 파일 이름과 일치해야하므로 예제는 css.css입니다.스타일 시트의 HTML 문서의 태그를 통해 레이블이 지정된 다른 요소를 호출 할 수 있습니다.

이 예에서는 4 개의 다른 요소가 있습니다. 본체, div, h1 및 p. 아래에서는 이러한 태그를 사용하여 배경을 변경하고, 가운데의 크기를 변경하고 텍스트의 크기를 변경할 수있는 방법을 알 수 있습니다. 우리는 또한 명확성에 도움이되는 텍스트 그림자를 추가하는 방법을 보여줄 것입니다.

다음은 CSS.css 파일입니다.

body {

    background-image:url('background-background-image-blue-sky-1054218.jpg');
    background-size: 100%, 100%;

}

div {
    font-family: verdana;
    color:black;
    text-align: center;
    margin-top:250px;

}

h1{

    text-align:center;
    font-size: 75px;
    margin:0px;
    padding:0px;
    text-shadow: 2px 1px 1px grey;
}
p{

    font-size: 40px;
    text-shadow: 1px 1px 3px lightgrey;
}

스타일 시트에 추가 할 수있는 다양한 속성이 많이 있습니다. 이 기사에서는 몇 가지 기본 옵션을 다루었습니다.

많은 다른 속성은 변화하는 것에 따라 약간 다른 구조가 필요합니다.

사이트 테스트

이제 새 방문 페이지를 확인할 수 있습니다!아직 도메인을 호스팅으로 지적하지 않은 경우 hosts.cx 또는 전용 IP 주소와 같은 테스트 사이트를 사용하여 사이트를 볼 수 있습니다.