자바스크립가 실행되는 시기를 클릭, 문서 로딩, 드래깅과 같은 사용자의 행위에 따라 정해 줄 수 있는데 이 때 사용하는 것이 이벤트 핸들러입니다.


이벤트핸들러와 이벤트의 차이점을 비교해보고 자바스크립트와 함께 사용해봅시다.



이벤트와 이벤트핸들러

사용자가 마우스를 움직이거나 키를 누르는 등의 동작을 이벤트라 합니다.

이 앞에 on을 붙이면 이벤트핸들러가 되는데, 이것은 '이벤트가 발생했을 때'로 해석할 수 있습니다.


이렇게 이벤트는 행위를 발생시키는 것이고, 이벤트핸들러는 이벤트의 발생 여부에 따라 지정된 함수나 명령을 수행하는 것입니다.


이벤트와 이벤트핸들러의 종류

 이벤트(이벤트핸들러)

설명 

 마우스관련

사용자가 마우스를 조작할 때 발생

click(onClick) 

창, 버튼 등을 클릭했을 때 

dblclick(onDbclick) 

마우스를 더블클릭 했을 때 

mouseover(onMouseover) 

링크나 그림 위로 마우스가 올라갈 때 

 mouseout(onMouseout)

마우스가 링크나 그림 영역에서 벗어낫을 때 

mousedown(onMousedown) 

마우스 버튼을 누르는 순간 

mouseup(onMouseup) 

마우스 버튼을 눌렀다가 때는 순간 

mousemove(onMousemove) 

마우스가 위치를 옮겼을 때 

dragdrop(onDragdrop) 

마우스를 클릭한 상태에서 이동했을 때 

포커스 관련 

커서가 도착했을 때 발생 

focus(onFocus) 

커서가 위치할 때 

blur(onBlur) 

커서를 잃어버렸을 때 

키보드 관련 

키보드에 입력이 있을 때 발생 

keydown(onKeydown) 

키보드의 키를 누를 때

keypress(onKeypress) 

키보드의 키를 누르는 순간 

keyup(onKeyup) 

키보드의 키를 눌렀다가 때는 순간 

폼 관련 

폼 문서에서 발생 

submit(onSubmit) 

전송 버튼을 눌러 폼 문서를 제출할 때 

 reset(onReset)

입력 양식을 초기화 할때 

select(onSelect) 

입력 상자의 문자열이나, 체크상자, 라디오버튼을 선택할 때 

change(onChange) 

입력 양식의 값이 바뀌엇을때, 목록상자의 항목을 변경 했을 때 

윈도우 관련

윈도우에서 발생 

load(onLoad) 

브라우저에서 문서를 읽어올 때 

unload(onUnload)

브라우저의 문서를 닫을 때

move(onMove)

프레임이나 브라우저를 이동했을 때 

resize(onResize)

프레임이나 브라우저의 크기를 변경했을 때 

그림 관련 

그림이나 문서에서 발생 

abort(onAbort) 

그림을 읽는 도중 중지했을 때 

error(onError) 

문서나 그림을 읽는 도중 중지 했을 때 


아이디:

비밀번호 :

입력상자 :

저작자표시 동일조건

'웹' 카테고리의 다른 글

자바스크립트 기본 사용법  (0) 2012.05.10
자바스크립트 기본학습  (0) 2012.05.10
폼(Form) 관련 태그 폼 문서(회원가입 창) 만들기  (3) 2012.05.07
목록 관련 태그  (0) 2012.05.05
HTML 기본구조와 태그  (0) 2012.05.05



자바스크립트 기본 사용법


자바스크립트는 HTML 문서에서 <head> 태그나 <body> 태그 사이에 삽입합니다.

자바 스크립트의 기본 구조입니다.


<script language="javascript">


스크립트 내용~~~


</script>



자바스크립트는 삽입방법이나 위치에 따라 실행되는 시기가 달라집니다.


내장형

HTML 문서 내에 소스를 직접 입력하는 방식으로, <head> 태그나 <body> 태그 사이에 입력할 수 있지만, 대부분 해석순서를 고려하여 <head> 태그 사이에 입력합니다.

<head>

<script>

~~자바 스크립트 소스

</script>

</head>

<body>

<script>

~~자바 스크립트 소스

</script>

<body>



행 입력형

HTML 문서의 태그 내에 이벤트핸들러와 함께 사용합니다.

프로그램이 복잡하지 않고 단순한 경우 사용하면 편리합니다.


<태그 이벤트핸들러="자바스크립트 소스">


(예제)

<form onClick="alert('환영')"><input type=button value="환영"></form>

(실행)
  << 클릭

  

 



함수형

함수(function)는 프로그램명으로 이해하면 됩니다.

소스가 길어질 경우 함수로 이름을 지정하여 호출해서 사용합니다.

문서 내장형과 같이 <head>나 <body> 태그 사이에 삽입할 수 있지만

해석 순서를 고려하여 <head>태그 사이에 입력하는 것이 보편적 입니다.

함수를 호출할 경우에만 실행됩니다.


<head>

<script language="javascript">

function 함수명()

{

자바 스크립트 소스~

}

</head>


또한 함수를 실행할 때는

<태그 이벤트핸들러="함수명()">

이렇게 하여 실행한다.





링크형


링크형은 자바스크립트 소스를 확장자 *.js인 외부 파일로 저장하여 불러옵니다.

링크형을 사용하면 좋은점은 다음과 같습니다

  • HTML 문서가 길어지는 것을 방지하고 소스를 간략화 시킨다.


    자바스크립트 소스의 노출을 방지하여 보안성을 향상시킨다.


    자바스크립트 소스를 여러 페이지에 적용할 수 있어 효과적인 작업을 할 수 있고 용량을 줄여준다.


링크형 자바스크립트 사용방법

<script src="js 파일의 전체경로"></script>



주의사항

자바스크립트를 작성할 경우 지켜야할 몇가지 주의사항을 알아보겠습니다.


1. 대소문자 반드시 구분해야 합니다.


2. 구문은 한 줄에 한개씩 위치시킵니다. 

한줄에 두개 이상 구문을 두려면, 구문 사이에 세미콜론(;)으로 구분합니다.

ex) alert("안녕"); alert("하세요")


3. 객체, 속성, 메소드, 함수의 구분은 마침표(.)연산자를 사용합니다.


4. 한 개의 구문을 한 줄에 모두 쓰지 못할 경우에는 밑줄(_)을 이용하여 다음 줄과 연결되었음을 표시합니다.

ex) document.write_

("안녕하세요")


5. 문자열 표시는 따옴표를 사용해야 한다.


6. 작은 따옴표나 큰따옴표를 중첩해서 사용할 때는 나중에 시작한 따옴표를 먼저 닫아야 한다.


7. 따옴표 자체를 문자열에 포함시켜야 할 경우에는 역슬래시(\)와 따옴표를 함께 사용한다.




주석달기

자바스크립트에서는 두가지 방법으로 주석문을 작성할 수 있습니다.


1. 한 행을 주석문 처리

//주석 처리할 행,문장


2.두행 이상 주석문 처리


/* 주석 처리할 영역 ~~ */
저작자표시

'웹' 카테고리의 다른 글

자바스크립트 이벤트와 이벤트핸들러  (0) 2012.05.10
자바스크립트 기본학습  (0) 2012.05.10
폼(Form) 관련 태그 폼 문서(회원가입 창) 만들기  (3) 2012.05.07
목록 관련 태그  (0) 2012.05.05
HTML 기본구조와 태그  (0) 2012.05.05



스크립트와 자바스크립트

스크립트란 일종의 매크로로, 프로그래밍 경험이 없는 사람도 손쉽게 프로그램을 자신이 원하는 대로 조작할 수 있게 해줍니다.

스크립트는 정의된 명령어만 사용하기 때문에 편리하지만, 복잡한 응용프로그램을 만들기에는 부적합합니다.

대표적인 스크립트는 자바스크립트, VBscript,jscript 등이 있습니다.


자바스크립트는 웹 브라우저에서 사용할 수 있는 스크립트 언어로,  HTML 문서 내에 함계 존재하고 배우기 쉽습니다. 객체가 한정되어 있긴 하지만 HTML, CSS로 할 수 없는 일을 가능하게 하고, 동적인 홈페이지를 만들거나 자료를 검증하기도 합니다.


자바스크립트는 넷스케이프와 선 마이크로시스템즈가 공동으로 프로젝트를 진행하여 만들었으며, 이 때문에 초기에는 인터넷 익스플로러에서는 많은 오류가 발생했었습니다. 하지만 현재는 대부분의 문제점을 해결하여 인터넷 익스플로러에서도 제대로 동작합니다.



자바스크립트의 사용목적과 특징

자바스크립트를 사용하는 목적은 다음과 같습니다.


1.  인터렉티브(interactive)한 홈페이지를 제작하여 사용자가 컴퓨터와 실시간 대화하듯이 메세지를 주고 받을 수 있다.


2.  경제적인 가격의 컴퓨터로 서버를 구축해서 사용할 수 있다.


3.  플랫폼이 독립적이다.(컴퓨터 기종에 관계없이 사용할 수 있다.)


4.  HTML로는 표현이 불가능했던 프로그램적인 활용이나 동적인 표현이 가능해 좀더 역동적인 홈페이지를 만들 수 있다.


5.  서버로 전송될 자료의 검증을 웹 프로그램이 실행되기 전인 클라이언트 단계에서 실행하므로 웹 프로그램을 사용할 때 반드시 필요하다.




자바와 자바스크립트를 비교하면 자바스크립트의 특징을 좀더 쉽게 이해할 수 있습니다.

자바와 자바스크립트 용어가 똑같이 자바로 시작해서 같은 종류의 프로그램일 거라고 착각하기 쉽지만, 다른 프로그램입니다.

 

 구분

 자바

자바스크립트 

해석 위치 

서버 내의 파서(parser)

클라이언트의 브라우저 

언어형 

컴파일러 방식 : 서버에서 컴파일 되어 클라이언트에서 인터프리터됨 

인터프리터 방식 : 서버가 아닌 클라이언트에서 인터프리터 됨 

존재 

HTML 파일과 별도로 존재 

HTML 문서 내에 기술 

객체 지향 

객체 지향언어 : class가 존재하고 생성, 상속 가능 

객체 기반 언어 : 객체의 표현과 상속은 가능하나 생성이 불가능 

바인딩 

정적 바인딩 

동적 바인딩 

소스

확인 불가능

확인 가능

보안성

      있음

없음

변수형

변수, 자료형의 정의가 있고 명확하게 구분됨

변수의 형을 미리 정의하지 않아도 됨

속도

빠름

느림

사용

어려움

쉬움

운영체제

부분적인 제한

제한 없음


자바 스크립트 기본 사용법


저작자표시

'웹' 카테고리의 다른 글

자바스크립트 이벤트와 이벤트핸들러  (0) 2012.05.10
자바스크립트 기본 사용법  (0) 2012.05.10
폼(Form) 관련 태그 폼 문서(회원가입 창) 만들기  (3) 2012.05.07
목록 관련 태그  (0) 2012.05.05
HTML 기본구조와 태그  (0) 2012.05.05


사용자에게서 정보를 입력받고 그에 따른 처리를 할 때 사용하는 것이 폼 문서입니다.

사용자에게서 정보를 입력받을 때는 입력상자, 목록상자, 체크 버튼 등 다양한 방법을 사용합니다.

인터넷에서 쉽게 볼 수 있는 회원가입창 입니다.

이러한 회원가입, 게시판 글쓰기, 자료 검색 등의 구현은 밑의 순서로 이루어 집니다.



1. HTML로 폼 양식 만들기

폼 태그로 입력상자, 목록상자, 버튼을 삽입하여 폼 문서를 만듭니다.



2. CSS로 폼 양식 꾸미기

입력상자를 얇은 테두리로 꾸미기, 버튼에 색상 입히기, 스크롤바 색상 바꾸기 등 폼 양식을 좀더 꾸밉니다.


3. 자바스크립트 문서 검증하기

입력상자에 값이 입력 되었는지, 비밀번호는 일치하는지, 주민등록번호가 형식에 맞는지 등을 검증하여 잘못된 값을 입력받을 경우 오류 메세지를 띄웁니다.


4. 웹 프로그램 실행하기

ASP, PHP와 같은 웹 프로그램을 실행하여 실제로 회원 정보를 서버에 전달합니다.





결국, 회원가입등을 제공하기 위한 목적으로 폼 문서를 만듭니다.

이번에는 폼 문서를 만들기 위해 필요한 폼 태그를 알아보겠습니다.




 태그명 

  결과  

설명 

<form>..</form> 

안보임

폼 양식의 시작과 끝 

<input type=text> 

한 줄 입력상자

<input type=password>

*로 표시되는 비밀번호 입력상자

<input type=radio> 

돌마

라디오 버튼

<input type=checkbox> 

돌돌마

체크상자

<input type=button> 

일반 버튼

<input type=submit> 

전송 버튼 

<input type=reset> 

초기화 버튼 

        <input type=image>

   이미지 불러옴

이미지 업로드

 <input type=file>

파일 업로드 

 <input type=hidden>

 안보임

빈 필드 표시

 <textarea>  <textarea>

여러 줄 입력상자

 <select>...</select>

      목록의 시작과 끝

<option>010</option>

목록상자에서  목록들을 표시





<form>태그 관련 속성

 속성

표현 

설명 

name 

<form name=...> 

폼 이름을 설정한다. 

method 

<form method=post>

<form method=get> 

폼 전송 방식을 POST 방식으로 한다.

폼 전송 방식을 GET 방식으로 한다. 

action 

 <form action="member.php">

폼 내용이 member.php에 의해서 전달된다. 

target 

<form target=..> 

..창에 폼 실행 결과를 보여준다. 








(예제)

<form name=frm1>


<table align=center border=1 bordercolor=white bordercolorlight=gray cellspacing=0 cellpadding=2>

<tr bgcolor=#ececec align=center>

<td colspan=2>폼 양식 만들기</td>

</tr>

<tr>

<td bgcolor=#ececec align=center>아이디</td>

<td>

<input type=text name=id size=12 maxlength=12>

</td>

</tr>

<tr>

<td bgcolor=#ececec align=center>패스워드</td>

<td><input type=password name=pw size=12 maxlength=8></td>

</tr>

<tr>

<td bgcolor=#ececec align=center>성별</td>

<td>

<input type=radio name=sex value=1>남

<input type=radio name=sex value=2 checked>여

</td>

</tr>

<tr>

<td bgcolor=#ececec align=center>국적</td>

<td>

<input type=text value=대한민국 readonly>

    <input type=button value=국적변경 disabled>

</td>

</tr>


<tr>

<td bgcolor=#ececec align=center>휴대폰</td>

<td>

<select name=phone1>

<option value=1 SELECTED>011</option>

<option value=2>016</option>

<option value=3>017</option>

<option value=4>018</option>

<option value=5>019</option>

</select>

-

<input type=text name=phone2 size=4 maxlength=4>

-

<input type=text name=phone3 size=4 maxlength=4>

</td>

</tr>


<tr>

<td bgcolor=#ececec align=center>가족사항</td>

<td>

<input type=checkbox name=familly1 value=1>조부모

<input type=checkbox name=familly2 value=2 checked>부모

<input type=checkbox name=familly3 value=3>형제자매

<input type=checkbox name=familly4 value=4>배우자

<input type=checkbox name=familly5 value=5>자식

</td>

</tr>

<tr>

<td bgcolor=#ececec align=center>소개글</td>

<td>

<textarea cols=50 rows=5 name=memo>관심분야에 대해 쓰세요</textarea>

</td>

</tr>


<tr>

<td bgcolor=#ececec align=center>증명사진</td>

<td><input type=file size=40></td>

</tr>

<tr>

<td bgcolor=#ececec colspan=2 align=center>

<input type=submit value=가입하기>

<input type=reset value=다시작성>

</td>

</tr>

</table>


</form>




실행결과



폼 양식 만들기
아이디
패스워드
성별 남 여
국적
휴대폰 - -
가족사항 조부모 부모 형제자매 배우자 자식
소개글
증명사진


저작자표시 변경금지

'웹' 카테고리의 다른 글

자바스크립트 기본 사용법  (0) 2012.05.10
자바스크립트 기본학습  (0) 2012.05.10
목록 관련 태그  (0) 2012.05.05
HTML 기본구조와 태그  (0) 2012.05.05
홈페이지 만들기 기초 - 2  (0) 2012.05.01

이번에는 HTML문서에서 목록을 나타내는 태그를 알아보겠습니다.



목록 만드는 법


<ol>, <ul> 태그는 문자 앞에 글머리표나 순서를 붙여 줍니다.


목록은 순서 없는 목록과 순서있는 목록이 있습니다.

목록을 만들때는 <ol> 또는 <ul> 태그를 사용합니다.

그리고 그 안에서 <li>태그를 함께 사용합니다.



예제

좋아하는 음료수

<ul>

<li>콜라

<li>사이다

<li>포카리 스웨트

</ul>


(실행)

좋아하는 음료수
  • 콜라
  • 사이다
  • 포카리 스웨트


<ul> 태그는 목록이 순서가 없이 나오고

태그 속성에 모양을 지정해 줄수 있습니다.

ex) <ul type=square>,<ul type=circle>..





예제

좋아하는 음료수

<ol type=A>

<li> 콜라

<li> 사이다

<li> 포카리 스웨트

</ol>


(실행)

좋아하는음료수
  1. 콜라
  2. 사이다
  3. 포카리 스웨트

<ol> 태그는 목록이 순서대로 나오고

태그 속성에 앞에 순서 순번을 지정해 줄수 있습니다.

ex) <ol type=A>,<ul type=a>...





 비교 항목

   <ul> 태그

   <ol>태크

 약어

  unorderlist 

  orderlist 

 용도

  순서 없는 목록   순서 있는 목록 

Type 속성

disk, circle, square 

 A(순번 대문자) , a(소문자), l (로마 숫자 대문자), i (로마 숫자 소문자)

기본값 

 disk

1 

 사용 예

 <ul type=square>

 <ul type=a>





<li> 태그는 'list ltem'의 약자로 각각 항목을 지정할 때 사용하며 </li>태그는 생략이 가능합니다.



<ol>, <li>태그에서 사용하는 속성

 속성

 표현

설명 

start 

<ol start=100> 

순번이 100번 부터 매겨진다 

value 

<li value=5> 

해당 항목부터 순번이 5번부터 매겨짐 

 type

<li type=a> 

해당 항목부터 소문자로 순서를 매긴다. 


저작자표시

'웹' 카테고리의 다른 글

자바스크립트 기본학습  (0) 2012.05.10
폼(Form) 관련 태그 폼 문서(회원가입 창) 만들기  (3) 2012.05.07
HTML 기본구조와 태그  (0) 2012.05.05
홈페이지 만들기 기초 - 2  (0) 2012.05.01
홈페이지 만들기 기초 - 1  (1) 2012.05.01

HTML 기본구조


HTML의 경우 기본구조가 있어, 그 구조에 맞춰 해당 태그를 입력하면 됩니다.


웹 문서는 크게 머리부, 몸체부로 나뉠수 있습니다.



위에 빨간 사각형이 머리부

아래 빨간 사각형이 몸체부라고 할 수 있습니다.


소스에서 <html> , <head>와 같이 산형괄호( <> )로 묶인 것을 태그라고 합니다.

이러한 태그들은 사용 용도가 정해져 있으므로, 필요한 곳에 가져와서 사용하면 됩니다.


대부분의 태그는 여는태그 ( <태그명> )와 닫는 태그 ( </태그명> )로 구성되어 적용 범위를 정할 수 있습니다.


간단한 HTML 소스의 기본 구조


<html>        -- HTML 문서의 시작을 알려줌

<head>    -- 머리부 시작을 알려줌

<title> 홈페이지 </title>   -- 타이틀 바에 표시할 문자 표시

</head>   -- 머리부 끝을 알려줌

<body>    -- 몸체부 시작을 알려줌

안녕하세요..         

반갑습니다..

할말이 없네여..

</body>    -- 몸체부 끝을 알려줌

</html>    -- HTML 문서 끝을 알려줌


아주 간단한 HTML소스입니다. 한번 웹브라우저로 열어 볼까요?





<html> ... </html>

HTML 문서 형식으로 작성됬음을 나타내고 문서의 시작과 끝을 알려줍니다.

문서를 만들 때 제일 먼저 <html> 태그를 적고, 가장 마지막에 </html> 태그로 닫아 주어야 합니다.

실행 결과에는 변화를 주지 않고 홈페이지의 시작과 끝을 알려줍니다.



<head> ... </head>

머리부임을 알려주는 태그로, <html> 처럼 실행 결과에 변화를 주지 않지만, 

<head> 태그 사이에 문서 정보를 입력해 문서 전체를 변화시킬 수 있습니다.

<head>태그 사이에는 <title>, <meta>, <style>, <script> 태그 등을 삽입할 수 있습니다.



<body> ... </body>

몸체부의 시작과 긑을 알려주고 실질적으로 브라우저에 표시할 문서를 기록하는 곳 입니다.

홈페이지에서 보이는 대부분은 이 태그 사이에 기록합니다.

문자, 그림, 표와 같은 실제로 문서를 구성하게 될 구성 요소를 <body>태그 사이에 입력합니다.

'웹' 카테고리의 다른 글

폼(Form) 관련 태그 폼 문서(회원가입 창) 만들기  (3) 2012.05.07
목록 관련 태그  (0) 2012.05.05
홈페이지 만들기 기초 - 2  (0) 2012.05.01
홈페이지 만들기 기초 - 1  (1) 2012.05.01
웹페이지 동작 원리  (0) 2012.04.30


홈페이지 제작 관련 기술은 크게 웹 프로그래밍 분야와 웹 디자인 분야로 나눌 수 있습니다.



웹 프로그래밍 분야


웹 문서 제작언어

  • HTML
    HTML은 홈페이지 문서를 만드는 가장 기본적인 언어입니다. 문서의 내용을 꾸미거나 그림, 표, 프레임을 삽입할 수 있고 배경 음악이나 동영상을 삽입할 수도 있습니다.

    이러한 작업은 태그 명령어로 지정하고 태그는 <태그명> ... </태그명> 으로 표기합니다.

    단 HTML은 문서를 보여줄 뿐 프로그래밍은 불가능합니다.

  • CSS
    CSS(Cascading Style Sheets)는 문서의 서식을 지정할 때 사용합니다.

    행간, 배경, 그림 고정 등 HTML로는 불가능한 일을 하고, 홈페이지 전체의 서식을 일관성 있게 지정할 수있습니다.






웹 디자인 분야


  • 일러스트레이터(Illustrator)
    어도비(Adobe) 제품으로 벡터 이미지 제작 도구입니다. 주로 로고 및 캐릭터를 제작할 때 사용합니다.

  • 포토샵(Photoshop)
    2차원 컴퓨터그래픽 프로그램으로 어도비 제품입니다. 홈페이지에 들어갈 메뉴,  버튼, 문자, 그림을 제작할 때 사용하고 사진을 보정하거나 표지 디자인 등에도 활용합니다.

  • 플래시(Flash)
    매크로미디어(Macromedia) 제품이며, 웹 애니메이션 제작용 프로그램으로 동적이고 화려한 홈페이지를 제작할 수 있습니다. 인기 있는 플래시 애니메이션으로는 엽기토끼, 졸라맨 등이 있고 애니메이션 카드, 인트로 제작 시에 많이 사용합니다.
저작자표시

'웹' 카테고리의 다른 글

목록 관련 태그  (0) 2012.05.05
HTML 기본구조와 태그  (0) 2012.05.05
홈페이지 만들기 기초 - 1  (1) 2012.05.01
웹페이지 동작 원리  (0) 2012.04.30
인터넷개요  (0) 2012.04.30





홈페이지 만들기


홈페이지를 제작하는 데 가장 중요한 것은 어떤 목적으로 홈페이지를 제작하는 것이다.

개인 홍보인지, 혹은 물건 판매가 목적인지에 따라 홈페이지를 제작할 때 중요하게 다룰 부분이 조금씩 달라진다. 




1. 홈페이지 제작 목적


① 자기 만족과 개인 홍보

개인적으로 관심 있는 분야나 이력서, 사진, 프로젝트 결과 등 개인 상품 정보를 다른 사람에게 제공해 자신을 마케팅한다.


②기업 홍보와 물건 판매

기업 측면에서 보면 인터넷 사용자가 언제 어디서든 기업의 광고를 24시간 볼 수 있으므로 효과적으로 광고할 수 있다. 또한 기업정보, 물품 정보 및 고장, 수리 등과 같은 고객의 요구 사항을 고객이 언제든지 요청, 요구할 수 있어 고객 서비스를 극대화 할 수 있다.

그 외에도 전자 상거래를 통해 좀더 편리하게 물품을 거래할 수 있는 장점이 있다.


③정보 공유

자신만의 정보를 다른 사람과 공유할 수 있다.


④인터넷 프로그래밍의 이해

ASP, JSP, PHP 등의 웹 프로그래밍으로 넘어가기 전, HTML 등 기반 지식을 확실히 익히고자 할 때 학습한 HTML, CSS, 자바스크립트 등을 이용해 홈페이지를 만든다.




2. 홈페이지 제작 과정


홈페이지의 제작 과정은 기획 단계부터 제작 단계, 배포와 관리, 평가 단계 까지 정해진 순서와 원칙을 따라야한다.



기획단계

홈페이지를 제작하기 전에 제작 목적, 주제 대상층 등을 명확히 정해야 한다.

  • 어떤 목적에서 홈페이지를 제작할 것인가

  • 목적을 정했으면, 다룰 주제를 정한다.

  • 주제에 어울리는 도메인명을 정한다.

  • 해당 주제를 다루는 경쟁 사이트를 분석하고 시장 조사를 한다.

  • 분석과 시장조사를 통해 도출된 주제에 맞는 내용과 자료, 대상층 등을 정한다

  • 홈페이지 제작에 소요될 개발 일정과 팀 단위일 경우 업무분담을 어떻게 할 것인가를 정한다.

  • 홈페이지 제작에 필요한 개발 비용과 향후에 소요되는 서비스 비용을 산정해본다.
  • 홈페이지를 어떻게 홍보할 것인지 생각한다.

  • 홈페이지에 접속할 사용자, 트래픽 등을 예상해본다.

  • 향후 홈페이지를 어떻게 관리할 것인지 생각한다.




제작단계


홈페이지 기획이 끝나면 실제로 제작을 시작한다.

기획 단계처럼 제작 단계도 밑의 순서를 지켜야 효과적으로 제작할 수 있다.


  • 주제에 맞게 스토리보드를 작성한다. 소설을 쓰듯이 주내용과 부내용으로 구분하여 전체 스토리를 형성한다

  • 홈페이지 전체의 구조와 페이지 수, 페이지마다 들어갈 메뉴 등을 결정한다.

  • 전체적인 홈페이지 그림을 스케치,디자인해 본다.

  • 메인 그림을 제작하고 홈페이지 문서를 만든다.

  • 홈페이지 소스를 웹에서 테스트해보고 원하는 대로 제작 되었는지 샐행되지 않는 부분은 없는지 확인해본다.


배포와 관리, 평가 단계


홈페이지 제작이 완료되면 이제 자신의 홈페이지를 홍보할 차례다.

또한 홈페이지를 올린 후 원하는 대로 제작되었는지, 효용성 등을 체크해본다.


  • 처음 기획한 목적과 주제에 부합하는가
  • 홈페이지에 접속할 때 소용 시간이 짧은가
  • 사용자 중심의 인터페이스가 올바로 구축되어 있는가
  • 디자인과 그림, 색상등이 주제와 어울리는가
  • 향후 업데이트를 고려해서 제작되었는가
  • 보안, 백업 등을 위한 위기 관리 대책은 있는가

'웹' 카테고리의 다른 글

목록 관련 태그  (0) 2012.05.05
HTML 기본구조와 태그  (0) 2012.05.05
홈페이지 만들기 기초 - 2  (0) 2012.05.01
웹페이지 동작 원리  (0) 2012.04.30
인터넷개요  (0) 2012.04.30

웹페이지는 크게 HTML을 이용한 정적인 문서와 ASP, PHP, JSP 같은 웹프로그래밍을 이용한 동적인 문서 두 가지로 나뉩니다.


HTML 문서는 사용자 컴퓨터에서 해석되고 실행되는 클라이언트측 페이지이고, ASP, JSP, PHP 등을 이용한 동적인 문서는 웹페이지에서 해석되어 HTML문서로 변환되어 사용자 컴퓨터를 전달하는 서버측 페이지입니다.


1.클라이언트측 페이지

클라이언트측 페이지는 보통 HTML, CSS, 자바스크립트를 사용해서 제작하며 확장자가 보통 HTM, HTML입니다.


2. 서버측 페이지

PHP, ASP, JSP 등과 같은 웹 프로그래밍 언어로 제작되는 웹 페이지는 웹서버에서 해석하며, 게시판에 글쓰기, 회원가입, 설문조사 등과 같이 실시간으로 데이터를 입력, 편집하는 일이 가능합니다.

서버측 페이지의 경우 사용자가 문서를 요청하면, 웹 서버에서 해석하고 변환한 후 사용자에게 HTML 문서로 변환하여 보여줍니다.

'웹' 카테고리의 다른 글

목록 관련 태그  (0) 2012.05.05
HTML 기본구조와 태그  (0) 2012.05.05
홈페이지 만들기 기초 - 2  (0) 2012.05.01
홈페이지 만들기 기초 - 1  (1) 2012.05.01
인터넷개요  (0) 2012.04.30



인터넷이란 




인터넷은 전세계적인 네트워크를 하나로 연결하는 망들의 망, 즉 네트워크의 결합체를 뜻합니다.


사용자가 어떤 컴퓨터에 있든지 수많은 네트워크에 있는 다른 컴퓨터에 접속해 정보를 얻을 수 있고 통신을 할수있습니다.


인터넷은 1969년 미국방성의 지원으로 미국 내 3개의 대학 UCLA , UCSB , 유타대학과 연구기관 SRI의 


컴퓨터를 연결하기 위해 구축한 알파넷에서 시작하였습니다.


90년대 초까지는 주로 컴퓨터 과학자와 학자 사이에서 학술적인 의견이나 문서를 전송하는 등의 목적으로 사용했지만 1993년 웹 브라우저가 개발되면서 좀더 다양한 분야에서 활용 되기 시작했습니다.


특히 데이터 , 텍스트 ,  문서 , 이미지, 사운드, 애니메이션, 동영상 등 다양한 정보를 원하는 즉시 액세스할 수 있게 되면서 인터넷 이용률이 폭발적으로 증가하여 현재의 인터넷이 완성되었습니다.

'웹' 카테고리의 다른 글

목록 관련 태그  (0) 2012.05.05
HTML 기본구조와 태그  (0) 2012.05.05
홈페이지 만들기 기초 - 2  (0) 2012.05.01
홈페이지 만들기 기초 - 1  (1) 2012.05.01
웹페이지 동작 원리  (0) 2012.04.30

+ Recent posts

티스토리툴바