레슨
시작
학습 시작
CodeGym /행동 /Docker SELF /간단한 HTML 사이트 만들기

간단한 HTML 사이트 만들기

Docker SELF
레벨 7 , 레슨 2
사용 가능

간단한 HTML 사이트 만들기

1. HTML 사이트가 왜 필요할까?

웹 개발의 신나는 세계에 온 걸 환영해! 오늘은 간단한 정적 HTML 사이트를 만들고, 이전 강의에서 설정한 웹 서버에 배포해볼 거야. 만약 HTML 코드를 한 번도 작성해본 적이 없더라도 걱정 마 – 모든 게 아주 쉽게 이해될 거야. 우리의 목표는 HTML의 기본을 이해하는 것뿐만 아니라 웹 서버를 통해 세상과 공유할 수 있는 웹 사이트를 만드는 방법을 배우는 거야.

이제 다음 단계로 넘어가 보자 – HTML로 우리만의 사이트를 만들고, 웹 서버를 통해 제대로 보이도록 설정해볼 거야. 웹 세계를 정복할 준비됐지? 그럼 시작하자!

HTML (HyperText Markup Language) – 모든 웹 페이지의 기초야. 사이트의 구조와 콘텐츠를 담당하지. 표준 HTML에서는 헤더, 텍스트, 이미지, 링크, 그리고 심지어 테이블까지 설명할 수 있어. 배우기는 쉽지만, 어떤 사이트의 기반이든 될 수 있을 만큼 강력해.

실제 세계에서는 정적 HTML 페이지를 다룰 수 있는 기술이 다양한 상황에서 유용해:

  • 웹 애플리케이션의 프로토타입을 빠르게 만들기.
  • 문서를 위한 정적 페이지 작성 및 테스트.
  • 서버 애플리케이션을 위한 기본 인터페이스 준비.

그리고 HTML은 웹 페이지 형태의 이력서를 작성하는 훌륭한 방법이야 (맞아, 리크루터들이 가끔 좋아해). 그리고 우리 프로그래머로서 기본 HTML을 아는 건 기본 소양이지.

2. 1단계. HTML 기초: 첫 페이지 만들기

프로그래밍은 마치 LEGO 같아: 모든 나이에게 사랑받는 활동이지. 작은 "블록"으로 시작해보자 - 우리의 첫 웹 페이지로 말이야.

HTML 문서 최소 예제

어떤 텍스트 에디터(예: nano, vim, 심지어 gedit, 그래픽 인터페이스를 원한다면)에서 index.html라는 이름의 파일을 만들어서 아래 코드를 작성해봐:

<!DOCTYPE html>
<html>
<head>
    <title>내 첫 번째 사이트</title>
</head>
<body>
    <h1>안녕, 세상!</h1>
    <p>이것은 내 첫 번째 HTML 웹 페이지야.</p>
</body>
</html>

코드 설명

  1. <!DOCTYPE html> – 브라우저에 우리가 HTML5를 사용한다고 알려줌.
  2. <html> – 문서를 여는 태그. 모든 페이지 내용은 이 태그 안에 있어.
  3. <head> – 사이트의 메타 정보를 위한 섹션 (예: 페이지 제목, 스타일 또는 스크립트 연결).
  4. <title> – 브라우저 탭에 표시될 페이지 제목.
  5. <body> – 주 섹션, 모든 보이는 내용은 여기 있어.
  6. <h1> – 1단계 헤더 (숫자가 작을수록 헤더가 더 큼).
  7. <p> – 텍스트 단락.

맞아, 이건 단 7줄이야, 하지만 이게 바로 네 사이트의 기반이 될 거야!

3. 2단계. HTML 사이트를 서버에 업로드하기

이제 페이지가 준비되었으니, 세상에 공개할 차례야. 이를 위해 우리 웹 서버를 사용할 거야.

사이트 폴더 준비

사이트 파일을 보관할 디렉토리를 만들어봐. 예를 들어, example.com 도메인으로 가상 호스트에 사이트를 업로드하려 한다면, 아래 명령어를 실행해:

sudo mkdir -p /var/www/example.com

그런 다음, index.html 파일을 이 폴더로 이동시켜:

sudo cp index.html /var/www/example.com/

이제 진짜 마법이 시작돼 – 파일이 준비되었어.

4. 단계 3. 웹 서버 설정하여 사이트 제공

Nginx 설정

  1. 가상 호스트 구성 파일 열기:

    sudo nano /etc/nginx/sites-available/example.com

  2. 다음 구성 추가:

    server {
    listen 80;
    server_name example.com;

    root /var/www/example.com;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

  3. 가상 호스트 활성화 및 서버 재시작:

    sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Apache 설정

  1. 가상 호스트 구성 파일 열기:

    sudo nano /etc/apache2/sites-available/example.com.conf

  2. 다음 구성 추가:

    <VirtualHost *:80>
    ServerName example.com

    DocumentRoot /var/www/example.com
    <Directory /var/www/example.com>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

  3. 가상 호스트 활성화 및 서버 재시작:

    sudo a2ensite example.com.conf
sudo systemctl restart apache2

사이트 확인

이제 브라우저를 열고, http://example.com (또는 서버의 IP 주소)을 입력하고 결과를 확인해봐. 멋진 "안녕, 세상!" 메시지가 보인다면, 축하해, 잘 작동하고 있어!

5. 단계 4. 우리 사이트 꾸미기

정적인 페이지도 좋지만, 약간의 CSS는 항상 환영이지. 스타일을 조금 더 추가해 보자.

/var/www/example.com/ 폴더에 새로운 파일 style.css를 추가해:

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
}

h1 {
    color: #ff5722;
}

이제 index.html을 업데이트해서 CSS 링크를 추가해 봐:

<!DOCTYPE html>
<html>
<head>
    <title>내 첫 번째 사이트</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>안녕, 세상!</h1>
    <p>이건 내가 처음 만든 HTML 웹페이지야.</p>
</body>
</html>

페이지를 새로고침하면 스타일이 조금 바뀐 걸 볼 수 있을 거야. 이제 네 사이트가 좀 더 보기 좋아졌어!

6. 대표적인 문제와 해결 방법

웹사이트 작업 중 여러 가지 문제가 생길 수 있지만 걱정하지 마. 우리가 너를 도와줄게:

  • "403 Forbidden" 에러. 사이트 폴더의 권한을 확인해봐. 아래 명령어를 사용하면 돼:

      sudo chmod -R 755 /var/www/example.com

  • "404 Not Found" 에러. 사이트 파일이 올바른 폴더에 있고 올바르게 이름이 지정되어 있는지 확인해.

  • 사이트가 표시되지 않음. 웹 서버 서비스가 실행 중인지 확인해봐:

      sudo systemctl status nginx
  sudo systemctl status apache2

이제 네 사이트에 접근할 수 있는 주소를 알고 있는 모든 사람들에게 제공돼! 멋지지 않아? 다음 강의에서는 HTTPS 추가로 보안을 강화하고 서버 설정을 관리하는 방법을 배울거야.

코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION