기술연구

김경현 2020. 6. 4. 17:12

안녕하세요.

 

기술이 공유되지 않으면 미래의 사회는 지금보다 더욱 폐쇄적이고 불평등한 사회가 될 것입니다. 카피레프트(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. 연습 문제

 

☞ 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. 연습 문제

 

 

학습목표

 

오디오를 웹 페이지에 추가하는 방법을 살펴본다.

비디오를 웹 페이지에 추가하는 방법을 살펴본다.

<iframe> 태그에 대해 학습한다.

사용자가 서버로 데이터를 보낼 때 사용하는 입력 양식을 학습한다.

HTML5에 새롭게 추가된 여러 가지 입력 필드를 살펴본다.

 

 

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

 

 

02. 오디오

 

<audio src="old_pop.mp3" autoplay controls>

 

<audio> 요소

 

autoplay : 음악을 자동으로 생성한다.

controls : 오디오 재생을 제어하는 제어기를 표시한다.

loop : 오디오를 반복하여 재생한다.

preload : 자동으로 오디오를 미리 다운로드한다.

src : 재생할 오디오 존재하는 url 지정한다.

volume : 오디오의 재생 볼륨을 설정한다. (0.0~1.0)

 

오디오 파일 형식 : mp3, wav, ogg

 

 

 

<source> 태그 사용하기

 

하나의 오디오 소스에 대하여 여러가지 파일 형식을 동시에 제공한다.

 

 

 

소풍.mp3
1.96MB

 

 

03. 비디오

 

<video src="movie.mp4" autoplay controls>

 

<video> 요소의 속성

 

autoplay : 비디오를 자동으로 재생한다.

controls : 비디오 재생을 제어하는 컨트롤을 표시한다.

loop : 비디오를 반복하여 재생한다.

poster : 비디오를 다운로드하는 중일때 표시하는 이미지이다.

preload : 자동으로 전체 오디오를 다운로드 한다.

muted : 비디오의 오디오 출력을 중지한다.

src : 재생할 오디오가 존재하는 url 지정한다.

width, height : 비디오 재생기의 너비와 높이를 나타낸다.

 

 

 

비디오 파일 형식 : mp4, webm, ogg

 

 

 

04. iframe

 

<iframe src="inner.html" width="300" height="120"></iframe>

inline frame의 약자로 웹 페이지 안에서 다른 웹 페이지를 표시하고자 할때 사용한다.

 

 

 

 

 

 

 

<iframe>의 속성

 

 

 

 

 

05. <div>와 <span>

 

<div> : 하나의 블록 수준의 섹션을 생성하고 여기에 경계선을 설정한다.

<span> : 인라인 수준의 섹션을 생성하고 글자의 색상을 변경한다.

 

 

 

<div>를 이용한 박스 그리기

 

<div> 요소를 생성한후 css로 높이와 너비를 설정한다.

 

 

 

 

06. HTML 입력 양식

 

입력양식의 작동방식

 

 

<form> 요소

 

GET 방식과 POST 방식

 

 

07. 입력 태그 #1

 

<input> 형식

<input type="button" value="눌러보세요!" name="button1" />

 

 

 

text : 텍스트를 입력할수 있는 한줄 필드 생성

password : 비밀번호를 입력할수 있는 한줄 필드 생성

radio : 라디오 버튼 생성

checkbox : 체크박스 생성

file : 파일이름 입력필드 생성

reset : 초기화 버튼 생성

image : 이미지를 전송버튼으로 만든다.

hidden : 사용자에게 보이지 않지만 서버로 전송된다.

submit : 제출버튼 생성

 

텍스트 필드

 

<input type="text"> : 한줄짜리 입력 필드

 

 

 

패스워드 필드

 

<input type="password"> : 비밀번호 입력에 사용한다.

 

 

 

라디오 버튼

 

<input type="radio"> : name 속성은 동일해야 한다.

 

 

 

체크 박스

 

<input type="checkbox"> : 여러개의 항목을 동시에 선택할수 있다.

 

 

 

제출 버튼과 초기화 버튼

 

<input type="submit"> : 데이터를 서버로 전송하는데 사용된다.

 

 

 

<input> 버튼

 

<input type="button"> : 일반 버튼을 생성한다.

 

 

 

<button> 버튼

 

 

 

 

이미지 버튼

 

<button type="submit"><img src="submit.png"></button>

<input type="image" src="submit.png" alt="제출 버튼">

 

 

 

08. 입력 태그 #2

 

<textarea> 요소 : 여러줄의 텍스트 입력시 사용한다.

 

 

 

<select> 요소 : 메뉴를 표시하고 사용자가 선택한다.

 

 

 

<fieldset> 태그 : 다양한 입력요소를 넣는다.

 

 

 

<label> 태그 : <input> 요소를 정의한다.

 

 

 

파일 업로드 버튼

 

 

 

<input type="hidden">

 

사용자가 "제출" 버튼을 누를때 화면에 나타나지 않고 서버로 name과 value 속성값이 전송된다.

 

 

09. HTML5 입력 요소

 

<input> 태그의 type 속성들

 

date : 날짜 입력 컨트롤

datetime : utc 날짜/시간 형식을 이용한 날짜와 시간 표시 컨트롤

datetime-local : 현지 날짜/시간

month : 월/년도

time : 시간

week : 주와 연도를 선택하는 컨트롤

color : 색상코드를 입력하는 컨트롤

email : 표준 이메일 주솔ㄹ 입력받아 검증하는 컨트롤

tel : 전화번호 입력받아 검증하는 컨트롤

search : 검색어 입력양식을 생성

range : 2개의 숫자 사이의 숫자를 선택할수 있는 슬라이더 컨트롤

number : 숫자만 입력받는 컨트롤

url : url 만 입력받는 컨트롤

 

추가된 속성

 

html5에 추가된 새로운 <input> 태그 속성들

 

autocomplete : 자동으로 입력을 완성한다.

autofocus : 페이지가 로드되면 자동으로 입력 포커스를 갖는다.

placeholder : 입력 힌트를 희미하게 보여준다.

redonly : 읽기 전용 필드

required : 입력 양식을 제출하기 전에 반드시 채워져 있어야 함을 나타낸다.

pattern : 허용하는 입력의 형태를 정규식으로 지정한다.

 

한눈에 보기

 

전체 입력 양식을 지원하는 구글의 크롬을 이용하여 실행한다.

 

 

 

search

 

 

 

이메일 입력

 

 

 

정규식

 

특정한 규칙을 가지고 있는 문자열을 표현하는 수식이다.

정규식 패턴을 모아놓은 사이트 : http://regexlib.com

 

url 입력

 

 

 

전화번호 입력

 

 

 

number

 

 

 

range

 

 

 

날짜

 

 

 

 

시간 입력

 

 

 

색상 입력

 

 

 

이메일 작성화면

 

 

 

회원정보 입력화면

 

 

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 : -- | 사이버몰의 이용약관 바로가기