코딩을 처음 접하는 분들도 쉽게 따라할 수 있는 랜딩 페이지 제작 강의입니다.
단 1시간 만에 나만의 멋진 웹페이지를 만들고 전 세계에 공개해보세요!

✅

무료

⏱️

1시간 이내

👶

초보 가능

이런 분들에게 추천해요

웹 개발을 시작하고 싶은 초보자
자신의 프로젝트나 서비스를 홍보하고 싶은 분
짧은 시간에 실용적인 결과물을 만들고 싶은 분

📋 강의 준비물

VSCode 설치 (코드 작성 프로그램)

GitHub 계정 (웹사이트 배포용)

이런 걸 만들거에요

나만의 랜딩페이지를 만들고,
서버와 통신하여 투표 수 순위를 불러올 거에요.
투표 버튼을 누를 때마다 투표 수와 순위를 업데이트할 거에요.

🔗 결과물 보기

지금 바로 나만의 랜딩 페이지를 만들어보세요!

1. 노션 페이스로 프로필 만들기

https://faces.notion.com/로 접속하기
새로운 얼굴 버튼을 눌러서 새 프로필 이미지 만들기.
또는 랜덤 버튼을 눌러서 랜덤 프로필 이미지 만들기.
다음 버튼 눌러서 생성한 이미지 다운로드하기. (파일 이름은 face.PNG로 저장)
특정 경로에 옮겨 저장하기. (예: C:\Users\사용자이름\Desktop\landing\face.PNG)

2. HTML로 홈페이지 만들기

실습 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="hughqlee 랜딩페이지 : 누구나 만드는 랜딩페이지 강의 결과물 예시">
    <meta name="keywords" content="hughqlee, 랜딩페이지, 랜딩페이지 강의, 랜딩페이지 예시">
    <title>hughqlee 랜딩페이지</title>
</head>
<body>
    <header>
        <h1>누구나 만드는 랜딩 페이지</h1>
        <p>웹페이지에서 나를 팔아보자!</p>
        <img src="face.PNG" />
        <h3>hughqlee</h3>
    </header>
    <section>
        <p>이곳에 자신을 광고하세요.</p>
        <p>그리고 성과를 아래 표에서 확인하세요.</p>
        <h3>수강생 랭킹</h3>
        <table> 
            <tr>
                <th>순위</th>
                <th>이름</th>
                <th>득표수</th>
            </tr>
        </table>
    </section>
    <footer>
        <button>hughqlee에게 투표하기</button>
    </footer>
</body>
</html>

위 코드를 복사해서 VSCode 텍스트 에디터에 붙여넣고, 파일 이름을 'index.html'로 저장하면 아래 스크린샷과 같은 나만의 랜딩 페이지가 만들어집니다!

💡 주의: 코드에서 'hughqlee'라고 표시된 부분을 자신의 GitHub 사용자 이름으로 변경해주세요! 변경해야 할 부분:

meta 태그의 description과 keywords
title 태그
header 섹션의 h3 태그
footer 섹션의 button 태그

💡 파일 저장 방법:

텍스트 에디터에서 'index.html'이라는 이름으로 저장하세요.
앞서 저장한 프로필 사진(face.PNG)과 같은 폴더에 저장해야 사진이 정상적으로 표시됩니다.
예: 프로필 사진이 'C:\Users\사용자이름\Desktop\landing' 폴더에 있다면, index.html도 같은 폴더에 저장하세요.

HTML이란?
HTML은 웹페이지를 만드는 가장 기본적인 언어입니다. 마치 집을 지을 때의 설계도와 같아요!
기본 구조
- <!DOCTYPE html>
  "이 문서는 HTML입니다!"라고 알려주는 문장이에요.
- <html>
  웹페이지의 시작과 끝을 나타내는 태그입니다.
주요 태그들
- <h1>제목</h1>
  가장 큰 제목을 만들 때 사용합니다.
- <p>내용</p>
  일반적인 글을 쓸 때 사용합니다.
- <img src="face.PNG" />
  사진을 넣을 때 사용합니다.

3. CSS로 스타일링하기

실습 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="hughqlee 랜딩페이지 : 누구나 만드는 랜딩페이지 강의 결과물 예시">
    <meta name="keywords" content="hughqlee, 랜딩페이지, 랜딩페이지 강의, 랜딩페이지 예시">
    <title>hughqlee 랜딩페이지</title>
</head>
<body style="text-align: center;">
    <header>
        <h1 style="margin-bottom: 0;">누구나 만드는 랜딩 페이지</h1>
        <p>웹페이지에서 나를 팔아보자!</p>
        <img src="face.PNG" style="margin: auto; width: 100px; border: 1px black solid; border-radius: 50%;" />
        <h3 style="margin: 0;">hughqlee</h3>
    </header>
    <section style="margin-bottom: 100px;">
        <p>이곳에 자신을 광고하세요.</p>
        <p>그리고 성과를 아래 표에서 확인하세요.</p>
        <h3>수강생 랭킹</h3>
        <table style="margin: auto; max-width: 400px; width: 80%;"> 
            <tr>
                <th>순위</th>
                <th>이름</th>
                <th>득표수</th>
            </tr>
        </table>
    </section>
    <footer style="position: fixed; bottom: 10px; width: 100%;">
        <button class="cta-button">hughqlee에게 투표하기</button>
    </footer>
</body>
<style>
    th {
        width: 25%;
    }
    
    a {
        text-decoration: none;
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        -webkit-background-clip: text;
        color: transparent;
    }
    
    .cta-button {
        padding: 10px;
        max-width: 400px;
        width: 80%;
        background-color: white;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }
    
    /* ✅ 클릭 효과 (마우스 클릭 시) */
    .cta-button:active {
        background-color: gray;
        transform: scale(0.95);
    }
</style>
</html>

위 코드를 복사해서 VSCode 텍스트 에디터에 붙여넣고, 파일 이름을 'index.html'로 저장하면 스타일이 적용된 랜딩 페이지가 만들어집니다! (주의: 코드에서 'hughqlee'라고 표시된 부분을 자신의 GitHub 사용자 이름으로 변경해주세요!)

CSS란?
CSS는 웹페이지의 디자인을 담당하는 언어입니다. 마치 집을 꾸미는 인테리어와 같아요!
주요 속성들
- color: 색상;
  글자 색상을 정합니다.
- background-color: 색상;
  배경 색상을 정합니다.
- margin: 여백;
  바깥쪽 여백을 정합니다.
- padding: 여백;
  안쪽 여백을 정합니다.
CSS 적용 방법
CSS를 적용하는 방법은 크게 두 가지가 있습니다:
- 1. 인라인 스타일 (Inline Style)
  HTML 태그에 직접 style 속성을 사용하는 방법입니다. 예시:
  <h1 style="margin-bottom: 0;">제목</h1>
  장점: 간단하고 직관적입니다.
  단점: 같은 스타일을 여러 요소에 적용할 때 비효율적입니다.
- 2. style 태그 사용
  HTML 문서의 <head> 또는 <body> 태그 안에 <style> 태그를 사용하는 방법입니다. 예시:
  <style> .cta-button { padding: 10px; background-color: white; } </style>
  장점: 여러 요소에 같은 스타일을 쉽게 적용할 수 있습니다.
  단점: HTML 파일이 길어질 수 있습니다.
💡 실습 예제에서는 두 가지 방법을 모두 사용하고 있습니다. 인라인 스타일은 개별 요소의 스타일을, style 태그는 여러 요소에 공통으로 적용되는 스타일을 정의하는 데 사용됩니다.
style 태그 사용시 기본 문법
- 선택자 { 속성: 값; }
  어떤 요소에 어떤 스타일을 적용할지 정하는 문법입니다.
- .클래스명 { }
  클래스를 가진 요소들을 선택합니다.
- #아이디 { }
  특정 아이디를 가진 요소를 선택합니다.

4. JavaScript로 기능 추가하기

실습 예제

<script>
    const API_URL = 'https://hughqlee.com/api/v1/action'

    window.onload = updateTable;

    document.querySelector('.cta-button').addEventListener('click', async function() {
        const response = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
        });
        const data = await response.json();
        console.log(data);
        updateTable()
    });

    async function updateTable() {
        const getResponse = await fetch(API_URL, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        const getData = await getResponse.json();
        const table = document.querySelector('table');
        table.innerHTML = `
          <tr>
            <th>순위</th>
            <th>이름</th>
            <th>득표수</th>
            <th>링크</th>
          </tr>
        `;
        
        getData.sort((a, b) => b.count - a.count);

        getData.forEach((item, index) => {
            const row = document.createElement('tr');
            row.innerHTML = `
              <td>${index + 1}</td>
              <td>${item.username}</td>
              <td>${item.count}</td>
              <td><a href="https://${item.username}.github.io/landing4everyone"><b>이동</b></a></td>
            `;
            table.appendChild(row);
        });
    }
</script>

위 코드를 복사해서 HTML 파일의 </body> 태그 바로 위에 붙여넣으면, 투표 기능과 실시간 순위표가 동작하는 웹페이지가 완성됩니다!

JavaScript란?
JavaScript는 웹페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다. 우리는 HTML 파일의 맨 아래, </body> 태그 바로 위에 <script> 태그를 추가하여 JavaScript 코드를 작성합니다.
API 연동하기
서버와 통신하여 데이터를 주고받는 방법입니다. 우리는 투표 기능을 위해 API를 사용합니다.
const API_URL = 'https://hughqlee.com/api/v1/action'
API_URL은 서버의 주소를 저장하는 변수입니다.
페이지 로드 시 실행하기
웹페이지가 처음 로드될 때 실행되는 코드입니다.
window.onload = updateTable;
페이지가 로드되면 updateTable 함수가 실행되어 순위표를 업데이트합니다.
버튼 클릭 이벤트 처리하기
투표 버튼을 클릭했을 때 실행되는 코드입니다.
document.querySelector('.cta-button').addEventListener('click', async function() { const response = await fetch(API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, }); const data = await response.json(); console.log(data); updateTable() });
버튼을 클릭하면 서버에 POST 요청을 보내고, 응답을 받은 후 순위표를 업데이트합니다.
순위표 업데이트하기
서버에서 데이터를 가져와 순위표를 업데이트하는 함수입니다.
async function updateTable() { const getResponse = await fetch(API_URL, { method: 'GET', headers: { 'Content-Type': 'application/json' } }); const getData = await getResponse.json(); const table = document.querySelector('table'); table.innerHTML = ` <tr> <th>순위</th> <th>이름</th> <th>득표수</th> <th>링크</th> </tr> `; getData.sort((a, b) => b.count - a.count); getData.forEach((item, index) => { const row = document.createElement('tr'); row.innerHTML = ` <td>${index + 1}</td> <td>${item.username}</td> <td>${item.count}</td> <td><a href="https://${item.username}.github.io/landing4everyone"><b>이동</b></a></td> `; table.appendChild(row); }); }
서버에서 데이터를 가져와 순위순으로 정렬한 후, 테이블에 표시합니다.

5. GitHub에서 배포하기

GitHub 계정 만들기
아직 GitHub 계정이 없다면, github.com에서 회원가입(Sign up)을 해주세요. 여러분의 GitHub 사용자 이름이 웹사이트 주소가 됩니다.
새 저장소(Repository) 만들기
1. GitHub에 로그인 후 오른쪽 상단의 + 버튼을 클릭하고 'New repository'를 선택하세요.

2. Repository name을 정확히 landing4everyone으로 입력하세요.

3. Public 옵션을 선택하고 'Create repository' 버튼을 클릭하세요.
파일 업로드하기
1. 생성된 저장소 페이지에서 'uploading an existing file' 링크를 클릭하세요.

2. 작성한 index.html 파일과 face.PNG 파일을 드래그 앤 드롭으로 업로드하세요.

3. 'Commit changes' 버튼을 클릭하여 업로드를 완료하세요.
GitHub Pages 활성화하기
1. 저장소 페이지에서 'Settings' 탭을 클릭하세요.

2. 왼쪽 메뉴에서 'Pages'를 클릭하세요.

3. Source에서 'Deploy from a branch'를 선택하세요.

4. Branch를 'main'으로 선택하고 'Save' 버튼을 클릭하세요.
웹사이트 확인하기
1. 1-2분 정도 기다리면 배포가 완료됩니다.

2. https://[사용자이름].github.io/landing4everyone 주소로 접속하면 여러분의 웹사이트를 볼 수 있습니다!

💡 주의: [사용자이름] 부분을 여러분의 GitHub 사용자 이름으로 바꿔주세요.
문제 해결
- 웹사이트가 보이지 않는다면 약 5분 정도 더 기다려보세요.

- 파일 이름이 정확히 'index.html'인지 확인하세요.

- 저장소 이름이 정확히 'landing4everyone'인지 확인하세요.