icon
1장 : 웹 개발 입문

첫 웹 페이지 만들기

앞선 장에서 웹의 기본 원리와 핵심 언어, 그리고 개발 환경 설정까지 마쳤습니다. 이제 이 모든 지식과 도구를 활용하여 여러분의 첫 번째 웹 페이지를 직접 만들어 볼 시간입니다. 우리가 방금 설정한 개발 환경에서 HTML, CSS, 그리고 자바스크립트 코드를 직접 작성하고, 그 결과물을 웹 브라우저에서 바로 확인하는 과정을 통해 '내가 직접 웹 페이지를 만들 수 있구나!'라는 뿌듯함을 느끼실 수 있을 것입니다.

이번 장에서는 여러분의 이름과 간단한 소개가 담긴 개인 웹 페이지를 만들어 볼 것입니다. 이를 통해 HTML로 구조를 만들고, CSS로 스타일을 적용하며, 자바스크립트로 간단한 상호작용을 추가하는 일련의 과정을 실제 예시를 통해 경험하게 될 것입니다.

HTML: 웹 페이지의 뼈대 세우기

가장 먼저 HTML을 사용하여 웹 페이지의 기본 구조를 만듭니다. '나의 소개'라는 제목과 함께 여러분의 이름, 간단한 자기소개 문구, 그리고 몇 가지 정보를 담을 공간을 마련할 것입니다.

  1. 새 파일 준비

    • 3장에서 만들었던 web-dev-practice 폴더를 VS Code에서 엽니다.
    • 폴더 안에 새로운 파일 my_profile.html을 생성합니다. (기존 index.html은 그대로 두고, 이번 실습을 위한 새 파일을 만듭니다.)

  2. HTML 기본 구조 작성

    • my_profile.html 파일에 다음 코드를 입력합니다. (VS Code에서 html:5를 입력 후 Tab 키를 누르면 기본 구조가 자동 완성됩니다.)
    my_profile.html
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 프로필 페이지 - [여러분의 이름]</title>
    </head>
<body>
    <header>
        <h1>안녕하세요, [여러분의 이름]입니다!</h1>
        <p>웹 개발을 시작하는 초보 개발자입니다.</p>
    </header>

    <section>
        <h2>저를 소개합니다</h2>
        <p>
            저는 새로운 기술을 배우는 것을 즐기며, 특히 웹 개발에 깊은 흥미를 느끼고 있습니다.
            이 책과 함께 여러분과 함께 성장하고 싶습니다.
        </p>
        <ul>
            <li><strong>취미:</strong> 독서, 산책</li>
            <li><strong>좋아하는 것:</strong> 맛있는 커피, 새로운 지식</li>
            <li><strong>목표:</strong> 나만의 멋진 웹 서비스 만들기</li>
        </ul>
    </section>

    <footer>
        <p>&copy; 2025 [여러분의 이름]. All rights reserved.</p>
        <button id="contactButton">문의하기</button>
    </footer>

    </body>
</html>

  3. 코드 설명

    • <!DOCTYPE html>: 이 문서가 HTML5 표준을 따른다는 것을 웹 브라우저에 알려줍니다.
    • <html lang="ko">: 문서의 시작을 알리며, 문서의 기본 언어가 한국어임을 명시합니다. 이는 검색 엔진이나 스크린 리더 등에 유용합니다.
    • <head>: 웹 페이지 자체에 대한 정보(메타데이터)를 담는 부분입니다. 사용자에게 직접 보이지는 않지만, 웹 페이지의 설정과 관련된 중요한 내용이 들어갑니다.
      • <meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정합니다. 한글이 깨지지 않도록 하는 매우 중요한 설정입니다.
      • <meta name="viewport" ...>: 웹 페이지가 다양한 기기(모바일, 태블릿 등)에서 올바르게 표시되도록 뷰포트 설정을 정의합니다. '반응형 웹'을 위한 필수 설정입니다.
      • <title>: 웹 브라우저 탭에 표시될 웹 페이지의 제목을 설정합니다.
      • ``: 나중에 style.css 파일을 연결할 위치를 주석으로 표시했습니다. 주석은 코드에 대한 설명을 달 때 사용되며, 웹 브라우저에는 표시되지 않습니다.
    • <body>: 웹 브라우저 화면에 실제로 표시될 모든 콘텐츠가 들어가는 부분입니다.
      • <header>: 페이지의 머리글 영역을 나타냅니다. 주로 제목이나 로고, 내비게이션 바 등이 들어갑니다.
      • <h1>, <p>: 제목과 단락을 나타내는 태그입니다.
      • <section>: 문서의 독립적인 섹션을 나타냅니다.
      • <h2>: 두 번째 수준의 제목을 나타냅니다.
      • <ul>, <li>: 순서 없는 목록(Unordered List)과 목록의 각 항목(List Item)을 나타냅니다.
      • <strong>: 텍스트를 강조하는 태그입니다.
      • <footer>: 페이지의 바닥글 영역을 나타냅니다. 주로 저작권 정보나 연락처 등이 들어갑니다.
      • <button>: 클릭할 수 있는 버튼을 만듭니다. id="contactButton"은 나중에 자바스크립트에서 이 버튼을 쉽게 찾기 위한 고유한 이름입니다.
      • ``: 나중에 script.js 파일을 연결할 위치를 주석으로 표시했습니다.

  4. 미리 보기

    • my_profile.html 파일을 저장합니다.
    • 3장에서 설치했던 Live Server 확장 프로그램을 사용하여 이 파일을 엽니다. (VS Code 하단의 'Go Live' 버튼 클릭 또는 파일 위에서 마우스 우클릭 후 'Open with Live Server')
    • 웹 브라우저에 여러분이 작성한 HTML 내용이 표시될 것입니다. 아직 스타일이 적용되지 않아 다소 밋밋하게 보일 수 있습니다. 마치 건물의 뼈대만 완성된 상태입니다.

CSS: 웹 페이지에 스타일 입히기

이제 HTML로 만든 뼈대에 CSS를 사용하여 옷을 입히고 아름답게 꾸며줄 차례입니다. 색상, 글꼴, 여백 등을 조절하여 웹 페이지를 시각적으로 매력 있게 만들어 봅시다.

  1. CSS 파일 생성

    • web-dev-practice 폴더 안에 새로운 파일 profile_style.css를 생성합니다. (3장에서 만든 style.css는 그대로 두고 새 파일을 만듭니다.)

  2. HTML 파일에 CSS 연결

    • my_profile.html 파일로 돌아와 <head> 태그 안의 `` 주석 아래에 다음 코드를 추가합니다.
    my_profile.html
    <link rel="stylesheet" href="profile_style.css">
    • 이 코드는 my_profile.html 파일이 profile_style.css 파일의 스타일 규칙을 적용받도록 연결해 줍니다.

  3. CSS 코드 작성

    • profile_style.css 파일에 다음 CSS 코드를 작성합니다.
    profile_style.css
    /* 전체 페이지에 적용될 기본 스타일 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5; /* 연한 회색 배경 */
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    display: flex; /* Flexbox를 사용하여 콘텐츠를 중앙에 배치 */
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* 최소 화면 높이 */
}

/* 헤더 스타일 */
header {
    background-color: #007bff; /* 파란색 배경 */
    color: white;
    padding: 40px 20px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin-bottom: 10px;
    font-size: 2.8em;
}

header p {
    font-size: 1.2em;
    opacity: 0.9;
}

/* 섹션 스타일 */
section {
    background-color: white;
    margin: 30px 20px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    max-width: 800px;
    width: 90%;
    text-align: left;
}

section h2 {
    color: #0056b3;
    margin-bottom: 20px;
    font-size: 2em;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

section ul {
    list-style: none; /* 목록 마커 제거 */
    padding: 0;
    margin-top: 20px;
}

section ul li {
    background-color: #e9f7fe; /* 연한 하늘색 배경 */
    margin-bottom: 10px;
    padding: 12px 15px;
    border-left: 5px solid #007bff;
    border-radius: 5px;
    font-size: 1.1em;
}

section ul li strong {
    color: #004d66;
}

/* 푸터 스타일 */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    width: 100%;
    margin-top: auto; /* 하단에 고정 */
}

footer p {
    margin-bottom: 15px;
    font-size: 0.9em;
    opacity: 0.8;
}

/* 버튼 스타일 */
#contactButton { /* ID 선택자 사용 */
    background-color: #28a745; /* 녹색 버튼 */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.2s ease; /* 호버 애니메이션 */
}

#contactButton:hover {
    background-color: #218838; /* 진한 녹색 */
    transform: translateY(-2px); /* 살짝 위로 */
}

  4. 변화 확인

    • my_profile.html 파일을 저장합니다. (Live Server를 사용 중이라면 자동으로 새로고침됩니다.)
    • 웹 브라우저에서 여러분의 프로필 페이지가 확연히 달라진 것을 확인할 수 있을 것입니다. 배경색이 바뀌고, 글꼴이 정돈되며, 각 영역이 깔끔하게 구분되어 보일 것입니다. 마치 뼈대만 있던 건물에 아름다운 외관과 내부 인테리어가 완성된 것과 같습니다.

JavaScript: 웹 페이지에 상호작용 추가하기

마지막으로 자바스크립트를 사용하여 웹 페이지에 동적인 기능을 추가해 봅시다. '문의하기' 버튼을 클릭하면 경고창이 나타나도록 만들어 보겠습니다.

  1. 자바스크립트 파일 생성

    • web-dev-practice 폴더 안에 새로운 파일 profile_script.js를 생성합니다. (3장에서 만든 script.js는 그대로 두고 새 파일을 만듭니다.)

  2. HTML 파일에 자바스크립트 연결

    • my_profile.html 파일로 돌아와 </body> 태그 바로 위(푸터 아래)의 `` 주석 아래에 다음 코드를 추가합니다.
    <script src="profile_script.js"></script>
    • 자바스크립트 파일은 일반적으로 </body> 태그 바로 위에 배치합니다. 이는 HTML과 CSS가 모두 로드된 후에 자바스크립트가 실행되어야 웹 페이지 요소들을 제대로 조작할 수 있기 때문입니다.

  3. 자바스크립트 코드 작성

    • profile_script.js 파일에 다음 자바스크립트 코드를 작성합니다.
    profile_script.js
    // '문의하기' 버튼 요소를 ID로 선택합니다.
const contactButton = document.getElementById('contactButton');

// 버튼에 클릭 이벤트 리스너를 추가합니다.
contactButton.addEventListener('click', function() {
    // 버튼이 클릭될 때 경고창(alert)을 띄웁니다.
    alert('아직 문의 기능은 개발 중입니다. 잠시만 기다려주세요! 😊');
});

// 페이지가 로드되면 실행되는 메시지 (선택 사항)
window.onload = function() {
    console.log('프로필 페이지가 성공적으로 로드되었습니다!');
    // 개발자 도구의 콘솔 탭에서 이 메시지를 확인할 수 있습니다.
};

  4. 변화 확인

    • my_profile.html 파일을 저장합니다.
    • 웹 브라우저에서 여러분의 프로필 페이지를 확인합니다.
    • 하단의 '문의하기' 버튼을 클릭해 보세요. '아직 문의 기능은 개발 중입니다...'라는 경고창이 나타날 것입니다.

    이것이 바로 자바스크립트가 웹 페이지에 생명력을 불어넣는 아주 간단한 예시입니다. 사용자의 행동에 반응하여 웹 페이지가 동적으로 변화하는 것을 직접 경험하신 것입니다.

정리 및 다음 단계 안내

축하드립니다! 여러분은 이제 자신만의 첫 번째 웹 페이지를 성공적으로 만들었습니다. 이 과정을 통해 여러분은 다음을 경험하고 배웠습니다.

  • HTML: 웹 페이지의 뼈대와 내용을 구조화하는 방법
  • CSS: 구조화된 내용에 시각적인 스타일을 적용하는 방법
  • 자바스크립트: 사용자와 상호작용하는 동적인 기능을 추가하는 방법
  • 개발 환경: VS Code와 Live Server를 활용하여 코드를 작성하고 실시간으로 확인하는 방법

이 작은 시작이 여러분의 웹 개발 여정에 큰 첫걸음이 될 것입니다. 지금 만든 페이지는 아주 기초적인 수준이지만, 앞으로 배우게 될 더 많은 지식과 기술을 통해 여러분은 훨씬 더 복잡하고 기능적인 웹 페이지를 만들 수 있게 될 것입니다.

개발 환경 설정

Previous Page

HTML 구조와 문법

Next Page