기술연구

김경현 2020. 5. 30. 23:48

안녕하세요.

 

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

 

학습목표

 

HTML을 구성하는 기초적인 태그를 살펴본다.

하이퍼 링크를 생성하는 방법을 학습한다.

이미지를 문서에 포함시키는 방법을 학습한다.

테이블을 생성하는 방법을 학습한다.

몇 가지 대표적인 웹 페이지를 작성하여 본다.

 

 

01. 이번 장의 목표

 

학습 : 주석, 제목, 단락, 글자쓰타일, 링크, 이미지, 수평선, 리스트, 테이블

작성 : 개인 홈페이지, 커피점 웹페이지, 썸네일 이미지 갤러리 페이지, 강좌소개 웹페이지

 

 

02. 텍스트 표시

 

<body> ... </body>

 

 

 

 

단락(paragraph) : <p> ... </p>

 

 

 

<br> break 태그로 줄을 바꾼다. 종료 태그를 가지지 않는 태그다.

 

 

 

텍스트 입력시 주의할 점

 

html 코드에서 빈줄이나 스페이스는 무시된다.

 

 

 

<pre> previously foratted text 태그로 html 코드내 입력한 스페이스 탭 줄 바꿈 적용한다.

 

 

 

헤딩 headline 머리기사로 <h1>부터 <h6>까지 6개 태그로 이용한다.

 

 

 

주석 comment 는 코드를 설명하는 글이다. <!-- 주석 -->

 

 

텍스트 서식

 

<b> ... </b> : 볼드체

<i> ... </i> : 이탤릭체

<strong> ... </strong> : 강하게

<em> ... </em> : 강조

<code> ... </code> : 텍스트가 코드임을 표시

<sup> ... </sup> : 위첨자 (superscript)

<sub> ... </sub> : 아래첨자 (subscript)

 

브라우저 마다 다를수 있다.

 

 

 

수평선 horizontal line 그리는 태그 : <hr>

 

 

특수문자

 

&nbsp;  non-breaking space 약자로 공백 문자 한개

&lt;  <

&gy;  >

&quot;  "

&amp;  &

 

예제. 커피 전문점 웹페이지 #1

 

 

 

03. 리스트

 

리스트는 항목을 나열하는데 사용된다.

 

번호 없는 리스트(unordered lists) : <ul> 태그로 시작.

각 리스트 항목(list item) : <li> 태그로 시작.

 

 

 

번호 있는 리스트(ordered lists) : <ol> 태그로 시작.

각 리스트 항목(list item) : <li> 태그로 시작.

 

 

 

정의 리스트(definition lists) : <dl> 태그로 시작

항목 : <dt> 태그로 시작

설명 : <dd> 태그로 시작

 

 

 

리스트 항목안에 텍스트, 이미지, 링크, 다른 리스트를 넣을수 있다.

한글 코드 : euc-kr, urf-8

euc-kr : 완성형코드. 초기 사용방식. 다국적 문자 표현에 문제가 있다.

utf-8 : 유니코드. 다른나라 운영체제에서도 폰트없이 한글 볼수 있다. uft-8로 바뀌는 추세다.

 

 

04. 링크

 

<a href="info.html">추가정보</a>

 

 

 

 

절대경로 : href="http://www.google.com" 다른 웹사이트의 페이지

상대경로 : href="../doc/info.html" 웹사이트 안에서의 다른 페이지

내부파일 : href="#anchor1" 현재 페이지 안의 다른 위치

 

target 속성

 

_blank : 새로운 윈도우에서 새로운 페이지 연다.

_self : 현재 윈도우에서 새로운 페이지를 적재한다.

_parent : 부모 프레임에 새로운 페이지를 적재한다.

_top : 현재 윈도우에 새로운 페이지를 적재하고, 모든 프레임을 취소한다.

 

 

 

 

 

id 속성 : 동일한 페이지 안에서도 점프할수 있다.

 

 

 

 

 

이메일 링크 : mailto

 

 

 

다운로드 링크

 

 

 

<base> 태그 : 기본 디렉토리를 지정할수 있다.

 

 

 

 

05. 이미지

 

<img> 태그 : <img src="seolak.jpg" width="300" height="230">

 

 

 

브라우저가 이미지를 처리하는 방법

 

<img> 태그를 발견하면 서버로부터 다운로드 받은후 화면에 표시한다.

 

 

width 와 height 속성

 

<img src="house.jpg" width="300" height="230">

기본 단위는 픽셀이지만 % 단위를 사용하여 이미지 크기 지정할수 있다.

 

alt 속성

 

<img src="house.jpg" alt="A Nice House">

이미지 표시 안되는 경우 화면에 표시되는 대체 텍스트(alternate text)

 

 

 

<img src="house.jpg" alt="A Nice House">

같은 폴더에 파일 붙여넣어 이미지가 화면에 표시되면 대체 텍스트(alternate text)는 안보인다.

 

 

 

웹에서 사용하는 이미지의 종류 : JPG, PNG, GIF

이미지의 크기가 큰 경우 : 이미지 크기 줄인후 서버에 올린다. 

 

 

 

썸네일(thumbnail)

 

 

 

작은 이미지 클릭후 큰 이미지 나타나는 것이 일반적이다.

 

 

 

 

 

 

 

<img> 요소의 align 속성이 HTML5에서 배제되었다. 스타일은 CSS를 사용한다.

 

 

06. 테이블

 

테이블의 행과 열

 

 

 

 

경계와 배경색 설정 : CSS를 사용한다.

 

 

 

테이블에서 열과 행의 병합

 

행병합(row span) : rowspan을 2라 지정하면 현재 셀위치에서 2개의 행을 병합.

열병합(column span) : colspan을 3이라 지정하면 현재 셀위치에서 3개의 열을 병합.

 

 

 

테이블의 캡션 : <caption> ... </caption>

 

 

 

테이블을 이용한 요소의 배치

 

 

 

테이블 만들기

 

 

 

 

07. 추가 예제

 

개인 홈페이지 만들기

 

 

 

커피 전문점 웹 페이지 : 폴더 images 만든후 메뉴별 이미지를 저장한다.

 

 

 

 

 

 

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