5일차 교육중 2일차 강의를 시작하겠습니다.
2일차 강의의 주요 내용은 직접 개발과 관련된 내용이라 기 공지드린대로 여러분 컴퓨터에 이미 개발환경이 구축되어 있다는 전제로 강의를 진행토록 하겠습니다.
그런데 개발환경 구축은 어렵지는 않으셨나요? 설치하는데 무척 오랜시간이 걸리셨죠? 컴퓨터 사양에 따라 다소 시간의 차이는 있지만 반나절은 족히 걸리셨을것 같습니다.
자, 그럼 이번강의 주제인 웹프로그래밍 기술구성요소를 한번 알아보죠.
2일차 개발 및 서비스 환경 이해하기
2.1 웹프로그래밍 기술구성요소
2.2 .NET Platform 과 MVC 패턴
2.3 ASP.NET MVC5 기술소개
2.4 VisualStudio 통합개발환경 이해하기
2.5 ASP.NET MVC5 웹응용프로그램 기초
2.6 윈도우즈 서버 와 IIS 웹서버
웹프로그래밍, 즉 웹사이트를 개발하기 위해서는 그 실체인 웹 페이지의 구성요소를 분석해보면 좋습니다. 정적 웹페이지든 동적 웹페이지든 그 결과물은 HTML 문서입니다.
개발된 모든 웹 페이지는 일반적으 서버상의 지정된 경로에 저장되며 웹 서버라는 서버 프로그램 환경을 통해 사용자에게 서비스 되어집니다
[그림2-1] 웹 페이지 요청 및 응답 프로세스
웹 페이지는 웹 프로그래밍에 의해 동적으로 HTML이 구성되는 동적 웹 페이지와 HTML소스의 변경 없이 그대로 사용자에게 웹 서버를 통해 전달되는 정적 웹 페이지로 나뉘어 집니다.
따라서 웹 프로그래밍의 기술환경과 그 구성요소는 HTML이 최종 전달되는 사용자 웹 브라우저 환경인 클라이언트 측에서 작동되는 기술들과 동적으로 웹 서버상에서 HTML을 생성 또는 변경하는 서버 측 기술로 나누어 설명 할 수 있습니다.
[그림2-2] 클라이언트 측 기술 과 서버 측 기술 비교
2.1.1 클라이언트 측 기술 구성요소
웹페이지를 요청하거나 응답으로 수신한 HTML문서를 웹브라우저로 확인하는 클라이언트측 기술에는 HTML,CSS,JAVASCRIPT,각종 플러그인 프로그램들이 존재합니다.
해당 기술요소는 웹브라우저 기반에서 작동됩니다.
클라이언트측 기술구성요소를 간략한 실습을 통해 그 사용법을 익혀보도록 하겠습니다.
A.HTML(HyperText Markup Language)
-웹페이지의 뼈대를 구성하는 마크업 언어입니다.
-다양한 HTML 요소를 통해 컨텐츠를 표현하며 브라우저에 의해 해석되어집니다.
-주요 HTML 요소를 통해 전체 페이지 레이아웃을 구성해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="description" content="HTML태그 샘플 페이지1입니다.">
<title>HTML샘플1</title>
<style type="text/css">
</style>
</head>
<body>
<div>
<header>
<h1>상단 헤더 영역</h1>
</header>
<div>
<h2>좌측 메뉴 영역</h2>
<ul>
<li><a href="http://www.mixedcode.com" target="_blank">믹스드코드닷컴</a></li>
<li><a href="http://www.naver.com" target="_blank">네이버</a></li>
<li><a href="http://www.daum.net" target="_blank">다음</a></li>
</ul>
</div>
<div>
<section>
<h2>본문</h2>
<p>
첫번째 단락 본문글입니다.
</p>
<p>
첫번째 단락 본문글입니다.
</p>
<br />
</section>
</div>
<footer>
<p>바닥글</p>
</footer>
</div>
<script type="text/javascript">
</script>
</body>
</html>
실행결과를 확인해보면 단순 텍스트만 나열된 느낌입니다.
B.CSS
-HTML의 스타일을 미리 지정해놓은 문서로 HTML의 보여지는 모습을 담당합니다.
-CSS는 HTML요소에 대한 스타일 적용을 통해 보여지는 모습을 제어합니다.
-CSS는 CSS선택자를 통해 HTML태그 요소를 선택하여 스타일 적용을 할수있습니다.
ㄴ태그 선택자: HTML문서내 지정한 태그 모두를 동일 스타일로 적용 처리합니다.
ㄴ클래스 선택자: HTML태그에 동일class명으로 지정된 HTML 요소들을 동일 스타일로 적용합니다.
ㄴID 선택자 : HTML태그에 id값이 부여된 특정 요소에만 특정한 스타일을 적용합니다.
다음은 HTML요소에 대한 스타일 적용순서입니다.
STEP1: HTML 태그를 표기하고 class, id 속성을 지정합니다.
Ex) <li>테스트</li> <div class=”container”></div> <div id=”sidebar”></div>
STEP2. CSS 선택자를 통해 스타일 정의 영역에서 HTML요소의 스타일을 정의합니다.
-태그선택자 : 태그명{ 속성명1:값;속성명2:값;.... } ex) li { font-size:20pt;color:red; }
-클래스선택자 : .클래스명{ 속성명1:값;속성명2:값;... } ex) .container { width:940px;margin:0px;}
-아이디선택자 : #아이디명{속성명1:값;속성명2:값;...} ex) #sidebar { width:260px;padding:20px;}
-HTML요소에 CSS선택자를 통해 스타일을 적용해보록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="description" content="HTML태그 샘플 페이지1입니다.">
<title>HTML샘플1</title>
<!-- 스타일 시트 정의 영역 -->
<style type="text/css">
.container {
width: 940px;
margin: 0px auto;
padding: 20px;
border: 1px solid #bcbcbc;
}
header {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #bcbcbc;
}
.content {
width: 580px;
padding: 20px;
margin-bottom: 20px;
float: right;
border: 1px solid #bcbcbc;
}
#sidebar {
width: 260px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
footer {
clear: both;
padding: 20px;
border: 1px solid #bcbcbc;
}
li {
font-size: 20pt;
color: red;
}
</style>
</head>
<body>
<!-- 전체 HTML 본문 영역 -->
<div class="container">
<!-- 페이지 상단헤더 영역 -->
<header>
<h1>상단 헤더 영역</h1>
</header>
<!-- 페이지 왼쪽메뉴 영역 -->
<div id="sidebar">
<h2>좌측 메뉴 영역</h2>
<ul>
<li><a href="http://www.mixedcode.com" target="_blank">믹스드코드닷컴</a></li>
<li><a href="http://www.naver.com" target="_blank">네이버</a></li>
<li><a href="http://www.daum.net" target="_blank">다음</a></li>
</ul>
</div>
<!-- 페이지 본문 영역 -->
<div class="content">
<section>
<h2>본문</h2>
<p>
첫번째 단락 본문글입니다.
</p>
<p>
첫번째 단락 본문글입니다.
</p>
<br />
</section>
</div>
<footer>
<p>바닥글</p>
</footer>
</div>
<!-- 스크립트 정의 영역 -->
<script type="text/javascript">
</script>
</body>
</html>
HTML의 레이아웃이 스타일에 의해 표현되었으며 HTML요소에 대해 기본스타일이 적용된 모습을 확인할수 있습니다.
C.JavaScript
-클라이언트측(WebBrowser)에서의 실질적 프로그래밍을 담당합니다.
-일명 스크립트 프로그래밍,프론트엔드 개발,UX개발 을 할때 사용되는 프로그래밍 언어입니다.
-자바스크립트 언어는 탄생 초창기에는 브라우저기반에서의 HTML/CSS/FORM요소등을 제어하기 위한 웹 FrontEnd 전용 프로그래밍 언어로 사용되다
최근에는 자바스크립트 언어를 이용하여 서버사이드 개발(node.js) 및 APP 개발(Facebook React Native,Appcelerator Titanium,Sencha)등도 할수있는
다양한 분야에서 사용되고있는 강력한 언어로 그 기능 및 위상에 큰 변화가 진행되고 있는 개발언어입니다.
-요즘은 javascript를 직접 사용하여 코딩하는것보다는 javascript 기반의 개발편리성 및 생산성 향상을 위해 만들어진 플러그인 프로그램인
javascript library로 JQuery 사용이 일반화되고 있는 추세이지만 개발자라면 기본적인 javascript 사용법도 충분히 숙지하는것이 좋습니다.
-간단한 메일발송 양식을 만들고 순수 자바스크립트로 입력 유효성 검사기능을 구현해보겠습니다.
<form id="mailform" action="./sample3.html" method="post">
메일발송: <input type="text" id="txtemail" placeholder="메일주소입력" />
<input type="submit" id="btnsend" value="Send" onclick="return fnSend();"/>
</form>
<script type="text/javascript">
function fnSend() {
if (document.getElementById("txtemail").value == "") {
alert("메일주소를 입력해주세요.");
document.getElementById("txtemail").focus();
return false;
}
var email = document.getElementById("txtemail").value;
var regex=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;
if(regex.test(email) == false) {
alert("잘못된 이메일 형식입니다.");
document.getElementById("txtemail").focus();
return false;
}
if (confirm("메시지를 전송하시겠습니까?")) {
alert("전송되었습니다.!");
return true;
} else {
return false;
}
}
</script>
D.플러그인
-현대적인 웹페이지들은 개발 편리성,효율성을 위해 각종 HTML,CSS,JAVASCRIPT기반의 각종 플러그인 프로그램을 통해 개발이 이루어집니다.
-또한 클라이언트 측에서 작동되는 각종 확장컨트롤(데이터그리드,챠트,카렌더,업로더)등도 플러그인 형태로 제공됩니다.
-대표적 플러그인 프로그램으로는 Javascript 언어ㅇ 사용의 개발 편리성,생산성 제고를 위한 JQuery 라이브러리와 반응형 웹페이지를 쉽게 만들수 있게 지원하는 CSS프레임워크인
부트스트랩 플러그인등을 예로들수 있습니다.
- HTML 페이지의 각종 플러그인들은 상용 플러그인(유료)도 있지만 대부분 오픈소스로 무료로 제공되는 플러그인들이 다수이며 독자 여러분이 원하는 기능들은 대부분 플러그인 형태로 오픈소스기반으로 개발되어 제공되어진다고 봐도 무리는 아닐듯합니다.
-대부분의 플러그인 프로그램은 웹페이지에 쉽게 추가하거나 참조할수 있도록 별도 파일로 제공되며 관련 샘플들을 제공합니다.
-JQUERY 플러그인을 웹페이지에 참조하여 샘플3의 자바스크립트 유효성을 JQuery를 통해 처리해보도록 하겠습니다.
https://jquery.com/-jquery 링크:
-아래 예제코드 와 같이 js파일의 경로를 참조추가 후 Jquery문법으로 유효성검사코드를 작성합니다.
-해당 jquery-3.1.1.min.js 파일을 sample4.html 페이지와 동일한 경로로 복사 붙여넣기 합니다.
-https://jquery.com/download/ 다운로드 페이지에서 압축파일 버전인 Download the compressed, production jQuery 3.1.1 를 클릭 여러분 컴퓨터로 jquery-3.1.1.min.js 파일을 다운로드합니다.
JQUERY사이트 플러그인 다운로드 및 추가하기
<form id="mailform" action="./sample3.html" method="post">
메일발송: <input type="text" id="txtemail" placeholder="메일주소입력" />
<input type="submit" id="btnsend" value="Send" onclick="return fnSend();"/>
</form>
<script src="./jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnsend").click(function () {
if ($("#txtemail").val() == "") {
alert("메일주소를 입력해주세요.");
$("#txtemail").focus();
return false;
}
var regex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;
if (regex.test($("#txtemail").val()) == false) {
alert("잘못된 이메일 형식입니다.");
$("#txtemail").focus();
return false;
}
if (confirm("메시지를 전송하시겠습니까?")) {
alert("전송되었습니다.!");
return true;
} else {
return false;
}
});
//jquery로 스타일 제어하기
$("h2").css("color", "red");
});
</script>
인기있는 플러그인 프로그램 소개
|
라이브러리명 |
간략소개 |
제작사 |
|
Angular.js |
FrontEnd MVC 개발 프레임워크 |
Google opensource |
|
React |
FrontEnd 개발 프레임워크 |
Facebook opensource |
|
JQuery |
Javascript Library |
opensource |
|
Node.js |
RealTime Web & 서버 개발라이브러리 |
Opensource |
|
Knockout |
FrontEnd MVVM 개발 프레임워크 |
opensource |
|
Bootstrap |
반응형웹 스타일시트 프레임워크 |
|
-best javascript plugins
https://colorlib.com/wp/javascript-frameworks/
https://www.quora.com/What-are-top-5-most-popular-JavaScript-libraries
http://www.jqueryscript.net/popular/
http://www.cssdesignawards.com/articles/best-js-plugins-and-libraries-of-2015/267/
-Jquery book 추천도서
실전 jQuery 쿡북: Taeyo's Choice (v1.4.x 증보판)
http://www.yes24.com/24/goods/3903461?scode=032&OzSrank=9
2.1.2. 서버측 기술구성요소
-서버사이드 기술은 서버측 자원을 이용하여 개발하는 기술로 실제 웹페이지가 존재하는 웹서버나 서버측 웹개발 프레임워크 기반에서 DB프로그래밍을 하는등의 서버 프로그래밍 기술들을 말합니다.
-대표적으로 우리가 사용할 ASP.NET MVC5,JSP,PHP,PYTHON 등의 기술과 DATABASE 관련 SQL Query기술등도 이에 포함되는 영역입니다.
-서버측 웹프로그래밍 기술을 이용 JSON형태의 데이터만을 제공하는 OPEN API 기술도 Server Side 기술중 하나입니다.
대표적인 서버측 웹프로그래밍 기술들로는 JSP,ASP,ASP.NET,PHP등이 있으며 아래는 각 기술들의 개발환경정보입니다.
JSP(Java Server Pages)
-JAVA 언어 기반의 웹 어플리케이션 프로그램밍 기술
-개발환경
ㄴJDK설치
ㄴApach웹서버 + 톰캣 컨테이너:JSP와 서블릿을 실행시켜주기 위한 컨테이너
ㄴ개발툴:EClipse
ASP(Active Server Pages)
- VisualBasic 문법을 이용한 MS의 기존 웹서버 프로그래밍 기술
- 개발환경
ㄴIIS 웹서버(asp.dll)
ㄴ개발툴: EditPlus,NotePad++...
ASP.NET(Active Server Pages .NET)
-.NET Platform의 ASP.NET(ASP.NET Core) Framework을 이용해 C#,VB.NET 등 .NET 전용언어로 웹 어플리케이션을 개발하는 기술환경
-개발환경
ㄴ.NET Framework 1.1 /2.0/3.0/3.5/4.0/4.5/4.6
ㄴIIS 웹서버
ㄴ개발툴: Visual Studio ../2010,2012/2013/2015
ㄴ관련기술들:ASP.NET WEBFORMS, ASP.NET MVC, ASP.NET WebPages, ASP.NET SignalR, ASP.NET WebAPI
PHP(Personal Home Page Tools = Hypertext Preprocessor)
-PHP 언어(C언어계열) 기반의 웹 어플리케이션 프로그램밍 기술
-개발환경
ㄴ윈도우O/S: AUTOSET(APM) OR APMSETUP 설치
ㄴ리눅스O/S: APM설치(Apache웹서버 + PHP + MSSQL)
ㄴ개발툴:EditPlus,NotePad++...
ㄴPHP .. 4,5,6,7
ㄴ각종 CMS툴은 PHP로 개발제공됨(워드프레스,제로보드,그누보드,XpressEngine)
다음의 웹프로그래밍 클라이언트 서버환경을 표현한 도식도입니다.
클라이언트 서버 기술환경 구성도
실습용 HTML소스는 아래 링크에서 다운받아 보시구요.
HTML,CSS와 JAVASCRIPT,JQUERY등의 사용법 및 구조등을 확인해보세요. 첨부파일을 참고하여 직접 메모장이던 편집툴에서 직접 코딩을 해보실것을 권장드립니다.
실습 샘플소스 다운로드: http://mixedcode.com/Upload/Board/HTML_Sample_Solution.zip
수고많으셨습니다.
감사합니다.
Comments