기술연구

김경현 2020. 5. 29. 18:34

안녕하세요. 

 

기술이 공유되지 않으면 미래의 사회는 지금보다 더욱 폐쇄적이고 불평등한 사회가 될 것입니다. 카피레프트(copyleft)는 개인의 지적재산권을 중시하는 기존의 카피라이트(copyright)에 대항해 사회적 공유를 강조하는 정신이자 운동입니다.  DIY연구소는 카피레프트(copyleft) 정신과 4차 산업기술의 확산을 위하여 연구한 내용을 무료로 배포하고 있습니다. 오늘은 천인국 선생님의 '웹프로그래밍-HTML, CSS, JAVASCRIPT' 자료를 공유합니다.

 

☞ 웹프로그래밍-HTML, CSS, JAVASCRIPT 
☞ 웹프로그래밍-JSP 2.3 
☞ 웹프로그래밍-SPRING

 

 

 

[웹프로그래밍-HTML, CSS, JAVASCRIPT]

 

 

☞ Chapter 1. 기초 사항

 

01. 웹에 대한 기초 사항

02. HTML5

03. 웹 브라우저

04. HTML 편집기

05. 메모장으로 첫번째 HTML 문서 만들기

06. VS for web으로 첫번째 HTML 문서 작성하기

07. HTML 문서의 기본 구조

08. HTML 맛보기

09. 연습 문제

 

학습목표

 

WWW와 HTML에 대한 기본 지식을 학습한다.

HTML을 작성하고 테스트할 수 있는 환경을 구축한다.

메모장으로 HTML 프로그램을 작성하고 실행하여 본다.

VS for web으로 HTML 프로그램을 작성하고 실행하여 본다.

HTML 문서를 구성하고 있는 태그(tag)와 요소(element)에 대하여 이해한다.

 

 

01. 웹에 대한 기초 사항

 

인터넷 (Internet)

 

 

WWW (World Wide Web)

 

 

WWW 동작원리

 

 

웹 서버가 하는 일

 

 

HTML은 무엇인가?

 

 

웹 브라우저가 하는 일

 

 

HTML의 역사

 

 

W3C

 

 

HTML 버전

 

 

 

02. HTML5

 

HTML5의 역사

 

 

HTML5를 지원하는 브라우저

 

 

웹 애플리케이션 개발 가능

 

 

HTML5+CSS3+JavaScript

 

 

비디오, 오디오, 그래픽 지원

 

 

새로운 API 도입

 

 

 

03. 웹 브라우저

 

 

 

인터넷 익스플로러

 

 

구글 크롬

 

 

파이어폭스

 

 

오페라

 

 

 

04. HTML 편집기

 

UltraEdit

 

 

EditPlus

 

 

Visual Studio 

 

 

 

05. 메모장으로 첫번째 HTML 문서 만들기

 

 

 

 

 

 

 

 

 

06. VS for web으로 첫번째 HTML 문서 작성하기

 

 

 

07. HTML 문서의 기본 구조

 

요소(element)

 

요소 = (시작 태그 + 콘텐츠 + 종료 태그)

태그 이름은 대소문자 구별하지 않는다. <head> 와 <HEAD>는 같은 의미다.

하나의 요소안에 다른 요소가 포함될수 있다. 예로 <html> 요소 안에 <head> 요소 포함.

시작 태그와 종료 태그 사이의 연속된 공백은 하나의 공백으로 취급한다.

<p> 태그는 하나의 단락(paragraph)을 나타낸다.

<p> 요소의 경우, 종료 태그는 선택사항이나 생략하면 많은 경우 잘못된 결과를 생성한다.

<br>은 줄 바꿈(break)을 의미한다.

<br />과 같이 시작 태그에 슬래시를 추가하면 xhtml이나 xml에서 공백 요소를 종료한다.

웹사이트 대부분은 대문자 html 태그를 사용한다.

그러나 W3C는 html4에 소문자 태그를 권고하며 xhtml은 반드시 소문자를 사용해야 한다.

하나의 태그는 다른 태그 안에 포함될수 있지만 태그가 서로 교차하면 안된다.

 

 

속성(attribute)

 

html 요소는 속성(attribute)을 가질수 있다.

속성은 요소에 대한 추가적인 정보를 제공한다.

속성은 항상 시작 태그에 기술된다.

속성은 이름="값" 형태로 기술된다.

하이퍼 링크는 <a> 태그로 정의된다.

<a> 태그에서 링크 주소는 href라는 속성에 기술된다.

 

 

 

 

HTML 주석(comment)

 

 

<!DOCTYPE> 선언

 

 

 

08. HTML 맛보기

 

엡 페이지에서 마우스 오른쪽 버튼을 클릭하고 '소스보기'를 선택하면 현재 페이지의 html 코드가 표시된 새로운 창이 열린다.

 

 

 

09. 연습 문제

 

 

☞ Chapter 2. HTML5 기본 요소

 

01. 이번 장의 목표

02. 텍스트 표시

03. 리스트

04. 링크

05. 이미지

06. 테이블

07. 추가 예제

08. 연습 문제

 

☞ Chapter 3. HTML5 멀티미디어와 입력 양식

 

01. 웹 브라우저와 멀티미디어

02. 오디오

03. 비디오

04. iframe

05. <div>와 <span>

06. HTML 입력 양식

07. 입력 태그 #1

08. 입력 태그 #2

09. HTML5 입력 요소

10. 연습 문제

 

☞ Chapter 4. CSS3 스타일 시트 기초

 

01. CSS의 개념

02. 선택자

03. CSS를 삽입하는 방법

04. 색상

05. 폰트

06. 텍스트 스타일 설정

07. 연습 문제

 

☞ Chapter 5. CSS3 박스 모델과 응용

 

01. 박스 모델

02. 경계선

03. 마진과 패딩

04. 배경 설정하기

05. 링크 스타일

06. 리스트 스타일

07. 테이블 스타일

08. 연습 문제

 

☞ Chapter 6. CSS3 레이아웃과 애니메이션

 

01. 레이아웃의 기초

02. 요소 위치 정하기

03. <div> 요소를 이용한 레이아웃

04. 의미적 요소를 이용한 레이아웃

05. 효과

06. CSS3 변환

07. CSS3 3차원 변환

08. CSS3 애니메이션

09. 연습 문제

 

☞ Chapter 7. HTML과 CSS로 웹 사이트 만들기

 

01. 웹 사이트 작성

02. HTML 문서 작성하기

03. CSS 파일 작성하기

04. 완성된 페이지 보기

05. 연습 문제

 

☞ Chapter 8. 자바스크립트 기초

 

01. 자바스크립트의 소개

02. 자바스크립트의 용도

03. 자바스크립트의 위치

04. 문장

05. 변수

06. 자료형

07. 연산자

08. 숫자오 문자열 사이의 변환

09. 조건문

10. 반복문

11. 배열

12. 함수

13. 자바스크립트의 입출력

14. 연습 문제

 

☞ Chapter 9. 자바스크립트 객체

 

01. 객체

02. 객체 생성 및 사용

03. 프로토타입

04. 자바스크립트 내장 객체

05. Array 객체

06. 자바스크립트에서의 오류 처리

07. 연습 문제

 

☞ Chapter 10. DOM과 이벤트 처리, 입력 검증

 

01. 문서 객체 모델(DOM)

02. HTML 요소 찾기

03. HTML 변경하기

04. DOM 노드 삭제와 추가

05. 브라우저 객체 모델

06. 이벤트 처리

07. 폼의 유효성 검증

08. 연습 문제

 

☞ Chapter 11. 자바스크립트와 캔버스로 게임 만들기

 

01. 캔버스 요소

02. 도형의 속성

03. 도형 변환

04. 애니메이션

05. 게임 제작

06. 연습 문제

 

☞ Chapter 12. jQUERY, Ajax, JSON

 

01. jQUERY

02. 첫 번째 jQUERY 프로그램

03. jQUERY 문장의 구조

04. jQUERY를 이용한 이벤트 처리

05. jQUERY를 이용한 애니메이션 효과

06. jQUERY를 이용한 DOM 변경

07. jQUERY를 이용한 CSS 조작

08. Ajax 개요

09. jQUERY를 이용하여 Ajax 사용하기

10. JSON

11. 연습 문제

 

☞ Chapter 13. HTML5 위치 정보와 드래그와 드롭

 

01. SVG

02. 드래그와 드롭

03. HTML5 위치 정보

04. HTML5 웹 워커

05. 연습 문제

 

☞ Chapter 14. HTML5 웹 스토리지, 파일 API, 웹 소켓

 

01. HTML5 웹 스토리지

02. 파일 API

03. 애플리케이션 캐시

04. 웹 소켓

05. 서버 전송 이벤트

06. 연습 문제

 

☞ Chapter 15. JSP

 

01. JSP의 개요

02. 톰캣 설치

03. 첫 번째 JSP 프로그램

04. 기본적인 JSP

05. JSP 제어문

06. JSP 예제

07. MySQL

08. 데이터베이스 예제 : 온라인 서점

09. 게시판 작성

10. Ajax, jQuery와 JSP

11. 연습문제

 

☞ Chapter 16. 모바일 웹 페이지

 

01. 모바일 웹

02. 반응형 웹 디자인

03. jQuery Mobile

04. jQuery Mobile 실습

05. 모바일 웹 앱 예제

06. 연습 문제

 

 

 

사업자 정보 표시
| | | 사업자 등록번호 : -- | TEL : -- | 사이버몰의 이용약관 바로가기