Seonghun Park Seonghun Park

Seonghun Park

Developer.

© 2025

Dark Mode

[멋사 백엔드 19기] TIL 24일차 프론트 개발 환경 구축 및 HTML 기초
Sep 21, 2025
  • 멋쟁이사자처럼
  • 멋사
  • 백엔드
  • TIL
  • HTML

📂 목차

📚 본문

back 으로의 query 를 보내기 위한 간단한 front 부분을 살펴본다.

개발 환경 구축

Node

Chrome V8 엔진 기반 자바스크립트 런타입 환경을 제공하며, 비동기 I/O, 이벤트 기반 구조를 통해 요청을 동시에 많이 처리할 수 있게 하여서 외부에서도 자바스크립트를 실행할 수 있게 해주는 프로그램이다.

brew install node

NVM

javascript 가 발전하면서 전 세계 개발자들이 만든 서드파티 라이브러리들을 쉽게 설치하고 빠르게 적용하고 관리할 수 있게 해주는 패키지 매니저이며, 다음 명령어로 설치할 수 있다.

brew install nvm
# 프로젝트 디렉토리 생성
mkdir my-html-project
cd my-html-project

# npm 초기화
npm init -y

# 개발 서버 설치
npm install lite-server --save-dev

java 에는 gradle 이 있다면, 여기에는 npm 이 있듯이, npm 도 프로젝트를 단위로 패키지를 관리하도록 할 수 있다. 만든 디렉토리에서 npm init 을 해주면 된다(-y 옵션은 실행했을 때 나오는 질의에 대해 yes 옵션을 준다).

npm install lite-server 는 가장 간단한 웹서버를 구동시키고 싶을때 사용한다.

  • Live Reloading: 파일이 수정되면 브라우저가 자동으로 새로고침
  • 간단한 설정: bs-config.json 설정 파일로 루트 디렉토리, 라우팅 지정 가능

기능이 있다(--save-dev 는 개발 환경에서만 해당 패키지, 라이브러리를 쓰겠다는 의미다).

{
  "scripts": {
    "start": "lite-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

package.json 에는 커스텀 스크립트를 넣을 수 있는 기능도 있는데, npm test 를 하면 테스트 정의가 안되어 있다는 메시지가 뜨게 되고, start 라는 커스텀 명령을 프로젝트 디렉토리에서 npm start 를 입력하게 되면 lite-server 가 자동으로 서버 수행을 하게 된다.

node 서버는 3000 포트를 보통 쓴다.

HTML

기본 문법은 생략한다.

Open Graph 메타 태그

웹페이지가 SNS 에 공유될 때 어떻게 보여질지에 대한 정의를 하는 태그이다.

<meta property="og:title" content="내 블로그 제목" />
<meta property="og:description" content="이 페이지의 간단한 설명" />
<meta property="og:image" content="https://example.com/image.png" />
<meta property="og:url" content="https://example.com/post/123" />
  • og:title: 공유될 때 표시할 제목
  • og:description: 페이지 요약
  • og:image: 썸네일 이미지
  • og:url: 원본 주소 (정규화된 url)
  • og:type: website, article 등 컨텐츠 타입

Form Tag

폼은 요청을 전송하는 편지 역할이다. back 으로의 전송을 위해 있으며, 우리가 로그인 할 때도 이 태그가 들어가게 된다.

<form action="/submit" method="post">
    <label for="username">사용자명:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password" required>

    <button type="submit">제출</button>
</form>
  • form의 action: (루트 디렉터리)/submit 으로 post 방식으로 전송한다
  • form의 method: 데이터를 전송할 HTTP 방식 (GET/POST 등)을 지정한다
  • label의 for: 어떤 input과 연결되는지를 지정한다 (접근성 ↑)
  • input의 id: 해당 input을 고유하게 식별하는 값
  • input의 name: 서버에서 받을 때 사용할 파라미터 이름
  • required: 해당 입력 필드가 반드시 입력되어야 함을 의미
  • button type=”submit”: 폼 데이터를 action에 지정된 경로로 전송한다
<!-- 텍스트 입력 -->
<input type="text" placeholder="이름을 입력하세요">

<!-- 이메일 -->
<input type="email" placeholder="email@example.com">

<!-- 숫자 -->
<input type="number" min="1" max="100">

<!-- 날짜 -->
<input type="date">

<!-- 체크박스 -->
<input type="checkbox" id="agree" name="agree">
<label for="agree">동의합니다</label>

<!-- 라디오 버튼 -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">남성</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여성</label>

<!-- 파일 업로드 -->
<input type="file" accept="image/*">

다양한 파일 입력을 할 수 있도록 태그들이 많이 있다(다 외우지 말고 그때그때 필요한 걸 검색해서 쓰자).

Semantic Tag

시맨틱 태그는 태그 이름 그 자체에 의미가 있는 태그를 말한다. 예를들어서 div 태그는 그냥 의미가 없는 태그인 단순 영역 구분이다.

하지만 다음 태그들은 다음 의미를 가진다:

  • header: 머리말, 제목 영역
  • nav: 네비게이션 링크들 나열한 영역(nav 태그 안에는 무조건 ul, ol 이 들어가야 함)
  • section: 주제별 콘텐츠 그룹
  • main: 이 문서에서 제일 주요한 콘텐츠
  • article: 독립된 콘텐츠
  • aside: 부가 콘텐츠(사이드 바)
  • address: 연락 정보

전형적인 HTML 구조는 다음과 같다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>시맨틱 구조</title>
</head>
<body>
    <header>
        <h1>사이트 제목</h1>
        <nav>
            <ul>
                <li><a href="#home">홈</a></li>
                <li><a href="#about">소개</a></li>
                <li><a href="#contact">연락처</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>메인 섹션</h2>
            <article>
                <h3>글 제목</h3>
                <p>글 내용...</p>
            </article>
        </section>

        <aside>
            <h3>사이드바</h3>
            <p>관련 링크나 광고</p>
        </aside>
    </main>

    <footer>
        <address>
            연락처: example@email.com
        </address>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

멀티미디어 태그

영상

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    브라우저가 video 태그를 지원하지 않습니다.
</video>

<!-- 자동 재생, 음소거, 반복 -->
<video autoplay muted loop>
    <source src="background.mp4" type="video/mp4">
</video>

오디오

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    브라우저가 audio 태그를 지원하지 않습니다.
</audio>

Search Engine Optimization

검색이 잘되기 위한 문서는 SEO HTML 구조 표준을 짜야 한다. 구조는 물론 위와 같이 Semantic 하게 가져가야 한다.

  1. 메타 태그 필요
    • title: 검색 엔진 결과의 제목
    • <meta name="description"> : 검색결과에 보이는 설명
    • <meta name="keywords"> : (지금은 큰 영향 없음)
    • Open Graph 필요
  2. h1 은 딱 한 번만
  3. 이미지에는 무조건 alt 속성 달기
  4. 링크(anchor) 는 의미 있는 텍스트로
  5. 중복 콘텐츠 피하기

등등 이 있다. 더 많은 태그를 알고 싶으면 그때그때 검색하면서 배우는게 좋다.