[HTML]웹 개요와 실습 환경 구축

 

1. 인터넷과 웹 시작

1.1 인터넷이란?

• 전 세계 컴퓨터 및 스마트폰 같은 디지털 기기가 서로 연결된 국제 정보통신망
• 모든 기기들이 데이터를 공유하고 소통하는 정보 교환 네트워크

1.2 웹이란?

• 인터넷 공간에서 제공되는 대표적인 서비스
• 브라우저를 통해 HTML로 작성된 웹페이지를 탐색하고 이용하는 방식
• 이메일, FTP도 인터넷 서비스지만, "웹"은 HTML 기반 서비스만 지칭

1.3 인터넷과 웹의 역사

연도	주요 사건
1969	미국 국방성 ARPA 주도로 ARPANET 개발 (인터넷 시초)
1991	팀 버너스리, 월드와이드웹(WWW) 발표
1993	웹 소스코드 공개 (웹 기술 대중화 시작)
1995	인터넷 상용화 및 웹 서비스 폭발적 성장

 

✅ 핵심 요점 정리

구분	내용
인터넷	물리적 네트워크 (디지털 기기 연결)
웹	인터넷 위 HTML 기반 서비스
표준화 기구	W3C (World Wide Web Consortium)

---

2. 웹브라우저 전쟁과 웹표준

2.1 웹 표준이란?

• 웹페이지가 브라우저 종류와 상관없이 동일하게 보이도록 정한 국제 규칙
• 표준화 기구: W3C

2.2 웹 브라우저 전쟁

시기	주요 내용
1990년대	넷스케이프 vs 인터넷 익스플로러, 독자 기능 경쟁
2000년대	비표준 기능 남발로 크로스브라우징 이슈 심각
현재	크롬 중심으로 표준 준수 환경 정착

2.3 브라우저 환경 변화

• 각 브라우저는 전용 기능 추가 → 비표준 웹페이지 난립
• 웹 표준 준수 요구 증가 → W3C 표준 적극 반영
• 크롬웹스토어, 모질라 마켓플레이스 등 브라우저 기반 앱스토어 등장

✅ 핵심 요점 정리

구분	내용
표준화 주체	W3C
주요 브라우저	크롬, 파이어폭스, 사파리
핵심 키워드	웹 표준 준수, 크로스 브라우징

---

3. 웹 동작

3.1 요청과 응답 흐름

단계	설명
요청(Request)	브라우저가 URL 요청 전송
응답(Response)	서버가 HTML, CSS, 이미지 등 제공
렌더링	브라우저가 응답 받은 내용을 화면에 표시

 

3.2 클라이언트와 서버 역할

구분	역할	설명
클라이언트	요청	브라우저에서 웹페이지 요청
서버	응답	요청에 맞는 HTML·CSS·이미지·JS 제공

3.3 URL의 역할

• 웹상의 특정 자원 위치를 가리키는 주소
• URL 구성 요소: 프로토콜 + 도메인 + 경로 + 쿼리

✅ 핵심 요점 정리

항목	내용
요청 주체	클라이언트(브라우저)
응답 주체	서버
응답 데이터	HTML, CSS, 이미지, JS 등
URL 역할	각 자원 식별 주소

 

---

4. 웹 표준기술과 HTML5 주요기능

4.1 웹 표준기술 구성

구성 요소	역할
HTML5	문서 구조화 및 콘텐츠 작성
CSS3	스타일 및 레이아웃 설정
ECMAScript	동적 기능 구현 (JS 표준)

4.2 HTML5의 의미

구분	설명
넓은 의미	HTML5 + CSS3 + ECMAScript 전체를 포함하는 웹표준 기술
좁은 의미	마크업 언어로서의 HTML5 자체

4.3 HTML5 주요 기능

기능	설명
멀티미디어	플러그인 없이 오디오·비디오 재생
그래픽	벡터 그래픽(SVG), 래스터 그래픽(Canvas) 지원
실시간 통신	웹소켓 통한 양방향 통신 지원
장치 접근	위치, 배터리 등 장치 정보 접근
오프라인 지원	캐시 통해 네트워크 없이 앱 구동
시맨틱 태그	의미 있는 태그 (`<header>`, `<article>` 등) 추가

 

✅ 핵심 요점 정리

항목	내용
HTML5	문서 구조 및 콘텐츠 구성
CSS3	디자인 및 레이아웃 정의
ECMAScript	동적 기능 구현
주요 기능	멀티미디어, 그래픽, 실시간 통신, 오프라인 지원 등

---

5. 실습 환경 구축

5.1 필수 프로그램

프로그램	설명
VS Code	대표 무료 에디터
Chrome	웹 표준 지원 우수 브라우저

5.2 VS Code 필수 확장팩

확장팩명	역할
Korean Language Pack	한글화
Material Icon Theme	파일·폴더 아이콘 설정
Auto Rename Tag	HTML 태그 자동 매칭
Prettier	코드 정리 자동화
Live Server	실시간 미리보기 지원

5.3 Prettier 설정 예시

{
    "editor.defaultFormatter": "esbenp.prettier-vscode", // Prettier
    "editor.formatOnSave": true, // 저장 시 자동 정리
    "prettier.singleQuote": true // 작은따옴표 사용
}

5.4 D2Coding 폰트 설정

• 네이버가 배포하는 개발자 전용 폰트
• 가독성 우수, 코드 가독성 개선
• 설치 방법:
  1. D2Coding 폰트 다운로드
  2. 최신 ZIP 파일 다운로드 및 압축 해제
  3. 폰트 설치 후 VS Code 설정 변경

✅ 핵심 요점 정리

항목 추천	도구/설정
에디터	VS Code
브라우저	Chrome
필수 확장팩	Korean Pack, Prettier, Live Server
개발자 폰트	D2Coding

---

📚 참고자료

• HTML5 웹 프로그래밍 입문 4판 (김성윤 저, 한빛미디어)