웹환경 웹환경의개요 - 사용자의요청을웹서버가받는다. - 웹서버는사용자가요청한 HTML 페이지를찾아서돌려준다. - 웹서버가처리하지못하는요청은웹컨테이너로넘긴다. - 웹컨테이너가처리한결과를웹서버로돌려준다. HTML(Hypre Text Markup Language) & CSS(Cascade Style Sheets) - 웹브라우저의화면에다양한형태의문자, 그림, 테이블, 등을위치시키는역할의언어 - HTML은여러브라우저에서모두동일한효과를얻을수있도록표준을지원한다. - HTML을이용해서화면의구조를설계하고 CSS를이용해서설계된구조를다양하게꾸민다. - HTML5로발전하고있다. Javascript - HTML과 CSS는단지화면의출력형태를제어한다. - 웹브라우저의제어를위해 Javascript를이용한다. - 웹브라우저는문서를 DOM(Document Object Model) 을사용해서관리한다. - DOM은트리형태를이용해서다양한요소들을구성한모델. document html head body - Javascript 는 DOM 을사용해서페이지에접근한다. - Javascript 가 DOM 을수정하면, 웹브라우저는페이지를갱신한다. JSP(Java Server Page) - 1 -
- HTML 내에자바프로그램을사용할수있는기술로, 자바의모든기능을웹에서도사용할수있다. - 그러나, HTML 과자바가뒤섞여있어서유지보수가점점어려워진다. - 사용자의요청과처리, 화면의출력작업, 데이터의처리등이명확히구분되지않는다. 서블릿 (Servlet) - 사용자의요청과처리, 화면의출력을구분해주는일종의제어자클래스 - MVC 구조중컨트롤러역할을한다. - HttpServlet을상속해서구현한다. 웹환경의구축 1 웹서버와웹컨테이너를다운로드한다. - http://tomcat.apache.org에서다운로드 (32-bit/64-bit 윈도우서비스 installer 실행. 설치과정중 user name과 password는입력안해도관계없다.) 2 프로그램개발환경으로사용중인이클립스를업그레이드 (Java EE) 한다. - Help 메뉴에서 Install New SoftWare 를선택한다. - Available Software" 창에서 WTP 선택후설치 (http://download.eclipse.org/webtools/updates) - 이클립스재실행후 Windows 메뉴의 "Preferences" 선택 -> Server 메뉴 -> Runtime Environments -> Add -> 톰캣의버전선택 -> 설치폴더설택 ) 3 이클립스의좌측의 Project Explorer 에서마우스의오른쪽버튼클릭 -> 프로젝트 -> Web -> Dynamic Web Project 선택후프로젝트이름입력 웹어플리케이션의디렉토리구조 1 테스트환경 - 이클립스의작업디렉토리 (workspace)/ 프로젝트 /WebContent 2 실제환경 - 아파치설치디렉토리 / 톰캣 /webapps/root 예1) /webapps/root/index.jsp를구동시키는방법 -> http://localhost:8080/index.jsp 예2) webapps/beer-v1/index.jsp를구동시키는방법 -> http://localhost:8080/beer-v1/index.jsp 이클립스에서의동작은테스트환경에서의실행이므로, 웹서비스를위해서는 실제환경 으로어플리케이션을이 동시켜야한다.(WAR 파일로변환한뒤이동시킨다.) - 2 -
HTML - HTML은웹브라우저에출력되는형태를제어할수있는다양한명령어들의집합을의미한다. - 웹브라우저는인터넷익스플로러 ( 마이크로소프트 ), 크롬 ( 구글 ), 파이어폭스 ( 모질라 ) 등이널리사용되고있다. - 각브라우저마다특징이있으며, 동일한 HTML로작성된페이지도사용자가사용하는브라우저에따라출력되는형태가다르거나혹은아예동작을안하는경우도발생할수있다. - 이렇게서로다른웹브라우저환경에의해발생되는문제를해소하려면표준화된 HTML을사용해야한다. - 브라우저는 HTML로작성된파일을읽어들여, 내부적으로모델객체를생성해서관리한다. 이모델객체를 DOM(Document Object Model) 이라고한다. - DOM은트리형태로 HTML문서의모든엘리먼트들을관리한다. - 자바스크립트는 DOM의상호작용이나브라우저가발생시키는이벤트등을처리한다. - 자바스크립트는다양한 API(Application Programming Interface) 를통해브라우저에다양한기능을제공한다. 브라우저에행동을지시하는 < 태그 > 들로구성된다. - 태그는시작과종료가있으므로, 태그를사용한후에는반드시태그를종료해야한다.(<html>... </html>) - HTML은항상 <html> 로시작하고, <head>, <body> 순서로작성한다. - <body> 부터화면구성에사용되는여러가지태그들을사용한다. 태그의해부 - 태그는다음과같이구성된다. <h1> 안녕하세요 </h1> : <h1> 은시작태그, 안녕하세요는태그의내용, </h1> 은종료태그 - 엘리먼트 (element) = 시작태그 + 내용 + 종료태그 - 엘리먼트는속성 (attribute) 을가질수있다. 속성은엘리먼트에대한추가적인정보를제공한다. - 속성의예 : 색, 크기, 테두리의굵기등. <a> 엘리먼트 - 다른페이지로갈수있는링크 ( 하이퍼텍스트 ) 를생성한다. - 이엘리먼트의내용은웹페이지에서마우스로클릭할수있다. - 이엘리먼트의 href 속성은브라우저에게어디로이동할지목적지를알려준다. - 사용예 <a> 여기를눌러주세요.</a> : 여기를눌러주세요라는글자를마우스로누를수있다. <a href="here.html"> 이곳을눌러주세요.</a> : 이곳을눌러주세요라는글자를마우스로누르면, 화면이 here.html로바뀐다. <img> 엘리먼트 - 그림파일을웹브라우저에출력한다. - 이엘리먼트의 src 속성은브라우저에보여줄그림파일의경로를명시한다. 태그의속성작성법 <a href="top10.html"> 이번주의랭킹 10</a> - 속성의값은반드시큰따옴표 ( ) 를앞뒤로붙인다. - 잘못된예 ( 큰따움표가없다 ) - 3 -
<a href=top10.html> 이번주의랭킹 10</a> HTML의작성예 <html> <head> <title> 안녕하세요 </title> 웹브라우저탭에표시되는제목 </head> <body> <h1> 어서오세요. 여기는드로이드카페입니다.</h1> 현재페이지의제목 ( 제일큰문자크기 ) <img src="images/drinks.gif"> 그림파일의위치 <p> 문단의시작기분전환이필요하시면, 언제라도방문해주세요. <a href="beverages/elixir.html">elixirs</a>, 마우스로클릭할수있으며, 클릭하면전환될페이지이름즐거운대화와몇가지 <em> 맛있는음료 </em> 문자를강조한다.( 글자가옆으로누운형태 ) 가기다리고있습니다.. </p> 문단의끝 <h2> 찾아오기 </h2> 현재페이지의부제목 ( 두번째큰문자크기 ) <p> 지금계신곳에서몇걸음만오른쪽으로오시면됩니다. 좀더자세한정보를원하시면이곳을누르세요. <a href="about/directions.html">detailed directions</a>. 우리와함께즐겨요 ~ </p> </body> </html> JavaScript의작성의예 - HTML 페이지내에스크립트시작엘리먼트 (<script>) 와종료엘리먼트 (</script>) 사이에작성한다. <script> var drink = " 비타민워터 "; 자바스크립트의변수는데이터형태를선언하지않는다. 즉, 실행시결정됨 var lyrics = ""; 문자열은큰따옴표. 또한, 대소문자를구분한다. var cans = 99; var state = true; 불린값은따옴표를붙이지않는다. var temp = new Array(); 배열을선언 temp[0] = 1.1; temp[1] = 2.2; temp[2] = 3.3; var yemp = [1, 2, 3, 4, 5]; 배열을선언 var numofyemp = yemp.length; 배열의길이 lyrics = lyrics + " 자판기에 " + drink + " 가 " + cans + " 캔있습니다.<br />"; while(cans > 0) { lyrics = lyrics + cans + " 캔남은 " + drink + "<br/>"; lyrics = lyrics + " 하나를뽑으면, <br />"; if(cans > 1) { - 4 -
lyrics = lyrics + " 자판기에 " + drink + " 가 " + (cans - 1) + " 캔있습니다.<br/>"; }else { lyrics = lyrics + " 자판기에 " + drink + " 가없습니다.<br />"; } cans = cans - 1; } document.write(lyrics); document는 HTML문서를의미하는객체 </script> - Javascript의위치 HTML이브라우저에읽히기전에 Javascript가처리된다. <html> <head> <script>... function init() {... } window.onload = init; HTML을모두읽은후 init 함수처리 </script> <script src="myscript.js"></script> </head> <body> <script>... </script> </body> </html> Style Element - HTML로구성한페이지에다양한스타일을추가할수있다. - HTML로는페이지의구조, CSS로는스타일을설계한다. - 스타일의추가는스타일엘리먼트를이용한다. - 스타일엘리먼트는 HTML의 <head> 안에위치한다. - 스타일엘리먼트의추가예 <html> <head> <title> 안녕하세요. </title> <style type="text/css"> body { HTML의 <body> 태그에적용한다. background-color : #d2b48c; 바탕색을황갈색으로지정 margin-left : 20%; 왼쪽의바깥여백을 20% 로지정 margin-right : 20%; 오른쪽의바깥여백을 20% 로지정 border : 1px dotted gray; 경계선을 1포인트굵기의점선으로설정 padding : 10px 10px 10px 10px; 위, 오른쪽, 아래쪽, 왼쪽의내부여백을지정 font-family : sans-serif; 폰트를산새리프로지정 } - 5 -
</style> </head> <body>... </body> </html> - 6 -
웹페이지의설계 - 구축하려는페이지의기본형태를설계한후 HTML 형태로변경한다. - 아래의왼쪽은기본형태이며, 오른쪽은 HTML 형태로변경한것이다. < 그림 5-1> 웹페이지의설계 q 엘리먼트 - 다음과같은문장이있다. 거기에이렇게씌여있었다. 또오세요. - 위의문장에서 또오세요 라는문장을인용구라고한다. 인용구라는것은이미기록되어있는문장을단지빌려서사용하는문장을의미한다. - q 엘리먼트는인용구를웹페이지에설계할때사용하는엘리먼트이다. - 위의문장을 q 엘리먼트로설계하면다음과같다. 거기에이렇게씌여있었다. <q> 또오세요.</q> - 웹브라우저는 q 엘리먼트사이의내용이인용구라는것을인지하여가장적절한방법으로인용구를표현한다. - 웹브라우저마다인용구를표현하는방법은다소다를수있다. - 7 -
blockquote 엘리먼트 - 인용구가완전한하나의문장일경우에는 blockquote 엘리먼트를사용한다. q 엘리먼트와 blockquote 엘리먼트의비교 - q 엘리먼트는문단의아래, 위로줄바뀜이일어나지않는 인라인 엘리먼트이다. - blockquote 엘리먼트는문단의아래, 위로줄바뀜이일어나는 블록 엘리먼트이다. - 위의예에서, 왼쪽은엘리먼트의아래와위에줄바꿈 (Return) 이들어있는블록엘리먼트이고, 오른쪽은엘리먼트의 아래와위에줄바꿈 (Return) 이없는인라인엘리먼트이다. br 엘리먼트 (Line Break) - 특정엘리먼트다음에줄바꿈을입력할때사용하는엘리먼트가 br 엘리먼트이다. - <br> 은태그의내용과종료태그가존재하지않는엘리먼트이다. 이런엘리먼트를빈 (empty) 엘리먼트라고한다. - 빈엘리먼트의또다른예로는 <img> 엘리먼트가있다. - 8 -
list 엘리먼트 - 여러개의항목을위에서아래로일렬로출력하는기능의엘리먼트 - list 엘리먼트는정렬된리스트 (ol:ordered list) 와정렬되지않은리스트 (ul:unordered list) 의두가지가있다. - 리스트를만드는방법은 2단계로구성된다. - 1단계 : 리스트항목을만든다. - 2 단계 : 정렬된리스트 (ol), 혹은정렬되지않은리스트 (ul) 엘리먼트로위의 1 단계엘리먼트를감싼다. 주의 : <li> 엘리먼트는항상 <ol> 혹은 <ul> 와함께사용해야한다. 리스트안에또다른리스트를넣을수도있다. - 9 -
정의엘리먼트 (dl> - 리스트엘리먼트와비슷한성격의정의엘리먼트가있다. 도전과제 - 위의그림 <5-1> 을 HTML 을이용해서구현해보세요. - 10 -
엘리먼트의중첩 - 다른엘리먼트내에또다른엘리먼트를포함시키는것을중첩 (nesting) 이라고한다. - 웹페이지는보통중첩으로구성된다. <html> <head>... </head> <body>... </body> </html> - 중첩관계를설계하기위해서는다음과같이그림을그린다. - 이렇게서로다른웹브라우저환경에의해발생되는문제를해소하려면표준화된 HTML 을사용해야한다. 브라우저에행동을지시하는 < 태그 > 들로구성된다. - 태그는시작과종료가있으므로, 태그를사용한후에는반드시태그를종료해야한다.(<html>... </html>) - HTML은항상 <html> 로시작하고, <head>, <body> 순서로작성한다. - <body> 부터화면구성에사용되는여러가지태그들을사용한다. - 11 -