프로그래밍 언어
1. 과목 소개 및 학습 목표
- 과목명: 웹 클라이언트 프로그래밍
- 과목 개요:
- 웹의 기본 개념
- HTML5
- CSS3
- 자바스크립트
등 웹 애플리케이션 개발에 필요한 핵심 기술을 다룹니다.
- 학습 목표:
- 상 (上): 전체적인 내용과 세부 내용을 모두 이해하고, 강의 예제를 응용하여 스스로 웹 애플리케이션을 프로그래밍할 수 있습니다.
- 중 (中): 전체적인 내용과 세부 내용을 일부 이해하며, 강의 예제의 일부를 프로그래밍할 수 있습니다.
- 하 (下): 전체적인 흐름을 이해하고, 강의 예제를 대략적으로 이해하며, 웹 언어의 종류와 역할을 이해할 수 있습니다.
- 과목 맵:
- 기초:
- 웹과 HTML5
- HTML5 기본 요소
- 멀티미디어와 입력양식
- 자바스크립트 기초
- 자바스크립트 객체
- DOM과 이벤트 처리
- 심화:
- CSS3 스타일 시트
- CSS3 박스모델
- CSS3 레이아웃
- 자바스크립트 고급 기술
- jQuery
- Ajax
- JSON
- HTML5 고급 기능
- 모바일 웹
- 도형 그리기와 애니메이션
- 기초:
2. 웹의 기초
2.1. 인터넷과 웹
인터넷: 컴퓨터로 연결하여 TCP/IP(Transmission Control Protocol/Internet Protocol)라는 통신 프로토콜을 이용해 정보를 주고받는 컴퓨터 네트워크
초기 인터넷은 텔넷, FTP, 전자 메일, 유즈넷 등을 통해 파일 전송, 원격 접속, 전자 우편, 뉴스 등을 제공했습니다.
WWW (World Wide Web): 인터넷을 통해 하이퍼텍스트와 이미지를 전송하여 모든 서비스를 제공하는 정보 시스템
흔히 웹(웹 시스템) 이라 불리며, "전 세계를 뒤덮는 거미줄"과 같습니다.
WWW의 동작 원리
- 웹 클라이언트: 인터넷에 연결된 웹 서버로부터 HTML 문서를 받아서 웹 브라우저의 화면에 웹 페이지를 표시(사용자, 단말기)
- 웹 서버: HTML로 작성된 웹 페이지를 저장하고 있음(제공자, 서버)
- 웹 서버는 웹 문서, 이미지, 사운드, 비디오 등을 저장하고 클라이언트 컴퓨터의 요청을 기다렸다가 응답을 보냅니다.
- 웹 서버와 웹 클라이언트 간의 표준 통신 방법은 TCP/IP 통신 프로토콜의 HTTP 통신 프로토콜입니다.
프론트 엔드와 백 엔드
- 프론트 엔드 개발: 사용자가 보게 될 웹 사이트의 요소와 기능을 개발 (클라이언트 측). HTML, CSS, 자바스크립트 등 사용
- 백 엔드 개발: 사용자가 볼 수 없는 웹 사이트 후면을 개발 (서버 측). PHP, C++, Java, Python, Node.js 등 사용
- 풀 스택(Full Stack) 개발자: 프론트 엔드와 백 엔드 개발을 모두 할 수 있는 개발자
HTML (Hyper Text Markup Language): 웹 페이지를 표현하기 위한 언어로 텍스트에 태그를 붙여서 기술하는 마크업 언어
HTML 문서에 자바스크립트, CSS 등 신기술이 추가되며 복잡한 웹 페이지 작성이 가능해졌습니다.
웹 브라우저의 역할: HTML 문서를 해석하여 웹 페이지를 화면에 출력해 줌
HTML의 역사
- 1990년 팀 버너스리(Tim Berners-Lee)에 의해 개발
- CERN(유럽원자핵공동연구소) 연구자들이 문서를 공유할 수 있는 시스템 ENQUIRE 제안 및 프로토타입 개발
W3C (World Wide Web Consortium): 1994년에 창립된 국제 단체로, 웹에 대한 표준안을 만드는 국제적인 웹 표준화 단체
HTML 버전
- HTML1 (1991)
- HTML2 (1995, IETF 표준)
- HTML3 (1997, W3C 공개)
- HTML4 (1997)
- HTML5 (2014, WHATWG 발표)
2.2. HTML5
HTML5: 1999년 HTML 4.01 이후 웹의 발전에 따라 필요한 새로운 규격으로, 많은 새로운 기능과 API를 포함
HTML5의 특징
- 완전한 CSS3 지원
- 비디오와 오디오 지원
- 2D/3D 그래픽 지원
- 로컬 저장소 지원
- 로컬 SQL 데이터베이스 지원
- 웹 애플리케이션 지원
HTML5의 역사
- W3C가 XHTML 2.0을 개발 중이었으나, Apple, Google, Mozilla, Opera 등이 2004년 WHATWG 설립
- 2006년 두 단체가 협력하여 HTML5 제안, 2009년 W3C가 XHTML 2.0 포기 후 HTML5가 차세대 규격으로 자리매김
HTML5의 개발 원칙
- HTML, CSS, DOM, JavaScript 기술에 기반
- 플래시 등 외부 플러그인 최소화
- 오류 처리 향상
- 스크립팅 대체 마크업 증가
- 장치 독립적 설계
- 개발 과정 투명하게 공개
네이티브 앱과 웹 앱
- 네이티브 앱: 실행 속도 빠름, 플랫폼별 제 작 필요, 앱 마켓 배포, 오프라인 사용 가능, 하드웨어 활용 유리
- 웹 앱: 실행 속도 느릴 수 있음, 하나의 버전으로 모든 플랫폼에서 실행, 배포 필요 없음, 즉시 변경 가능, 일부 오프라인 기능 지원
HTML5 + CSS3 + Javascript
- HTML5: 웹 페이지의 내용 구성
- CSS3: 웹 페이지의 스타일 지정
- Javascript: 웹 페이지의 상호 작용 처리
HTML의 과거와 현재
- HTML5 이전: 비디오/오디오 재생에 플래시, 실버라이트 등 외부 플러그인 필요
- HTML5:
<audio>,<video>태그로 자체 미디어 재생 지원 <canvas>요소로 2D/3D 그래픽, SVG(벡터 그래픽스), MathML(수식), WebGL 3D(3차원 그래픽) 등 지원
HTML5의 새로운 API
<canvas>요소(2차원 그래픽)- 미디어 재생 기능
- 오프라인 웹 애플리케이션
- 드래그 앤 드롭
- 웹 스토리지(Web storage)
- 위치 정보(geolocation)
- 웹 SQL 데이터베이스
- 파일 API
- 웹 소켓(Web Socket) API 등
2.3. 웹 브라우저
웹 브라우저의 목적: HTML 문서를 해석하여 웹 페이지를 화면에 표현(출력)하는 것
주요 웹 브라우저
- 엣지(Edge): 마이크로소프트가 만든 웹 브라우저
- 구글 크롬(Google Chrome): 2008년 발표, 빠른 실행 속도, 단순성, 자동 업데이트, 안드로이드 기본 내장
- 파이어폭스(Firefox): 모질라 재단의 오픈소스, 탭 브라우징·플러그인 개념 도입, 사용자 수정 가능
- 오페라(Opera): 오페라 소프트웨어 개발, 터보 모드(압축 프록시), 메일 클라이언트, 비트 토렌트 등 통합 기능
3. HTML의 구조와 문서 작성
3.1. HTML의 기본 구조
HTML: 인터넷 웹 브라우저(엣지 등)에 텍스트나 그림을 표시해 주는 가장 기초적인 마크업 언어
- Hyper Text: 글자나 그림에 링크를 설정하여 원하는 정보로 이동할 수 있도록 하는 기능
- Markup: 정보를 쉽게 찾기 위해 제목, 소제목, 본문 등에 따라 글씨의 크기, 폰트, 색상 등을 다르게 지정하는 조판 기능
HTML 문서 작성 및 실행
- HTML로 작성된 문서는 보통
.htm또는.html확장자로 저장합니다. - 실행 방법:
- 개인 컴퓨터에서 HTML 파일을 더블 클릭하여 실행
- 웹 서버에 HTML 파일을 업로드 후 URL을 통해 실행
HTML 기본 구성 요소
- 태그(tag): HTML 문서에서 특정한 의미를 가지는 요소를 정의하는 마크업. 보통
<태그명>내용</태그명>형태로 사용 - 속성(attributes): 태그에 추가 정보를 제공하는 이름-값 쌍 (예:
color,face,size) - 속성값(value): 속성에 지정하는 실제 값 (예:
color="blue")
예시:
<font color="blue" face="굴림" size="2">파란색 글씨</font>
위 예시에서
<font>는 태그,color,face,size는 속성, 각각의 값은 속성값입니다.
태그(tag) 는 항상 여는 태그(<font>)와 닫는 태그(</font>)로 구성되며, HTML5에서는 의미론적 태그(<header>, <nav>, <section>, <footer> 등) 사용이 권장됩니다.
참고:
<font>태그는 HTML5에서 더 이상 권장되지 않으며, 스타일 지정은 CSS를 사용하는 것이 표준입니다.