(09.18) Front 기초 - 웹 역사와 HTML, 개발 환경 구축, Node.js, html 주요태그

[ 6주차 - 0918 ]

    금일 커리큘럼
        ├ 09:00 ~ 12:00 FrontEnd (웹 역사와 HTML, 개발 환경 구축)
        └ 13:00 ~ 18:00 FrontEnd (Node.js, html 주요태그)

1. 웹 역사와 HTML

웹 역사

1969년: 미국 국방성에서 ARPANET 개발 → 현재 인터넷의 시초
1989년: 팀 버너스 리, 월드 와이드 웹(WWW) 제안
- 문서와 문서를 연결하는 하이퍼링크(HyperLink) 개념 도입
1991년: 월드 와이드 웹 최초 배포
1993년: 소스 코드 공개 → 전 세계 확산
1차 브라우저 전쟁 (1996~2008)
- 넷스케이프(Netscape) vs 인터넷 익스플로러(IE) 에서 IE 승리
2차 브라우저 전쟁 (2009 ~ 2015)
- 크롬, 파이어폭스 등 브라우저 등장
- 크롬이 시장 점유
현재
- IE 지원 종료 very good
- 다양한 브라우저 공존 → 웹 표준 중심 발전

HTML이란?

HTML (HyperText Markup Language)
웹 페이지를 만들기 위한 표준 마크업 언어
웹 문서의 뼈대(구조) 제공
CSS(디자인), JS(동작) 결합하여 완전한 웹 페이지 구현
프로그래밍 언어는 아님 (논리·연산보다는 구조 표현이 목적)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>브라우저 탭의 타이틀</title>
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>이것은 HTML 문서의 예시입니다.</p>
  <a href="https://www.google.com" target="_blank">새창 이동</a>
</body>
</html>

HTML5

등장 배경
- 기존 HTML은 단순한 문서 마크업에 한정 → 멀티미디어, 애플리케이션 지원 부족
- Flash, Silverlight 같은 외부 플러그인 의존 문제 발생
HTML5 등장
- HTML을 단순 마크업 언어에서 웹 애플리케이션 플랫폼으로 확장 (DOM API 포함)
- Electron, Cordova 등으로 웹 기술 기반 앱 개발 가능
- W3C, WHATWG 등 국제 표준 기구에서 관리
HTML5 주요 특징
- 멀티미디어 지원: <video>, <audio> 태그 도입 → 플러그인 불필요
- 그래픽 지원: <canvas>, <svg>로 2D 그래픽·애니메이션 가능
- 시맨틱 태그: <header>, <footer>, <article>, <section> 등 문서 구조를 의미적으로 표현
- 폼기능 강화: input 타입의 email, date, number 등 추가
- 저장소 기능: LocalStorage, SessionStorage, IndexedDB 지원되어 클라이언트 데이터 저장 가능
- 새로운 API: Drag & Drop, History API 등 제공

2. 개발 환경 구축

사전 준비

vscode(IDE) : https://code.visualstudio.com/
nvm-window : https://github.com/coreybutler/nvm-windows/releases
- nvm(node version manager) = node.js의 버전관리 도구
- assets 내 nvm-setup.zip 파일
- 설치 후 cmd 관리자에서 nvm -v 실행 후 설치 확인

Node.js 설치

nvm으로 설치 방식

# node 설치 가능 버전 목록 (LTS쪽 권장)
nvm list available
# nvm install {버전명}
nvm install 20.14.0

# 설치 후 확인
nvm ls
node -v

공식 사이트 설치 방식
- 다운로드 : https://nodejs.org/ko/download

Node.js 설치하는 이유

Node.js 웹 개발에 필요한 모든 개발 도구의 기반 환경 제공

자바스크립트 실행 환경 제공
- 원래 js는 브라우저에서만 동작
- Node.js는 크롬 V8 엔진 기반으로 브라우저 밖(로컬 PC, 서버)에서도 js 실행 가능
- 즉, 백엔드 개발이나 로컬 개발 도구 실행이 가능해짐
개발 도구(툴체인) 사용
- 현대 웹 개발은 단순 html,css,js 작성만으로 끝나지 않음
- 프론트엔드 프레임워크(Vue, React, Angular) 역시 Node.js 환경 필요
서버 개발
- Node.js 자체가 비동기 이벤트 기반 서버 프레임워크 역할 가능
- Express.js 같은 프레임워크로 REST API 서버 개발 가능
- 한 가지 언어(JS)로 프론트엔드 + 백엔드 모두 개발 가능 (Full-Stack 개발에 유리)

node 기반 개발 서버 설정

# 설정할 프로젝트에 cd 경로 접근 후

# 초기 세팅인 경우
npm init -y
# 개발 서버 설치
npm install lite-server --save-dev

# ---

# 이미 package.json 있는 경우
npm install

package.json 내용 일부 수정

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

수정 후 실행

# 로컬서버 시작
npm start

# 서버종료시 ctrl + c

최상위 루트 내 index.html 기준으로 첫 화면 나타남

3. html 주요 태그

head 부분

기본 골격

<head>
    <!-- 문자 인코딩 -->
    <meta charset="UTF-8">

    <!-- 반응형 웹 디자인 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 문서 제목 -->
    <title>페이지 제목</title>
</head>

SEO 관련 메타

<!-- 페이지 설명 -->
<meta name="description" content="HTML 기초를 학습하는 페이지입니다.">

<!-- 키워드 -->
<meta name="keywords" content="HTML, HTML5, 웹개발, 프론트엔드">

<!-- 저자 -->
<meta name="author" content="홍길동">

소셜미디어

<!-- Open Graph 메타 태그 -->
<meta property="og:title" content="HTML 기초 학습">
<meta property="og:description" content="HTML의 기본을 배워봅시다">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

시맨틱 레이아웃

<!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>
    <div class="logo">
        <a href="" title="000 홈으로 이동">
            <img src="" alt="사이트제목">
        </a>
        <h1>사이트 제목</h1>
    </div>
</header>

<main>
    <aside>
        <h3>사이드바</h3>
        <p>관련 링크나 광고</p>
        <nav>
            <ul>
                <li><a href="#home">side-menu1</a></li>
                <li><a href="#about">side-menu2</a></li>
                <li><a href="#contact">side-menu3</a></li>
            </ul>
        </nav>
    </aside>
    <section>
        <h2>메인 섹션1</h2>
        <article>
            <h3>글 제목</h3>
            <p>글 내용...</p>
        </article>
    </section>
    <section>
        <h2>메인 섹션2</h2>
        <article>
            <h3>글 제목</h3>
            <p>글 내용...</p>
        </article>
    </section>
</main>

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

엘리먼트

텍스트형

<h1>제목 1</h1>
<h2>제목 2</h2> <!-- ~ h6 까지 -->
<p>단락(Paragraph)입니다.</p>
<span>인라인 텍스트</span>
<strong>굵은 텍스트</strong>
<em>기울임 텍스트</em>
<br> <!-- 줄바꿈 -->
<hr> <!-- 구분선 -->

목록형

<!-- 순서 없는 목록 -->
<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>포도</li>
</ul>

<!-- 순서 있는 목록 -->
<ol>
  <li>첫 번째</li>
  <li>두 번째</li>
  <li>세 번째</li>
</ol>

<!-- 정의 목록 -->
<dl>
  <dt>HTML</dt>
  <dd>웹 페이지 구조를 정의하는 마크업 언어</dd>
  <dt>CSS</dt>
  <dd>웹 페이지의 스타일을 정의하는 언어</dd>
</dl>

테이블

<table border="1">
    <caption>시간표</caption>
    <thead>
        <tr>
        <!-- scope="col" : (접근성) 열 헤더(세로 방향으로 연결) -->
            <th scope="col">요일</th>
            <th scope="col">1교시</th>
            <th scope="col">2교시</th>
            <th scope="col">3교시</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <!-- scope="row" : (접근성) 행 헤더(가로 방향으로 연결) -->
            <th scope="row">월요일</th>
            <td>국어</td>
            <td>수학</td>
            <td>영어</td>
        </tr>
        <tr>
            <th scope="row">화요일</th>
            <!-- colspan="2" : 가로로 2칸(1교시, 2교시) 합침 -->
            <td colspan="2">체육</td>
            <td>과학</td>
        </tr>
        <tr>
            <!-- rowspan="2" : 세로로 2칸(아래 행까지) 합침 -->
            <th scope="row" rowspan="2">수요일</th>
            <td>국어</td>
            <td>사회</td>
            <td>미술</td>
        </tr>
        <tr>
            <!-- colspan="3" : 가로로 3칸(1~3교시) 합침 -->
            <td colspan="3">실험 수업</td>
        </tr>
    </tbody>
</table>

입력 타입들

<!-- 텍스트 입력 -->
<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/*">

<!-- 텍스트 영역 -->
<textarea rows="4" cols="50" placeholder="내용을 입력하세요"></textarea>

<!-- 선택 상자 -->
<select name="city">
    <option value="">도시를 선택하세요</option>
    <option value="seoul">서울</option>
    <option value="busan">부산</option>
    <option value="daegu">대구</option>
</select>

폼 필드 예시

<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>

    <!-- 라디오 버튼 -->
    <p>성별:</p>
    <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>

    <!-- 체크박스 -->
    <p>관심사:</p>
    <input type="checkbox" id="sports" name="interest" value="sports">
    <label for="sports">스포츠</label>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">음악</label>

    <!-- 선택박스 -->
    <label for="city">도시 선택:</label>
    <select id="city" name="city">
    <option value="seoul">서울</option>
    <option value="busan">부산</option>
    <option value="daegu">대구</option>
    </select>

    <!-- 버튼 -->
    <button type="submit">제출</button>
    <button type="reset">초기화</button>
</form>

etc.

폼 관련 설명

form : 사용자 입력값을 서버로 전송하는 역할

<form action="" method="get">
    <p><label>아이디</label><input type="text" name="id"></p>
    <p><label>비밀번호</label><input type="password" name="password"></p>
    <p><input type="submit" value="로그인"></p>
</form>

폼 속성 설명

action : 전송할 목적지 URL을 지정 (빈값 : 자기자신)
method
- get : URL에 데이터 포함 (주소에서 ? 뒤로 해당인풋name과 입력값 노출)
- post : HTTP body에 데이터 포함 (주소창에는 안 보임)

'멋사 - 부트캠프 19기 : Java > FrontEnd' 카테고리의 다른 글

(09.25 ①) Front 기초 - DOM 개념, 요소 선택, 요소 제어, 이벤트 처리 (0)	2025.09.25
(09.24) Front 기초 - JS 배열 메서드, 객체 순회, 클래스, 프로토타입, 비동기 (0)	2025.09.24
(09.23) Front 기초 - JS 개념, 변수, 타입, 연산, 함수, 객체, 배열 (0)	2025.09.23
(09.22) Front 기초 - css 크기 단위, display, position (0)	2025.09.22
(09.19) Front 기초 - CSS, CSS 선택자, cascading (0)	2025.09.19

(09.18) Front 기초 - 웹 역사와 HTML, 개발 환경 구축, Node.js, html 주요태그

[ 6주차 - 0918 ]

1. 웹 역사와 HTML

웹 역사

HTML이란?

HTML5

2. 개발 환경 구축

사전 준비

Node.js 설치

Node.js 설치하는 이유

node 기반 개발 서버 설정

3. html 주요 태그

head 부분

시맨틱 레이아웃

엘리먼트

etc.

폼 관련 설명

'멋사 - 부트캠프 19기 : Java > FrontEnd' 카테고리의 다른 글

티스토리툴바