[웹 개발 기초] 1화: 코딩 준비와 HTML로 웹사이트 뼈대 세우기

안녕하세요! 웹 개발의 세계에 오신 것을 환영합니다. 오늘부터 총 10회에 걸쳐, 아무것도 없는 빈 화면에서 시작해 ‘나만의 멋진 포트폴리오 사이트’ 를 완성하는 과정을 함께할 것입니다.

첫 번째 시간인 오늘은 개발 환경을 설정하고, 웹사이트의 가장 기초가 되는 HTML(HyperText Markup Language) 을 사용하여 사이트의 구조를 잡아보겠습니다. 건물을 지을 때 철골 구조를 세우는 작업이라고 생각하시면 됩니다.

Table of Contents

1. 개발 도구 준비하기 (VS Code & Live Server)

요리사가 칼과 도마를 준비하듯, 우리도 에디터 와 서버를 준비해야 합니다.

1-1. Visual Studio Code (VS Code) 설치

마이크로소프트에서 만든 Visual Studio Code 는 전 세계에서 가장 인기 있는 무료 코드 에디터입니다.

다운로드: https://code.visualstudio.com/
설치 파일을 다운로드하고 기본 설정대로 설치를 진행해 주세요.

1-2. 필수 확장 프로그램: Live Server

코드를 수정하고 저장할 때마다 브라우저에서 ‘새로고침’ 버튼을 누르는 건 매우 귀찮은 일입니다. Live Server 를 설치하면 파일을 저장하는 순간 브라우저가 자동으로 새로고침 되어 변경 사항을 바로 보여줍니다.

VS Code를 실행합니다.
왼쪽 사이드바에서 블록 쌓기 모양 아이콘(Extensions) 을 클릭합니다. (단축키: Ctrl+Shift+X)
검색창에 Live Server를 입력합니다. (Ritwick Dey 제작)
Install 버튼을 눌러 설치합니다.

1-3. 프로젝트 폴더 만들고 열기

바탕화면이나 원하는 곳에 새 폴더를 만들고 이름을 my-portfolio라고 짓습니다.
VS Code에서 File > Open Folder… 를 누르고 방금 만든 폴더를 선택합니다.
이제 이 폴더가 우리의 작업 공간(Workspace)이 되었습니다.

2. HTML 기본 구조 이해하기

모든 HTML 문서는 아래와 같은 기본 구조를 가집니다. VS Code 탐색기에서 index.html 파일을 만들고 아래 코드를 작성해 보세요.

<!DOCTYPE html>
<!-- 1. 이 문서가 HTML5 버전임을 브라우저에 알립니다. -->
<html lang="ko">
  <!-- 2. 문서의 주 언어가 한국어임을 명시합니다. -->
  <head>
    <meta charset="UTF-8" />
    <!-- 3. 한글이 깨지지 않도록 인코딩을 설정합니다. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 4. 모바일 화면에서도 비율이 맞게 보이도록 설정합니다. -->
    <title>나만의 포트폴리오 | Web Developer</title>
    <!-- 5. 브라우저 탭에 표시될 제목입니다. -->
  </head>
  <body>
    <!-- 6. 여기에 실제 화면에 보일 내용들이 들어갑니다. -->
    <h1>안녕하세요!</h1>
  </body>
</html>

💡 잠깐! 주석(Comment)이란 무엇인가요?

코드에서  처럼 생긴 것을 주석(Comment) 이라고 합니다.

브라우저가 무시합니다. 주석은 화면에 표시되지 않고 개발자만 볼 수 있습니다.

코드를 설명하는 메모장 처럼 사용합니다. 나중에 코드를 다시 읽을 때 “이게 뭐였지?” 하는 상황을 막아줍니다.

코드를 잠시 비활성화 할 때도 유용합니다. 지우지 않고 주석 처리해두면 필요할 때 다시 살릴 수 있습니다.

<p>이것은 화면에 보입니다.</p>
HTML 주석은 으로 끝납니다. 좋은 코드에는 적절한 주석이 함께합니다!

3. 시맨틱 태그(Semantic Tag)로 구역 나누기

과거에는 단순히 <div> 태그만 남발했지만, 모던 웹에서는 의미 있는 태그(Semantic Tag) 를 사용하는 것이 중요합니다. 검색 엔진 최적화(SEO)와 코드 가독성을 위해서죠.

우리가 만들 포트폴리오 사이트는 크게 네 부분으로 나뉩니다.

네비게이션(nav) : 메뉴 버튼들이 있는 상단 바
헤더(header): 사이트의 첫인상을 담당하는 메인 영역
섹션(section) : 본문 내용 (자기소개, 프로젝트 등)

4. 실전! 포트폴리오 구조 잡기

이제 <body> 태그 안을 채워보겠습니다. 아직 디자인(CSS)이 없어서 못생겨 보일 수 있지만, 뼈대를 튼튼히 하는 과정이니 걱정 마세요!

<body>
  <!-- 1. 네비게이션 바: 사이트 로고와 메뉴 링크를 담습니다. -->
  <nav id="navbar">
    <div class="logo">MyPortfolio.</div>
    <ul class="menu">
      <!-- href="#id"는 해당 아이디를 가진 섹션으로 스크롤 이동하게 해줍니다. -->
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

  <!-- 2. 히어로 섹션: 방문자가 가장 먼저 보게 될 메인 화면입니다. -->
  <header id="home" class="hero">
    <div class="hero-content">
      <!-- h1은 페이지에서 가장 중요한 제목을 의미합니다. -->
      <h1>Creative<br />Web Developer</h1>
      <p>HTML, CSS, JavaScript로 만드는<br />인터랙티브한 웹 경험을 제공합니다.</p>
      <div class="btn-group">
        <button class="btn primary">프로젝트 보기</button>
        <button class="btn secondary">연락하기</button>
      </div>
    </div>
  </header>

  <!-- 3. 소개 섹션: 나에 대한 정보를 보여주는 구역입니다. -->
  <section id="about" class="section">
    <div class="container">
      <h2>About Me</h2>
      <p>안녕하세요! 사용자 경험(UX)을 최우선으로 생각하는 웹 개발자입니다.</p>
    </div>
  </section>

  <!-- 4. 프로젝트 섹션: 작업물을 보여줄 구역입니다. -->
  <section id="projects" class="section">
    <div class="container">
      <h2>My Projects</h2>
      <p>최근 진행한 주요 프로젝트들을 소개합니다.</p>
      <!-- 나중에 이곳에 프로젝트 카드들이 들어갈 예정입니다. -->
    </div>
  </section>

  <!-- 5. 푸터: 저작권 표시 -->
  <footer>
    <p>&copy; 2024 My Portfolio. All rights reserved.</p>
  </footer>
</body>

자, 이제 웹사이트의 뼈대가 완성되었습니다! 브라우저로 열어보면 텍스트만 쭉 나열되어 있을 거예요.

다음 시간에는 CSS 를 사용하여 이 뼈대에 예쁜 옷을 입혀보겠습니다. 폰트를 바꾸고 색상을 입히는 마법 같은 과정을 기대해 주세요!

감사합니다.

다른 글도 함께 읽어보세요

IT / 개발 최신 글