📘1강 - 웹의 개요와 구성

웹프로그래밍 기초 - HTML5 완벽 정리 📚

🎯 학습 목표

이번 포스팅에서는 웹프로그래밍의 기초가 되는 다음 내용들을 다뤄보겠습니다:

• ✅ 웹의 기본 개념과 구조 이해
• ✅ 웹 서버와 웹 브라우저의 상호 관계 파악
• ✅ 웹 문서와 전자 문서의 차이점 분석
• ✅ HTML, CSS, JavaScript 3요소 이해
• ✅ HTML5의 목적과 기능 학습
• ✅ HTML5 웹 페이지 작성 과정 및 필요 도구 파악

---

🌐 웹의 기본 개념

웹의 기본 목적

웹(Web)의 기본 목적은 다른 여러 컴퓨터에서 문서를 공유하거나 보는 것입니다. 이때 웹에서 다루는 문서를 웹 문서라고 부릅니다.

웹의 구조

• World Wide Web: 인터넷을 활용하여 거미줄처럼 연결된 정보 소통 망
• 네트워크 시스템: 웹 문서를 인터넷 상의 컴퓨터들끼리 주고받는 시스템

웹의 구성 요소

🖥️ 웹 서버

• 웹 사이트를 탑재하는 컴퓨터 (예: Google, Naver)
• 웹 문서, 이미지, 동영상 등의 데이터 저장 및 관리
• 웹 클라이언트의 요청을 받아 웹 문서 전송
• 웹 서버로 작동하도록 하는 소프트웨어 실행

💻 웹 클라이언트

• 사용자 인터페이스 담당
• 웹 서버에 웹 문서를 요청하고 받아 사용자에게 출력

---

🌍 인터넷과 웹의 차이

인터넷

• 웹의 개념이 나오기 전부터 만들어진 컴퓨터 연결 네트워크
• 1969년 미국 국방성 고등 연구 계획국(ARPA)에서 시작
• 여러 대학들과 계약 업체 사이의 컴퓨터 연결
• 컴퓨터마다 고유한 주소(IP 주소) 부여

인터넷 활용 서비스

• 📧 전자우편(e-mail)
• 📰 뉴스(news)
• 📁 파일 전송(ftp)
• 💬 채팅(Internet Relay Chat)
• 📱 메신저(Messenger)
• 🔄 P2P(Peer to Peer)
• 📺 스트리밍 서비스
• ☎️ 인터넷 전화기
• 🌐 월드 와이드 웹(WWW)

핵심 개념: 인터넷이 고속도로라면, 웹은 고속도로 망을 이용한 물류 산업입니다!

---

🌟 웹 브라우저의 역사

주요 웹 브라우저 발전사

• 1990 - WorldWideWeb (최초의 웹 브라우저)
• 1993 - Mosaic
• 1994 - Netscape Navigator (GUI를 갖춘 최초의 브라우저)
• 1995 - Internet Explorer (마이크로소프트 개발)
• 1996 - Opera (작고 빠른 브라우저)
• 2002 - Mozilla Firefox (W3C 표준안에 가장 충실)
• 2003 - Safari (애플 개발)
• 2008 - Chrome (구글 개발, 현재 가장 많이 사용)
• 2015 - Microsoft Edge (Internet Explorer 후속)

---

🔧 웹 사이트 구축

웹 사이트를 구축하려면 다음 요소들이 필요합니다:

웹 서버 소프트웨어

• Apache - Apache 사에서 개발
• IIS - 마이크로소프트 사에서 개발 (Windows NT 전용)
• nginx - NGINX 사에서 개발
• GWS - 구글에서 개발 (Google Web Server)

웹 서버 응용프로그램 개발 언어

• 🔸 서버용 JavaScript
• 🔸 JSP (Java Server Page)
• 🔸 Java (서블릿)
• 🔸 C/C++
• 🔸 PHP, Perl, Python 등

---

📄 웹 문서 vs 전자 문서

전자 문서

• 워드, 한글, 메모장 등으로 작성
• 하나의 문서는 보통 하나의 파일로 저장
• 텍스트, 이미지, 오디오, 비디오를 모두 문서 내에 직접 저장

웹 문서

• HTML 언어로 작성, 웹 브라우저로 보기
• 페이지 단위로 파일에 분할하여 저장
• 각 페이지는 하이퍼링크로 연결
• 텍스트만 저장, 이미지/동영상은 별도 파일로 저장
• 사용자가 하이퍼링크를 따라 웹 페이지 선택 (네비게이션)

---

🔗 URL 구조 이해

http://www.oracle.com:80/technetwork/java/index.html

• 프로토콜: HTTP, HTTPS, file, ftp 등
• 서버주소: 웹 페이지를 가진 컴퓨터의 인터넷 주소
• 포트번호: 서버가 브라우저 접속을 기다리는 번호 (HTTP는 80)
• 경로명: 웹 서버 내 웹 페이지 파일의 폴더 경로
• 파일이름: 웹 페이지의 HTML 파일 이름

---

⭐ 웹의 3대 요소

웹 페이지는 다음 3가지 요소로 구성됩니다:

1. HTML 📝

• 웹 페이지의 구조와 내용 담당
• 태그를 사용하여 문서 구조 정의

2. CSS 🎨

• 웹 페이지의 모양과 스타일 담당
• 색상, 레이아웃, 폰트 등 디자인 요소

3. JavaScript ⚡

• 웹 페이지의 행동 및 응용 프로그램 담당
• 사용자 인터랙션과 동적 기능 구현

분리 개발의 장점

<!-- HTML: 구조 -->
<h3>Elvis Presley</h3>
<span>Love Me Tender</span>

<!-- CSS: 스타일 -->
<style>
h3 { color: darkred; text-align: center; }
span { color: blue; font-size: 20px; }
</style>

<!-- JavaScript: 기능 -->
<script>
function show() {
    document.getElementById("fig").src = "ElvisPresley.png";
}
</script>

---

🚀 HTML5의 등장

HTML5가 필요한 이유

1. 비표준 기술의 혼재

• Active-X, 플러그인, 플래시 등 비표준 기술 난립
• 브라우저 간 심각한 비호환성 문제

2. 인터넷 기기의 다양화

• PC, 모바일, 태블릿 등 다양한 기기에서 웹 사용
• 기존 웹 페이지가 모바일 기기에서 제대로 작동하지 않음

3. 새로운 범용 웹 표준의 필요성

• 모바일과 PC에서 동시에 사용할 수 있는 표준 필요

HTML5 표준의 특징

• ✅ W3C와 WHATWG에서 표준 제정
• ✅ 플랫폼이나 장치 의존성 제거
• ✅ Active-X, 플래시 불필요
• ✅ 웹 애플리케이션 작성 지원

---

🛠️ HTML5의 주요 기능

웹 문서 작성 기능

• 📝 웹 폼(Web Form) - 사용자 입력 처리
• 🎵 오디오, 비디오 - 멀티미디어 지원
• 🎨 Canvas - 그래픽 그리기
• 📊 SVG - 벡터 그래픽

웹 애플리케이션 기능

• 💾 웹 스토리지 - 클라이언트 데이터 저장
• 🗄️ 웹 SQL 데이터베이스 - 로컬 데이터베이스
• 📁 파일 입출력 - 파일 처리
• 📍 위치 정보 API - GPS 정보 활용
• ⚡ 웹 워커 - 백그라운드 스크립트
• 🔌 웹 소켓 - 실시간 통신
• 📴 오프라인 웹 애플리케이션 - 인터넷 없이도 동작

---

💻 HTML5 개발 도구

텍스트 편집기

• 메모장, 한글, 워드 등 아무 텍스트 편집기 사용 가능
• .html 확장자로 저장
• UTF-8 문자셋 사용 필수

WYSIWYG 편집기

• Adobe Dreamweaver
• CoffeeCup
• FCKeditor
• 서브라임 텍스트 (추천)

개발자 도구 활용

• 크롬 브라우저 개발자 도구
• HTML/CSS/JavaScript 디버깅
• 중단점(Break Point) 설정 가능
• 실시간 코드 수정 및 테스트

---

📋 정리

웹프로그래밍의 기초를 다지기 위해서는:

1. 웹의 기본 구조를 이해하고
2. HTML, CSS, JavaScript의 역할을 파악하며
3. HTML5의 새로운 기능들을 활용할 수 있어야 합니다

다음 포스팅에서는 HTML5의 구체적인 태그들과 실습 예제를 다뤄보겠습니다!

👍 이 포스팅이 도움이 되셨다면 좋아요와 댓글 부탁드립니다!