기술노트 블로그

* Youtube Link - https://www.youtube.com/watch?v=fkJEOf53Fbw&list=PL6i7rGeEmTvpaBlHGWlhtAWZxc9hM4nCd&index=8

 

 

 

컴퓨터의 발달 과정 

1세대 - 진공관

2세대 - 트랜지스터

3세대 - 직접회로

4세대 - 고밀도 직접 회로

5세대 - 초고밀도 직접 회로

 

CRT 모니터의 발달 과정

빛을 쏘는 음극선이 들어있는 모니터

1세대 - CRT에 의한 영상시대 개막

2세대 - 리프레시형 CRT, Sketch Pad 개발, CAD 기반 구축

3세대 - 백터 스캔 CRT, CRT 3차원 표시, 와이어 프레임의 입체 표현 가능

4세대 - CG 전성기, 래스터 스캔 CRT, 2D, 3D 발전, 전자출판 개막

5세대 - CG 일반화, CG 이용한 뉴미디어 발전, 소형 TFT-LCD, GUI, 인공지능 시

 

1세대 - 애니악 발명, 진공관 사용, 컴퓨터 그래픽스의 시작기, CRT에 의한 영상시대 개막, 프린터 플로터 시대 (도형 출력)

2세대 - 논리회로 소자가 트랜지스터가 사용됨, CRT 모니터와 플로터가 추가됨, 컴퓨터 그래픽스 기반 구축, Whirlwind라는 CRT 디스플레이 출력 기능을 가진 군사용 시뮬레이션 컴퓨터 개발, 스케치 패드 시스템 개발, 벡터 스캔형 CRT, 리프레시형 CRT

 

3세대 - 직접 회로, 컴퓨터 그래픽스 적용 확대, 스토리지형 CRT 시대, CAD와 CAM 도입, 만델브로가 프랙탈 기술 발표

4세대 - 개인용 컴퓨터 (애플, IBM), 컴퓨터 그래픽스 전성기, 레스터 스캔형 CRT, 그래픽 아트의 발전

5세대 - 인공지능 시대, 멀티미디어 발전, 3D 그래픽스의 발전, 뉴미디어 발전, 가상현실(VR) 사용

 

컴퓨터의 하드웨어나 소프트웨어를 이용하여,

입력 장치를 통해 입력된 정보를 도형이나 그림, 화상 등으로 재가공하여 변환한 후, 

모니터나 기타 출력 기기로 출력해 내는 일련의 작업과 기술들을 말한다.

 

장점

수작업보다 소요 인원수가 적게 되고, 재사용 가능

컴퓨터 알고리즘 사용 -> 정확하게, 작업주기를 단축

작업이 전체적으로 자동화, 작업 변경도 용이

컴퓨터를 사용해 의사결정을 쉽게 할 수 있음

시간과 경비를 절감하고 정확한 색상을 활용할 수 있음

단점

창조성이나 아이디어를 제공할 수 없음

자연적인 표현이나 기교의 순수함이 없고 획일적

 

정보를 표현

컴퓨터 아트와 디자인

사용자 인터페이스 구축

애니메이션 제작

시뮬레이션

그리고 가상현실 등에 사용된다.

 

입력 장치 - 정보를 받아들이는 장치 (키보드)

처리 장치 (프로세서) - 입력 받은 값을 계산하고 그림표시를 해주기 위한 처리 (CPU)

주기억 장치 (메모리) - 정보를 저장하기 위한 (RAM)

출력 장치 - 모니터

저장 장치 (보조기억 장치) - 하드디스크

 

키보드, 마우스, 디지타이저, 디지털 카메라, 태블릿, 스캐너, 터치 스크린, 라이트 팬

 

CPU - 인간의 두뇌에 해당

그래픽 카드의 비디오칩

 

RAM - 휘발성이 있음, 전원이 끊어지면 동시에 그 내용도 사라진다. 전원을 켜고 컴퓨터로 작업을 하는 동안에만 내용을 저장하고 있는 내부장치가 되겠다.

 

ROM - 비휘발성, 그 내용이 남아있다. 

 

플래시 메모리 - ROM과 RAM의 단점을 수용한 장치. 지속적으로 전원이 공급되는 비휘발성 메모리. 디지털 카메라, 디지털 캠코더, 휴대장치

 

모니터, 프린터, 플로터, 프로젝터

 

하드 디스크, CD/DVD 롬, USB 플래시 드라이브

 

컴퓨터 그래픽스 소프트웨어는 크게 시스템 소프트웨어와 응용 소프트웨어가 있다.

시스템 소프트웨어 - 시스템 자체를 활용하기 위해서 전반적으로 관리하는 소프트웨어 (운영체제)

DOS, Window, Unix, Linux, MacOS

 

2D 프로그램 - 플래시, 포토샵, 일러스트

3D 프로그램 - 3D 맥스, 오토 캐드, 마야

 

그래픽 작업 용도에 따른 분류

그래픽 편집 프로그램

편집, 인쇄 프로그램

3D와 애니메이션 프로그램

 

컴퓨터 그래픽스의 원리

정보 단위로 기억

bit: 정보를 기억하는 최소 단위 (0,1) -> 8bit (byte)

word: 32bit, 64bit (사용하는 컴퓨터마다 다름)

 

KB - byte가 1000개 모임

MB - KB가 1000개 모임

GB - MB가 1000개 모임

TB - GB의 1000배

 

컴퓨터 그래픽스의 이미지 표현

비트맵 방식 - 이미지를 표현할 때 픽셀이라는 요소로 이미지를 표현

이미지를 이루는 최소단위

픽셀은 픽쳐와 엘리먼트라는 단어의 합성어

때로는 래스터라고 부름

여러개가 모여서 하나의 이미지를 구성

픽셀의 수가 많은 이미지는 해상도가 높다

픽셍의 수가 적을 때는 이미지 해상도가 낮다

포토샵, 페인터

장점은 픽셀마다 다른 색상을 표현하기 때문에 이미지가 전체적으로 음영이나 미세한 단계를 표현하고 색상의 표현이 풍부함

색상의 변이나 이미지 보정, 합성 작업이 쉬움

단점은 픽셀이 손실될 수 있음 -> 이미지 해상도 낮아질 수 있음

 

백터 방식

수학적인 계산을 이용해서 이미지를 표현하는 방식

점, 선, 면 들의 좌표값과 곡선값들을 기본으로 해서 정확한 선이나 면을 표현

이미지가 깨끗하고 선명하게 출력되며 정확한 수치 계산이 가능함

로거, 심벌, 도안

일러스트레이터, 코렐, 플래시

장점 - 픽셀을 이용하지 않고, 수학적인 계산으로 때에 따라서 이미지를 재구성해주기 때문에 이미지의 질이 쉽게 낮아지지 않음

크기 조절이나 직선 곡선 변형이 자유로움

단점 - 미세한 그림이나 점진적인 색의 변이를 표현하기 어렵다.

다른 이미지와 자연스러운 합성이 힘들다.

 

RGB - 모니터에서 작업하기 위한 색상 체계 (빛의 삼원색을 이용한다.)

CMYK - 염료, 물감, 색료의 혼합 색상체계를 말한다. (인쇄되어서 나오는 출력물의 결과물과 관련이 있다.)

RGB - Red, Green, Blue와 관련이 있다. 모니터나 빔프로젝터와 관련이 있다. 더하면 더할수록 밝아진다. 웹 페이지에서 RGB를 사용하면 #FFFFFF (RGB값의 8bit를 16진수로 변환한 것) RGB 값은 RGB 각각이 다 8bit씩 사용이 된다. 이 8bit에 해당하는 것들을 4자리씩 16진수로 바꾼 것이 바로 이런 표현이 되겠다.

CMYK - 사이언, 마젠타, 노랑, 검정 이 4가지 색상으로 이루어진 인쇄와 관련이 있는 색상 영역

4도 분판 - 4개의 색상을 따로 분리해서 순서대로 인쇄하는 방식

감산혼합 - 더하면 더할수록 어두워지는 감산혼합 방식

 

인덱스 컬러 - 256가지 색상을 선별해서 이루는 색상체계. 256가지가 항상 일정한 것은 아니고 이미지에 따라서 선별되는 256가지가 달라지게 된다.

그레이스케일 - 회색 음영 단계를 256단계로 표현

듀오톤 - 그레이스케일에 색상 톤을 추가 (마치 컬러 이미지처럼 표현될 수 있도록 한 것)

비트맵 - 흰색과 검정으로만 이미지를 구현

랩 컬러 - 국제조명협회가 정확한 색상 측정을 위해서 만든 색상 체계입니다.

HSB 컬러 - Hue, Brightness, Saturation 이 3가지를 바탕으로 표현하는 방식

H 색상값은 색상환의 위치를 말하는데 0도부터 360도로 값을 표현

밝기는 0~100%로 표현

 

컴퓨터 그래픽스의 해상도 

비트 심도 - 색 심도. 하나의 픽셀이 하나의 색상을 표현하기 위해서 몇 bit를 사용하느냐라는 것과 관련됨. 색상을 표현하기 위해서 비트수가 많아지면 당연히 색은 많이 표현할 수 있게 된다. 하지만 작아지면 표현할 수 있는 색상 수가 작아지게 된다.

 

RGB는 8bit씩 나누어서 표현

검정색으로 표현이 된다.

만약 다 1로 채워지면 흰색이 된다.

웹상에서 이렇게 6개의 숫자로 표현되게 되어있다.

 

픽셀의 비트 심도에 따른 픽셀의 색상 수 

즉 하나의 픽셀의 색상을 표현하기 위해서 몇 bit를 사용하느냐 그래서 색심도가 어떻게 되느냐에 따라서 색상수가 달라지게 된다.

만약 어떤 픽셀이 1bit만 사용한다 그러면 검정과 흰색으로만 표현할 수 밖게 없겠다. 이러한 경우가 비트맵이다.

만약 8bit면 인덱스 컬러, 그레이스케일, 팔레트 색상이 된다. -> 24bit (하나의 픽셀을 24bit를 사용하는 경우를 말하며 2의 24승의 색상을 표현할 수 있음. 1670만가지의 색상을 표현할 수 있음. RGB 컬러에서 24bit를 사용하고 있음)

 

이미지 해상도

비트맵 이미지에서 비트맵 이미지 자체가 몇개의 픽셀로 이루어져있는가를 말한다.

이미지 해상도의 단위는 PPI를 사용한다. 1인치당 몇개의 픽셀로 구성되느냐를 말한다.

DPI 프린터기나 이런 곳에는 인치단 몇개의 도트로 표현되느냐 이런 경우도 있다.

LPI 인치당 몇개의 라인으로 구성되느냐, 출력 해상도와 관련

기본적인 단위는 PPI이다. 24PPI이면 1인치당 24개의 픽셀이 들어가는 이미지이다.

 

이미지 해상도가 낮아지는 과정

 

감사합니다.

Youtube link - https://www.youtube.com/watch?v=PMUu8HEbM28&list=PL6i7rGeEmTvpaBlHGWlhtAWZxc9hM4nCd&index=7

 

HTML 문서의 구조

태그라고 불리우는 요소로 구성

 

<HTML>

</HTML>

로 시작한다.

태그는 대소문자를 구분하지 않는다.

그 안에 속성으로 구분된다.

 

헤드 태그는 

다음과 같은 태그들이 들어간다

타이틀 태그 - 웹 브라우저에 문서의 제목이 나온다.

메타 태그 - 인코딩 방식, 

스타일 태그 - 스타일 시트를 이용해서 문서의 배경색상, 줄간격 등 문서의 형식을 지정

LINK 태그 - 문서와의 관계를 나타냄, 외부 스타일 시트를 삽입할 때 사용

베이스 태그 - HTML 문서 내에서 사용하는 상대경로가 실제로는 어떤 절대경로를 토대로 지정되는지를 나타냄

 

*메타 태그 - 검색어에 대한 값 부여

한글 코드로 인코딩 되도록 함

 

스타일 태그 폼 

스타일 시트 문서를 만들어서 링크 태그를 통해 불러와서 작성할 수도 있고

따로 작성할 수도 있다.

:link 아직 방문하지 않은 링크의 모양

:visited 방문했던 링크 모양

:active 클릭하는 순간의 모양

위 3개는 바디 태그에 속함

:hover 마우스를 링크위에 올려놓을 때의 모양

바디 태그에 속하지 않음

 

문단은 바디 태그를 통해서 몸체 부분을 지정

br 한 줄을 바꾸기, HTML에서 br 없이는 줄바꿈이 되지 않음, 닫음을 쓰지 않음

p 문단을 바꿀 때 paragraph 태그를 사용

hr 내용을 구분할 때 사용, 선을 그어서 표시, size 1~7까지 있음

center 태그 사이에 있는 내용을 가운데로 정렬

div 문서를 구분하여 문단별로 정리, 스타일을 담는 컨테이너 역할을 해주는 특별한 역할

pre 사용자가 작성한 내용을 그대로 나타내고자 할 때 사용

blockquote 인용문을 사용을 할 때 나타내는 태그

 

OL 순서를 매긴 숫자 목록

UL 숫자가 아닌 특수기호를 사용하는 목록

LI 목록의 각각의 내용을 정의

DL 용어에 대한 정의 목록을 나열

DT 용어 제목을 표시

DD 용어에 대한 정의 내용을 기술

 

TT 타자체 모양으로 내용을 처리

I 이텔릭체

B 굵은 글씨체

U 문자에 밑줄

SUB 태그 사이의 문자를 아래첨자로 보여줌

SUP 태그 사이의 문자를 위첨자로 보여줌

STRIKE 문자에 취소선을 삽입

 

CODE 프로그램 소스 코드를 나타낼 때 사용

CITE 인용문 표현

Hn 글자 크기를 정해주는 태그 제목으로 글자를 표시하기 때문에 조금 더 크게 나타내준다. 1~6까지 있다. 숫자가 작을수록 큰 글자가 표시된다.

FONT 문자의 크기와 모양을 지정, size와 color 지정

<!-- --> 설명문, 주석을 기입할 수 있다. 기능을 하는 것이 아니라 프로그래머가 설명문을 남긴 것

ADDRESS 

 

IMG 이미지 태그, 이미지 맵 태그

<MAP> <AREA> </MAP> 한 그림 안에 여러 링크를 넣어줄 수 있는 태그, 맵 에어리어, 이미지 맵을 쓸 경우 사용하는 태그, 원형으로 할지 사각형으로 할지 shape라는 속성으로 할 수 있다.

<APPLET 속성> HTML 문서에 자바 애플릿을 붙여 넣어 동적인 속성을 넣을 수 있다.

OBJECT 이미지, 플러그인, 애플릿을 넣을 때 사용

 

A 태그

문서를 연결하는 태그

href : 링크하고자 하는 문서명이나 URL을 명시하는데 사용

name : HTML 문서 내에서 특정한 위치를 나타낼 때 사용

target : 링크 부분을 방문해 나타나는 내용이 기존의 웹 브라우저 창과 어떤 관계가 있는지를 지정

ㄴ _self : 현재의 문서가 있는 창을 링크

ㄴ _parent : 현재의 문서의 상위 창을 링크

ㄴ _blank : 이름 없이 새로운 창을 링크

ㄴ _top : 현재 창의 최상위 창을 링크

ㄴ 특정한 창 이름 : 프레임에서 이미 정의되어 있는 창을 링크

 

어떤 링크를 적어줬다 그러면 이 URL 내용을 클릭했을 때 열리는 내용이 현재 문서에 열리거나 다른 속성을 통해서 다른 문서에 열릴 수 있다.

 

음악 재생 관련 태그

EMBED 음악, 동영상, 플래시 파일 등을 다운로드 시작과 동시에 재생

src, width, height, loop, autostart, showcontrols, hidden 등

 

TABLE 

TR 태그 - 행

TD 태그 - 열

TH 태그 - 제목과 관련된 내용일 때 주로 사용, TD보다 약간 굵은 글씨체로 표현

 

프레임셋 : 문서를 여러개의 틀로 나눔, 바디 태그를 쓰지 않음

프레임 : 각 분할된 창의 속성을 지정

노프레임스 : 프레임이 없는 웹 브라우저에서는 이 내용들이 표시가 됨

아이프레임 : HTML 문서 내에서 다른 HTML 문서를 보여주려고 할 때 사용

 

FROM 태그 : 입력 양식, 체크 박스(다중 선택이 가능), 레디오 박스(하나만 선택이 가능) 하나를 선택

INPUT 태그

SELECT 태그 : 여러 개의 목록을 보여주면서 이 목록 중에서 하나를 선택할 수 있도록 해주는 선택 박스 

OPTION 태그 : 선택의 내용들을 지정

TEXTAREA 태그 : 텍스트를 적어줄 수 있는 입력 상자

 

자바스크립트

자바 애플리케이션이나 자바 애플릿과 다르게 소스 코드 자체가 사용자의 브라우저에서 직접 번역되서 수행된다.

<HTML> </HTML> 태그는 아니지만 자바스크립트로된 언어가 있다. HTML 문서 내에 적을 수 있다.

사용자에게 어떤 모양으로 보여준다.

번역을 할 때 거뜬하게 다 번역을 할 수 있다.

해석이 될 수 있다.

 

<HTML> 문서 사이에 직접 기술을 한다.

~.js 라고 저장을 한다.

특별한 단어가 있다. 예약어라고 부른다.

변수 즉 담아주는 그릇인 변수 이름으로는 사용될 수 없다.

funtion, return, var, if, new, for, while, case, this 등

 

변수를 어떻게 만드는가?

사용자가 입력한 값

프로그램 중 입력한 값을 담아주는 그릇

메모리 상에서 잠시 저장되는 어떤 내용들을 기억하고 있는 공간을 변수라고 한다.

만들 때 규칙이 있다.

영문 대소문자, 숫자, 밑줄을 사용할 수 있다. 

첫 글자는 영문자나 밑줄로 시작해야 한다.

예약어는 변수로 사용할 수 없다.

그리고 대소문자를 구분한다.

 

제어문

if-else, switch-case 형태의 조건문, while, for, do-while 형태의 반복문, break, continue의 반복종료 및 연결문, return과 같은 함수값 반환문 등이 있다.

while : 조건이 만족되면 계속 실행, 조건이 만족되지 않을 때까지 실행

for : while과 비슷하지만, for문은 초기값을 주고, 그 초기값이 조건을 만족시키는 동안에만 반복 실행

do-while : 실행문이 최초에 한번 처리 된 후, 조건을 검사하고 그 조건이 만족되지 않으면 계속 반복

 

함수 (Function)는 특정한 작업을 독립적으로 수행하는 단위를 말한다.

function 함수 이름 (매개변수1, 매개변수2, ...) {

   함수 본문 문장들

}

 

내장함수: 이미 시스템에 저장되어 있는 함수

alert() : 경고 상자

eval() : 문자열로 입력된 수식을 계산

parseInt()와 parseFloat()은 각각 정수와 실수로 바꿔주는 함수

confirm() : 메시지 내용을 사용자에게 알려서 확인 취소 버튼이 나오도록 해주는 함수

 

객체는 상태(속성)과 행동(메소드)를 함께 가리키는 단위

예를 들어 window창은 객체이다. 이에 속성은 높이와 너비가 있고 메시지는 연다, 크기가 커진다 작아진다 등 메서드, 행동이 있겠다.

 

자바스크립트에 이미 정의되어 있는 객체들이 있다.

이를 자바스크립트 내장객체라고 부른다.

 

Array 객체

하나이면서 공간들이 있어서 각 공간안에 값이 담겨지는 것이 바로 배열

배열 객체에 사용되는 메서드가 있다. 

이것이 하는 행동들이 바로 메서드이다.

join() : 배열들을 하나의 문자열로 만들어 준다.

concat(A) : 현재 배열에 'A' 배열을 합해서 새로운 배열로 만들어준다.

reverse() : 배열을 역순으로

slice(a,e) : a와 e를 뽑아서 하나의 배열로 만들어준다.

sort(compareFunction) : 조건대로 정렬해준다. 그냥 sort()하면 사전 차례 순 즉 오름차순으로 정렬을 해주게 된다.

 

Date 객체 한번씩 쭉 읽어봐주시고

각각이 어떤 내용을 의미하는지를 한번씩 봐주시길 바란다.

 

String 객체는 문자열을 정의하는 것이다.

 

Math 객체

Math 객체 : 수학 계산을 위한 객체

Boolean 객체

부울 값을 변환하는 객체 (참이나 거짓)을 나타내는 객체

 

window 

브라우저 객체 구성

window.document.open() 이라는 행동을 이용하면

open() 함수를 사용할 수 있다.

 

window 객체에 있는 메서드를 알아주면 된다.

alert() : 경고창을 보여줌

confirm () : [확인] 대화상자

eval() : 문자열을 숫자로 변환

focus() / blur() : 특정 객체에 포커스 설정/포커스 삭제

 

이벤트 핸들러

이벤트는 객체의 상태 변화를 유발시키는 조건

조건에 대해서 조절자가 바로 이벤트 핸들러

onLoad : html 문서를 읽을 때 발생

onUnload : html 문서가 사라질 때 발생

onError : html 문서를 읽던 중 에러가 발생한 경우

onFocus / onBlur : 포커스를 얻을 때 / 포커스를 잃을 때 발생

 

Document 객체

HTML 본문(BODY) 정보 관리

속성들로는 이렇게 태그와 관련된 여러가지 속성들이 있다.

 

open() / close() : 문서 시작 알림 / open() 메서드로 열려진 문서를 닫아줌

clear() : 문서 내용 지움

write() / writeIn() : 문서 내용 출력/줄 바꿈하여 출력

 

onFocus() / onBlur() : 문서가 focus를 얻는 순간 / 문서가 focus를 잃는 순간

onClick() / onDbClick() : 문서에서 클릭되었을 때 / 더블클릭했을 때 발생

onKeyDown() / onKeyUp() : 키보드의 키를 눌렀을 때 / 키를 눌렀다가 놓을 때 발생

onKeyPress() : 키보드의 키를 누르고 있는 동안 발생

onMouseDown() : 마우스 버튼을 눌렀을 때 발생

onMouseOut() : 마우스가 어떤 대상을 벗어날 때

onMouseOver() : 마우스를 어떤 대상 영역 안으로 놓을 때

 

History 객체

웹 브라우저의 히스토리 정보를 이용하여 이동

 

Locatoin 객체

웹 브라우저 주소표시줄의 URL 주소 정보 제공

 

href : 문서의 URL 주소

hostname : URL의 호스트 이름

등

reload() : 문서를 다시 읽어옴

replace() : 문서를 지정된 URL 문서로 대치

 

자바란 자바스크립트와 비슷하게 느껴질지 모르겠지만 

전혀 다른 프로그래밍 언어이다.

다양한 플랫폼에서 사용 가능한 프로그래밍 언어이다.

전자기기의 관한 프로그래밍을 할 때, 핸드폰에 관한 프로그래밍을 할 때, 웹 브라우저 창에관한 프로그래밍을 할 때, 어디서든 사용할 수 있는 언어가 바로 자바 프로그래밍 언어이다.

 

자바 언어는 자바 애플리케이션을 만드는데 사용이 된다.

1. 자바 애플리케이션

자바 독립적인 응용프로그램을 만들어서 사용

소스 코드 자체는 *.java 라는 확장자를 가지게 되고

실제로 실행이 되는 파일은 *.class 파일이 있는데

원본 파일을 컴파일을 함으로써

클래스 파일을 만들어내면

실행되는 파일이 된다.

실행은 그냥 되지 않고

자바 가상머신을 통해서 실행이 되게 된다.

 

자바 애플릿

자바 애플릿으로써 자바가 활용될 수 있다.

자바를 통해서 자바 애플릿을 만들어낼 수 있겠다.

이 자바 애플릿은 웹 브라우저 상에서 자바스크립트처럼 쭉 실되는 것이 아니라

독립적인 애플릿 파일이 따로 있어서

사용자 시스템에 다운로드, 서버로부터 다운로드가 된 후에 사용자 측에서 실행이 되는 

방식으로 보여지게 된다.

 

자바 애플리케이션, 자바 애플릿, 자바스크립트 이 차이점을 반드시 확인해주면 좋겠다.

자바 애플리케이션 - 자바라는 것으로 작성된 응용 프로그램을 말한다.

바이트 코드로 변환 후에 실행이 된다.

바이트 코드로 변환된다는 것은 *.java라고 되어있는 것을 컴파일이라는 과정을 통해서 *.class라는 파일로 만들어내고

그 *.class를 자바 가상 머신이 실행을 시킨다.

자바 애플릿 - 자바로 작성된 작은 프로그램

바이트 코드로 변환 후 웹 브라우저에서 번역이 된다.

자바 스크립트 - 웹 브라우저 소스 코드 안에, HTML 소스 코드 안에 그대로 사용하기 때문에

웹 브라우저 자체에서 이 코드 자체를 그대로 번역을 시킨다.

이것을 다른 말로 하면

객체 참조와 관련이 있다.

자바 애플리케이션은 정적 바인딩

자바 애플릿은 정적 바인딩

자바스크립트만 동적 바인딩이다.

바인딩이라는 것은 변수나 함수 타입이 실행 중에 결정이 되는데

값들이 확정되서 더 이상 변경이 될 수 없는 상태가 되는 것이 바로 바인드가 된 상태이다.

값들이 고정되는 상태로 되는 것이 어떨 때 결정이 되느냐에 따라서 정적이냐 동적이냐 이렇게 결정된다.

정적 - 한번 정해지면 더 이상 바뀌지 않는다. 컴파일 과정을 통해서 하는 것들이 바로 정적 바인딩이 되겠다.

동적 - 실행할 때 바로 바인딩 과정이 일어나게 된다.

자바 스크립트는 동적 바인딩이다. 나머지는 정적 바인딩이다.

 

저작기법 내용중에서 

저작을 위한 소프트웨어는 어떤 것들이 있는지 기억해주기 바란다.

 

이미지 제작과 관련된 것 그리고 웹 에디터들 이렇게 구분해서 외워주어야 한다.

 

웹페이지를 제작하는 방법

메모장에서 손을 이용해서 일일이 태그를 적어서 사용하는 방식

워드 프로세서를 사용해서 HTML로 다른이름으로 저장

전문 홈페이지 제작 도구인 웹 에디터를 사용하는 것이다. (위지윅 방식으로 되어 있다.)

눈으로 그때 그때 결과값을 보면서 하는 것이 바로 위지익 방식

이미지 하나를 추가하면 이미지 추가한게 웹 브라우저 상에서 어떻게 나타나는지를 그때 그때 봐가면서 하는 것

 

HTML 언어 외에도

웹 프로그래밍 언어가 있다.

DHTML, XML, ASP, JSP 등이 있다.

이 중에서 Dynamic HTML 이라고 불리는 DHTML을 알아주면 좋다.

이미지와 텍스트를 이용한 애니메이션을 구현할 수 있다. 다이나믹한 웹 페이지를 제작할 때 사용하는 언어가 되겠다.

HTML을 기본으로 하되, 스타일 시트나 자바스크립트를 조합해서 사용하는 것

HTML, CSS(Style sheet), Java Script를 조합해서 대화형 웹사이트를 제작하는 것이다.

웹 브라우저 상에서 그대로 해석이 되는 것

 

XML은 HTML 처럼 태그 형태로 되어 있는데 사용자가 태그를 지정할 수 있다.

 

XML에서

DTD는 XML 문서 안에서 허용할 수 있는 구조들을 정의하는 코드 집합이다.

사용자가 어떤 태그를 만들어서 쓸 때 이 DTD를 정의해주는 것

 

JSP나 ASP, PHP 등이 있다.

웹 서버에서 실행이 된 후에 사용자에게 결과값을 보여주는 프로그래밍 언어가 되겠다.

 

웹 에디터, 이미지 제작 도구, 애니메이션 멀티미디어 제작 어떤 것들이 있는지 쭉 읽어봐주시면 좋겠다.

특별히 웹 에디터의 종류가 어떤 것들이 있는지 그리고 이미지 제작 도구가 어떤 것들이 있는지 기억해주면 좋겠다.

 

기타 웹 페이지 저작 관련 기술 중에서 CGI를 기억해주면 좋겠다.

CGI는 Common Gateway Interface가 되겠다.

공통적인 관문에 대한 인터페이스라고 할 수 있다.

어떤 관문이냐라면 사용자가 어떤 요청을 보내면 서버에 보내면 서버 안에서 그것을 처리를 해서 요청에 대한 응답을 다시 사용자에게 보내준다. 이 과정 자체에 대한 것이 바로 CGI이다.

웹 서버가 클라이언트 컴퓨터 (사용자 컴퓨터)의 브라우저를 통해서 사용자로부터 데이터를 입력받고 이에 대한 처리결과를 제공하는 웹 서버와 프로그램 사이의 표준 인터페이스이다.

CGI에 대한 정의

 

그리고 CGI와 관련해서 FORM 태그를 이용할 수 있다.

 

CGI에 있어서 즉 사용자 컴퓨터에서 웹 서버쪽으로 값을 넘겨주는 전달하는 방식이 있다.

- GET : 사용자의 입력값을 환경 변수를 통해서 전달한다. 값의 길이에 제한이 있다.

- POST : 표준 입출력을 통해서 값을 전달하는 방식. 값의 길이에 제한이 없다. 대부분의 CGI 프로그램은 POST 방식으로 구현하고 있다.

 

웹 서버 중에서는 아파치, PWS, IIS 종류들이 있다.

 

감사합니다.

Youtube Link - https://www.youtube.com/watch?v=osqFM6GSnao&list=PL6i7rGeEmTvpaBlHGWlhtAWZxc9hM4nCd&index=6

 

웹에서 정보들을 검색하기 위해서는 웹 브라우저라는 프로그램을 이용한다.

웹 브라우저는 하이퍼텍스트나 하이퍼미디어로 된 정보를 효과적으로 검색할 수 있도록 도와준다.

*하이퍼미디어 - 하이퍼링크를 음성과 그림, 영상에 연결한 것

 

모자이크 - GUI 환경을 제공한 최초의 프로그램

넷스케이프 내비게이터 - 모자이크 후속작

 

- 웹 페이지의 저장 및 인쇄

- 최근 방문한 URL 목록을 제공하고 저장

캐시는 저장해주는 공간의 이름이자 기능 자체를 캐시라고 한다.

자주 방문하는 곳의 데이터를 저장해주고 먼저 웹 브라우저가 접근해서 읽어옴으로써 데이터를 빨리 보여주게 하는 기능

- 쿠키

웹 사이트의 방문 기록을 저장해두는 것

웹 사이트 방문 기록 자체를 쿠키라고 한다.

개인 정보 보호와 관련된 설정도 웹 브라우저에서 하고 있다.

 

- 웹 사이트 등급 설정으로 인터넷 내용 제한

폭력성이 있거나 음란성이 있는 것들을 제한

- 개인 정보 자동 완성

- 웹 페이지의 소스 보기

 

403오류 - Forbidden 

접근이 금지된 파일을 요청해서 허가할 수 없는 경우

외부에 있는 사람이 읽을 수 없도록 관리권한을 요청하면 나타난다.

404오류 - Not Found

존재하지 않는 파일을 요청한 경우 발생

500 서버오류 - Internal Server Error

URL의 잘못된 명시로 인해 발생 -> URL의 맞춤법, 구두점, 대소문자 오류 확인

간혹 웹 서버가 다운되거나 제대로 작동하지 않아 발생

503 - Serivce Unavailable

서버에 많은 사람들이 접속했을 때 즉 동시 접속자수가 많을 때 이런 메시지가 발생하게 된다.

 

웹 브라우저가 다 처리하지 못해서 이것을 돕는 것이 바로 플러그인이다.

플러그인은 웹 브라우저와 별도로 설치

사용자 눈에는 마치 일부처럼 사용된다.

pdf - pdf 파일을 보게 해줌

swf - 쇽 웨이브 플래시, 플래시 파일을 보게 해줌

mov - 애플 컴퓨터 동영상을 보게 해주는 QuickTime Player

 

1. 한글 키워드 시스템: 웹 브라우저의 주소 표시줄에 방문하고자 하는 사이트 이름을 한글로 입력하면 해당 사이트로 자동 연결시 주는 기능

한글 키워드 헬퍼 프로그램

2. 완성형 한글 파일명이 포함된 URL 문제인지 확인

[도구] - [인터넷 옵션] 메뉴 - [고급] 탭에서 [UTF-8 URL 보내기] 를 체크 해

3. 웹 페이지의 한글 깨짐 현상

- 인코딩이 한국어로 되어있는지 확인

(인터넷 익스플로러에서 [보기] - [인코딩] 메뉴 - [한국어] 선택)

컴퓨터가 문자를 처리할 수 있도록 byte나 bit로 변환하는 것이 인코딩이라고 할 수 있습니다.

컴퓨터가 알아들을 수 있는 방식으로 변환이 된다. 그렇게 안 되었을 때 깨지게 된다.

4. HTML 소스에 이 문서는 한국어다 라고 선언할 수 있다. 메타 태그를 통해서 charset에 한글 코드입니다 하고 선언할 수 있다.

- UTF-8 (유니코드 인코딩 방법으로 8비트 문자로 변환함)

유니코드는 전세계 모든 문자를 컴퓨터에서 일관되게 표현할 수 있게 해주는 표준 방

- EUC-KR (Extended Unice Code - kr)

대표적인 이 두가지를 반드시 기억

 

유니코드와

유닉스용 한글 코드가 있다.

 

정보 검색 관련 용어들

- 시소러스 : 주요 용어들 간의 관계를 조직화하여 정리한 것

- 리키지 : 정보 검색의 대상임에도 불구하고 검색 결과 중에서 빠진 정보

- 가비지 : 불필요하게 검색된 정보

- 불용어 : 검색 엔진이 데이터베이스를 구축할 때 색인에서 제외하는 단어나 문자열

한글 검색엔진 : 조사, 접미사, 접속사, 어미 등

- 스패밍 : 웹 페이지 안에다가 동일 키워드를 반복 입력해서 우선순위를 높이는 방법

- 링크 인기도 : 링크 우선순위라고도 부름, 해당 웹 페이지가 다른 웹 페이지들에 의해 많이 연결되어 있을수록 높아짐

 

- 로봇 에이전트 : 정보를 수집하는 데 있어서 자발적으로 수집, 로봇, 스파이더, 크롤러

- 웹 인덱스 검색 : 인덱스 검색

- 주제별 검색 : 디렉터리형 검색 (대분류/중분류/소분류)

- 메타 검색 : 초월하고 확장시킴, 자체 데이터베이스가 없이 여러 개의 검색엔진에서 검색 

포털 검색 방식은 통합 검색

다른 검색 엔진들과 연계되어 있고

섹션별로 분류해서 보여줌

 

- 검색 연산자

논리 연산자에 해당하는

AND 와 OR

AND : 두 키워드가 모두 포함되어 있는 정보만 검색하도록 지시

OR : 두 키워드 중 어느 한 쪽 편만 포함되어 있어도 검색해줌

- 인접 연산자

두 개 키워드가 놓여 있는 위치가 얼마나 떨어져 있는가를 측정하여 일정한 간격 이내에 있으면 이를 검색하도록 하는 연산자이다.

A NEAR2 B

2 단어 이내에 되어 있는 것만 검색

 

- 구문 검색

"" 큰 따옴표로 포함된 키워드를 하나로 간주하여 정보 검색

- 절단과 와일드 카드

절단 : 일부만 적고 나머지는 검색하지 않음 

KOR* 검색 -> KORE, KOREA, KOREAN 등

와일드 카드 : 한 단어를 대체

wom?n 검색 -> woman, women 등

 

 

감사합니다.

*Youtube Link 참조 url

https://www.youtube.com/watch?v=6sJp1OBA7JI&list=PL6i7rGeEmTvpaBlHGWlhtAWZxc9hM4nCd&index=5

 

TCP/IP가 있어야지만 인터넷에 접속할 수 있다.

 

세계 인터넷의 역사

ARPANET : 미국 국방성의 군사 목적, 몇개 대학을 컴퓨터로 연결

이를 기준으로 

USENET : 토론 공간, 게시판 형태, 서비스 시작

TCP/IP : 인터넷의 표준 프로토콜로 채택

전세계와 NSFNET 연결

인터넷 서비스로 Gopher, WAIS 시작

인터넷 서비스로 WWW(World Wide Web) 시작 - 멀티미디어를 지원하게 되었다는 

웹을 지원하기 위해서 웹 브라우저 넷스케이프 내비게이터 등장, W3C(World Wide Web Consortium) -> 브라우저 개발

 

세계 인터넷 역사와 우리나라 인터넷의 역사

 

배너 광고, 인터렉티브 미디어 광고 등이 인터넷 광고가 가능하다.

 

IP 주소

인터넷에 연결된 각 컴퓨터에게 할당된 고유번호를 의미

모든 컴퓨터는 IP주소가 있어야 하는데

중첩되어선 안된다.

서로 다르게 설정된다.

32bit 주소체계인 IPv4를 사용하고 있다.

8개 bit씩을 잘라서 10진수로 표현하고 있다. 그리고 각각은 점으로 구분하고 있다.

203.246.40.6 이렇게 10진수 주소로 변경해서 이용하고 있다.

 

IPv4주소의 클래스를 구분하고 있다.

각각의 그룹군을 이루고 있다.

A 클래스 : 처음 8bit 값 (10진수로 표기) 1~126으로 표현

B 클래스 : 128~191

C 클래스 : 192~223

 

사설 IP 주소

차세대 인터넷 주소체계는 IPv6이다.

 

16bit씩 8개로 구성된 총 128bit의 체계이다.

2배씩 늘렸다.

2진수를 16진수로 변환해서 사용

연속된 0은 :으로 대체해서 간결하고 짧게 주소를 대체

 

장점

보안 기능이 강화되었다.

고속의 라우팅을 지원

개선된 Qos를 지원 (Quality of Service) 네트워크 품질 강화

 

ICANN

APNIC 

KISA

이렇게 IP 주소 할당 체계를 관리하는 기관이 있다.

도메인 주소를 관리한다.

기관들을 통해서 IP주소가 ISP 기관들에게 뿌려지게 되고 각각 사업체마다 관리를 하게 된다.

 

호스트 이름과 DNS

숫자로 되어 있다 보니까 사람들이 더 외우기 쉬운 영문으로 바꾼 주소가 있다.

호스트 이름 -> 도메인 표시

네트워크를 관리하기 위한 영역이 표시

nanet.go.kr 

끝부터 시작해서 왼쪽으로 갈수록 범위가 더 좁아지는 것을 의미

kr : 한국 (최상위 도메인)

go : 정부

nanet : go 중 nanet에 해당하는 그룹

 

최상위 도메인 바로 앞에 나오는 차상위 도메인

.co : .com

.go : .gov

.ac : .edu

.nm 또는 .ne : .net

.or : .org

.re : 

 

의미가 같은 것끼리 연결해서 기억

 

도메인 이름 서비스

DNS는 사람이 외우기 쉬운 호스트 이름을 숫자로 된 IP 주소로 또는 숫자로 된 IP 주소를 다시 영문으로 된 호스트 주소로 매칭시켜주는 서비스

 

웹, World Wide Web의 줄임말로 

문자, 음성, 동영상 등의 멀티미디어 환경을 갖춘 인터넷의 정보 서비스이다.

 

웹 브라우저는 웹의 정보들을 검색하는 프로그램

하이퍼텍스트나 하이퍼미디어로 된 정보들을 효과적으로 검색한다.

 

CGI : 서버측에 있는 다른 컴퓨터 프로그램을 별도로 수행해서 홈페이지 상에서 받아보고자 할 때 사용하는 공용 인터페이스

 

인터넷을 이용해서 메시지 

이메일 메시지를 주고 받게 해주는 서비스이다.

프로토콜이 무엇인지 문제가 종종 나온다.

A컴퓨터와 B컴퓨터간에 정보를 주고 받을 때 어떻게 주고받을지를 정하는 규약

 

텔넷 : 원격으로 접속할 수 있도록 멀리 있는 컴퓨터에 접속할 수 있도록 해주는 서비스

FTP: 파일전송

anonymous FTP : 익명으로 파일을 전송

Whois : 인터넷을 운영하는 각 기관의 주요 운영 정보를 조회하도록 해주는 서비스

Gopher : 정보를 찾기 위한 것. 주제별. 종류별. 구분해 메뉴를 구성. 쉽게 정보를 찾을 수 있게 해주는 계층적 데이터베이스 서비스.

 

인터넷에서 자원을 표시하는 방법이 있다.

URL은 인터넷 서비스와 해당 파일 등 인터넷에 있는 자원의 위치를 표시하는 표준 방법이다.

인터넷 서비스 자리에 프로토콜 명이 들어간다.

호스트 이름에 들어가는 :// 구분 기호가 들어가고 호스트 주소가 쭉 들어간다.

그리고 포트 번호가 있을 때는 호스트 주소 다음에 :을 한 다음에 포트 번호가 들어간다.

그 다음에 /를 한 다음에 추가적인 경로가 들어가는데 파일 이름까지 들어갈 수 있다.

http://www.youngjin.com:8080/bank/bank.html

 

인터넷 관련 조직과 문서

 

KISA

 

TCP/IP가 어떤 것인지

OSI 7계층이 어떤 것인지

 

정보통신 기술

아날로그 신호 / 디지털 신호 

 

컴퓨터는 정보를 전송할 때 디지털 신호로 옮겨주게 된다. 이를 아날로그로 변경한다. 또는 반대로 한다. 이 장치를 모뎀 또는 코덱이라고 한다.

정보가 오갈 때 속도가 bps 또는 baud 단위로 표현한다.

3개의 bit가 하나의 그룹으로 전달될 수 있고 4개의 bit가 하나의 그룹으로 전달될 수도 있다. 이를 1초에 전달될 수 있는지를 구분하는 것이 바로 baud 다.

 

프로토콜로 통신

 

프로토콜을 구성하기 위한 하나의 로지컬한 모형이다.

그래서 참조 모델이라는 단어가 붙었다.

 

물리계층 - 물리적인 네트워크 선 (정보가 오감)

데이터 링크 계층 - 데이터 블록에 대한 전송을 담당

네트워크 계층 - 패킷 단위로 분할한 후 조립한다

전송 계층 - 사용자와 사용자 혹은 컴퓨터와 컴퓨터간의 연결을 확립하고 유지하는 계층

세션 계층 - 응용 프로그램간의 한쌍 (세션), 세션을 연결을 해서 사용자 간의 연결이 될 수 있도록 연결 통로를 열어준다.

표현 계층 - 표현 방식이 다르더라도 인터페이스 지원 (데이터 압축, 데이터 암호화)

응용 계층 - 컴퓨터 프로그램 안에서 정보를 보게 되는 단계

 

TCP/IP 구조

링크 계층 (물리적으로 정보가 오가는 계층)

인터넷 계층 (데이터의 주소, 패킷의 분할과 복구)

전송 계층 (실제적으로 데이터들이 전송이 되는 계층, 데이터의 오류 검사, 데이터의 에러 검사, 데이터의 흐름 관리)

응용 계층 (인터넷 서비스들 중 FTP, 텟넷, HTTP 등)

 

프로토콜

TCP (Transmission Control Protocol) : 전송계층, 송수신측 사이에서 데이터 전송이 정확하게 이루어지도록 전송 오류 감지 및 복구를 지원, 양방향 전송이 가능, 패킷 단위로 정보를 보내고 전송 오류 감지가 있기 때문에 신뢰성이 있는 프로토콜, 연결 지

UDP (User Datagram Protocol) : 전송계층, 일방적으로 한 곳에 전송하는 특징, 비연결현 프로토콜 특징, 전송속도가 매우 빨라야 하는 경우, 큰 정보를 보내야 하는 경우, 신뢰성 보다는 전송 속도가 요구되는 상황에서 사용

IP (Internet Protocol) : 

 

네트워크는 범위에 따라 분류

LAN ( MAN ( WAN 

                      가장 넓은 통신망 (지역, 국가)

            도시

건물, 수키로미터 내외

 

부가가치 통신망

데이터에 높은 부가가치를 부여해서 사용하는 통신망

 

네트워크 위상

네트워크를 이루는 통신선과 장치들이 어떻게 배열되어 있느냐를 의미한다.

 

 

ISDN : 종합 정보 통신망, 음성, 화상, 데이터 서비스를 통합해서 제공해주는 원거리 통합 정보 서비스. 전화를 하면서도 통신은 가능하지만 속도가 떨어진다는 단점이 있다.

ADSL : 음성 통화를 하면서도 속도의 변함없이 데이터 통신이 가능. ADSL 통신의 장점.

 

감사합니다.