[Client Side]
[HTML]
▶[html]html 표준안에 의한 표기
<!DOCTYPE html>가 문서의 가장 처음에 온것을 목격한 적이 있을 것이다. html은 시대와 이익집단에 따라 그 표준안이 유동적으로 변화하는데, 작성한 html문서가 어떤 표준안에 따라서 작성된 것인지를 웹브라우저가 이해할 수 있도록 기술하는 것이 필요하다. 이는 필수적이지않지만 작성한 코딩이 정확하게 동작시키기 위해서 표준안의 기준을 알리는 것이 좋다.
HTML 5
<!DOCTYPE html>HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">▶[html]div와 p의 차이점
1. <div> 태그나 <p> 태그는 왼쪽에서 오른쪽으로 하나의 가로 영역(Block) 전체를 차지하는 태그들입니다.
이러한 태그들을 고급스럽게 Block-level Element (블락레벨 엘레멘트) 라고 부릅니다. (아주 중요!! 꼭 기억!!!!)(블록엘리먼트와 라인엘리먼트를 구분한 포스트 참고)
2. <div> 태그는 HTML 문서(우리가 웹페이지라고 부르는...)를 위에서부터 아래로 분할하는 역할을 합니다.
3. <p> 태그는 HTML 문서 안에서 문장의 단락을 나타내는 태그입니다. 긴 글의 단락... 하나 하나.... 이해하시겠죠?
4. 각 태그들을 2번 3번 처럼 그 목적에 맞춰서 사용하여 HTML 문서를 작성하면 의미적/구조적으로 Well-Formed HTML Document
white-space:normal;
normal이 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 지정된 넓이의 끝에서 자동으로줄바꿈한다.
white-space:pre;
띄어쓰기는 실제 입력한 칸 수대로, 줄바꿈도 엔터를 친 대로 나온다. 넘어가는 부분에서 강제 줄바꿈은 되지 않는다.
white-space:pre-line;
강제 줄바꿈도 되고, 마크업에 입력한 대로 줄바꿈도 된다.
white-space:nowrap;
여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다.
넓이를 지정하였어도 자동으로 줄바꿈 되지 않게 강제로 개행을 막아준다.
word-break
텍스트가 들어가는 블럭요소의 넓이에 맞춰 줄바꿈 하는 CSS (강제 줄바꿈 방지, 텍스트길이 제한)
word-break:normal;
normal이 기본값, 단어 단위로 끊어서 줄바꿈 한다 .
(단어 단위로 줄바꿈되어 오른쪽 공간이 꽉차지 않고 비어있는 형태다.)
word-break:break-all;
글자 단위로 줄바꿈 한다. (글자단위로 줄바꿈이 되어 글자가 박스 안에서 가득차는 형태다.)
word-break:keep-all;
한글일 경우 띄어쓰기 기준으로 줄바꿈 해준다. (ie계열/아시아 언어만 지원,파폭 3.5이상에서는 지원)
text-overflow
텍스트가 overflow 되었을때 어떻게 처리할 것인가를 나타내는 CSS ( overflow 속성이 값을 갖고 있을때 적용가능)
text-overflow:clip;
엘리먼트 테두리에서 글자가 잘리게 된다.
text-overflow:ellipsis;
테두리에 닿을 정도가 되면 자동으로 ....을 넣어준다.
(적용시 참고사항 : text-overflow:ellipsis는고정된 width값, white-space:nowrap; overflow:hidden 속성이 있어야 적용가능하다.)
▶[html]하나의 form태그 아래 복수의 submit를 두는 법 : formaction="/image"
1 2 3 4 | <form> <button type="submit" formaction="/image" class="btn btn-default" id="upload-img-button" disabled><i class="glyphicon glyphicon-film">Image analyze</i></button> <button type="submit" formaction="/text" class="btn btn-default" id="upload-text-button" disabled><i class="glyphicon glyphicon-file">Text analyze</i></button> </form> | cs |
▶queryString이란
クエリ文字列とは、WebブラウザなどがWebサーバに送信するデータをURLの末尾に特定の形式で表記したもの。
Webアプリケーションなどでクライアントからサーバにパラメータを渡すのに使われる表記法で、URLの末尾に「?」マークを付け、続けて「名前=値」の形式で記述する。値が複数あるときは「&」で区切り、例えば http://example.com/foo/var.php?name1=value1&name2=value2 のように記述する。
▶[css]블록 배경의 크기를 설정해주는 background-size속성
https://www.w3schools.com/cssref/css3_pr_background-size.asp
▶[css]parallax
- background-attachment: fixed; : 핵심이 되는 코드로, 스크롤을 움직여도 이미지가 그 자리에 고정되어 있게 된다.
▶[css]태그별 중앙정렬
HTTPS://WWW.W3.ORG/STYLE/EXAMPLES/007/CENTER.EN.HTML#TEXT
http://aboooks.tistory.com/85 [지구별 안내서]
<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>#inner will grow to be tall enough to contain the paragraph and #outer will grow to be tall enough to contain #inner.
When you specify the height or width as a percentage, that's a percentage with respect to the element's parent. In the case of width, all block elements are, unless specified otherwise, as wide as their parent all the way back up to <html>; so, the width of a block element is independent of its content and saying width: 50% yields a well defined number of pixels.
However, the height of a block element depends on its content unless you specify a specific height. So there is feedback between the parent and child where height is concerned and saying height: 50% doesn't yield a well defined value unless you break the feedback loop by giving the parent element a specific height.
▶[css]블록엘리먼트의 위치 자체를 옮기기 : float
블록엘리먼트는 기본적으로 왼쪽 위에 붙어 있는데, 이 위치 자체를 옮기는 것이 float이다. 자세한 내용은 아래 사이트 참고.http://aboooks.tistory.com/72
[BOOTSTRAP]
▶[bootstrap]class="row"의 역할
부트스트랩에서 row클래스는 열의 구성을 잡기 위해 사용한다. 부트스트랩에서 하나의 row는 12개의 그리드로 나뉘어져 있는데, row 클래스 안에 그리드로 열을 구성해서 html의 편한 조작이 가능한 것이다. 예를 들면, ecol-md-6 는 992픽셀 보다 더 크거나 스크린과 동일 사이즈 일때 12그리드중 6 그리드를 차지한다. col-md-4 일 경우에는 12그리드중 4 그리드를 차지한다.
▶[bootstrap]테이블에서 열의 크기를 class="col~~"로 맞추고 싶을 때
row class from your <tr> elements should be removed. That class makes a non-table-row element look like a table-row and adds some styles that break a standard <tr>. You can still use the "col" classes like normal:(https://stackoverflow.com/questions/18614171/how-to-use-bootstrap-3-grid-system-with-table-component)
▶블록안에서 택스트를 블록의 중앙에 위치시키고 싶을 때
Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.
[JQUERY]
▶[jQuery]$(window).load$(window).on('load',function(){})/ $(document).ready/ $(document).on(event,selector,callback)
・$(window).load(callback) $(window).on('load',function(){}) *jquary 3.1이상부터 바뀜
- DOM의 standard 이벤트
- html의 로딩이 끝난 후에 시작
- 화면에 필요한 모든 요소(css, js, image, iframe etc..)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행됨
- 화면이 모두 그려진 다음의 메세징이나 이미지가 관련 요소가 모두 올려진 다음의 애니메이션에 적합함
- 전체 페이지의 모든 외부 리소스와 이미지가 브러우저에 불려운 이후 작동하게 되어 이미지가 안뜨너가 딜레이가 생길 때에는 그만큼의 시간을 기다려야 함
- 외부 링크나 파일 인크루트시 그 안에 window.load 스크립트가 있으면 둘 중 하나만 적용됨
- body onload 이벤트와 같이 body에서 onload 이벤트를 쓰게 되면 모든 window.load() 가 실행되지 않는 현상이 발생함(http://jinolog.com/programming/javascript/2011/03/21/jquery-ready-function.html)
・$(document).ready(callback)
- 외부 리소스. 이미지와는 상관 없이 브라우저가 DOM (document object model=html이라고 봐도 무관) 트리를 생성한 직후 실행
- window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨
* $(function() 대신 $(document).ready() 를 권장하는 이유
$(function() 을 쓰나 $(document).ready() 를 쓰나 같은 함수임에는 틀림이 없으나
$(window).load() 함수와 확실하게 구분지어주기 위해 $(document).ready() 를 사용하는 것을 권장한다.\
자바스크립트를 포함하는 <script>태그를 DOM가장 아래에 적으면, 사실 필요없다.
・$(document).on(event,selector,callback)★★
-이벤트가 발생하는 시점에서의 DOM을 기준으로 콜백의 동작을 행하기 때문에, DOM의 변화가 예상될 이후의 코드는 위 코드로 구현해야 한다.
▶[jQuery]마우스의 움직임에 따라 표시되는 이미지의 영역이 변하게 하는 코드
예는 https://codepen.io/chrisboon27/pen/rEDIC에서 확인하길 바란다.
해당 코드를 조금 해석해 보고자 한다.
1 2 3 4 5 6 7 8 9 | var movementStrength = 25; var height = movementStrength / $(window).height(); //var width = movementStrength / $(window).width(); $(".main-cover").mousemove(function(event){ //var pageX = event.pageX - ($(window).width() / 2); var pageY = event.pageY - ($(window).height() / 2); //var newvalueX = width * pageX * -1 - 25; var newvalueY = height * pageY * -1 - 50; $('.main-cover').css("background-position", "10% "+(newvalueY+80)+"%"); | cs |
위의 예에서는 이미지 위에서 마우스가 움직일 때, 가로로 움직일 때는 반응하지 않고 세로로 움직일 때만 반응하게 하기 위해 width관련 라인은 코멘트처리했다.
-$(window).height():특정한 셀렉터를 지정하지 않고 window를 지정하면 열려있는 브라우저를 가르키케 되므로,브라우저 전체의 높이를 의미한다.
-$(".main-cover").mousemove(function(event){}):해당 셀렉터에 마우스의 움직임이 있을 때, 그 움직임 하나하나가 이벤트로써 event에 들어가게 된다.
-event.pageX:현재 마우스 좌표의 X축(The mouse position relative to the left edge of the document.)
event.pageY:현재 마우스 좌표의 Y축(The mouse position relative to the top edge of the document.)
-$('.main-cover').css():Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.
-전체적인 코드를 설명 : 1.이미지위에 마우스 움직임이 감지 되었을 때 2.마우스 위치가 event에 격납되고 3. event의 좌표를 출력하여, 4.움직인 만큼 css의 background-position에서 위아래, 좌우의 위치를 바꾼다.
▶[jQuery]스크롤의 움직임에 따라 표시되는 이미지의 영역이 변하게 하는 코드
1 2 3 4 | $( window ).scroll(function(event) { var movementStrength=($(window).scrollTop()*0.06) $('.main-cover').css("background-position", "50% "+(movementStrength+50)+"%"); }); | cs |
-$( window ).scroll(function(event) {}):셀렉터를 window로 설정하였으므로 셀렉터는 브라우저 전체가 된다. 브라우저의 스크롤의 움직임이 있을때, 그 움직임 하나하나가 이벤트로써 event에 들어가게 된다.
-$(window).scrollTop():Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.
-전체적인 코드 설명 : 1.브라우저에서 스크롤의 움직임이 있을 때마다, 그 움직임에 event로 들어간다. 2.브라우저의 스크롤 위치를 scrollTop이 감지하여 반환한다. 3.움직인 만큼 css의 background-position에서 위아래, 좌우의 위치를 바꾼다.
▶[jQuery]setInterval으로 계속 변하는 백그라운드 이미지 만들기
setInterval은 지정한 시간 간격을 기준으로 콜백을 무한히 불러오게 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function () { //console.log(result); var i = 0; var images=['/image/logo/lookAtLogoBlack-White.jpg','/image/logo/lookAtLogoWhite-Black.jpg']; $('#logo').css('background-image', 'url("'+ images[i] + '")'); setInterval(function () { i++; if (images.length==i){ i = 0; } $('#logo').css('background-image', 'url("'+ images[i] + '")'); }, 5000); }); | cs |
▶[jQuery]clientX, offsetX, pageX, screenX의 차이
offset 메서드는 이벤트가 걸려 있는 DOM객체를 기준으로 좌표를 출력합니다. 이와 비슷한 메서드로 layer가 있습니다. 이 메서드는 현재 파이어폭스에서만 사용합니다.( 화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이됩니다. 화면의 기준이 아닙니다)
screen 메서드는 화면 출력 크기(자신의 모니터)가 기준인 절대 좌표입니다. 브라우저를 움직여도 값은 같습니다.
client 메서드는 브라우저가 기준인 좌표입니다. 현재 보이는 브라우저 화면 상에서 어느 지점에 위치하는 지를 의미하기 때문에 스크롤 해도 값은 변하지 않습니다.
page 메서드는 문서가 기준입니다. client와 비슷하지만 이 메서드는 문서 전체 크기가 기준이라 스크롤 시 값이 바뀝니다. (스크롤을 포함해서 측정합니다)
▶[jQuery]$(this)[0] === this
▶[jQuery]드래그로 움직이는 도형
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/css/style.css"> <link href="http://fonts.googleapis.com/earlyaccess/hanna.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <svg class="canvas_inner" height="100%" width="100%"> <g class="line-in-canvas" step="1" num="1" children="0" > <circle class="end_circle" cx="100" cy="100" r="30" id="initial-end-circle" stroke="black" stroke-width="2" fill="black" /> </g> </svg> <script> $(function(){ var dragging = false; var iX, iY; $('.end_circle').mousedown(function(e){ dragging = true; }); $(document).mousemove(function(e){ if(dragging){ $('.end_circle').attr('cx',e.pageX); $('.end_circle').attr('cy',e.pageY); } }); $(document).mouseup(function(e){ if(dragging){ dragging = false; } }); }); </script> </body> </html> | cs |
▶[jQuery]타겟 객체의 하위 레벨까지 찾아주는 find
-보통 children같은 키워드는 1단계 아래 레벨에 있는 dom까지만 검색한다. 하지만
-find는 $('.target')하부에 있는 모든 레벨에서 .line클래스를 찾는다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> </head> <body> <script> $(function(){ $('.target').find('.line').attr('step') }); </script> </body> </html> | cs |
▶[jQuery]ajax종료 후 작업을 실행시킬 수 있는 $(document).ajaxSuccess(function(){})
▶[jQuery]jquery ui로 달력을 나타내는 datepicker함수
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker(); } ); </script> </head> <body> <p>Date: <input type="text" id="datepicker"></p> </body> </html> | cs |
datepicker의 파라미터는 아래 페이지에서 참고할 수 있다.
https://api.jqueryui.com/datepicker/#option-dateFormat
▶[jQuery]Modal을 클릭하지 않고도 show하게 하는법: $(selector).modal('show')
https://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery
▶default
default
▶default
default
▶default
default
▶default
default
▶default
default
▶default
default
▶default
default
▶default
default
▶default
default
▶default
default
▶default
default
[Server Side]
[NODEJS]
▶[NODEJS]app.use(bodyParser.json())와 .bodyParser.urlencoded({extended: ...})의 의미
my research shows me that if extended: true, then you can parse nested objects, or generally any type. However, if you set extended: false, then you can only parse strings or arrays.
app.use(bodyParser.json()) basically tells the system that you want json to be used
.bodyParser.urlencoded({extended: ...}) basically tells the system whether you want to use a simple algorithm for shallow parsing (i.e. false) or complex algorithm for deep parsing that can deal with nested objects (i.e. true).
https://stackoverflow.com/questions/39870867/what-does-app-usebodyparser-json-do/39872729
▶[NODEJS]동기적으로 request하는 var sync_request = require('sync-request') 모듈
[NGINX]
▶[NGINX]NGINX를 통한 웹사이트 포워딩의 로직
서버 쪽 nodejs 파일에서 5200번 포트를 열고 외부에서 123.42.11.23:5100으로 접근하는 것처럼 외부에서 서버의 포트로 직접 접근하는 것은 보안상 위험한 일이다. 이를 해결하기 위한 방법으로 node의 WAS인 NGINX를 사용한다. 큰 로직의 흐름을 보면,
1. 외부에서 들어오는 디폴트 포트(80)에 대한 요청은 모두 NGINX가 받는다.
2. nodejs는 서버 내부의 localhost 서버 127.0.0.1의 특정포트, 예를들어 3000번에만 응답한다.
3. NGINX가 서버내부응답(127.0.0.1:3000)을 계속 지켜보고 있다가 외부의 요청이 들어오면, 그 요청에 서버내부(127.0.0.1:3000)에서 발생하는 node의 레스폰을 외부로 포워딩한다.
[JSON]
▶[JSON]json을 서버에서 불러오고 불러낼 때의 주의점:로컬에 저장된 json은 ""베이스다!
-json은 .json 확장자로 존재할 때 String 형식이다. 이것을 자바스크립트로 불러올 때, require('json패스')로 객체화 하여 들고오고, 다시 json확장자로 보낼 때 JSON.stringify으로 String 화 하여 내보낸다.
-json은 .json 확장자로 존재할 때 String 형식으로 존재하기 때문에 모든 키와 벨류값이 ""(더블쿼테이션)으로 감싸져 있다. 그렇지 않으면 자바에서 불러올 때 오류가 발생한다.
-json은 value값으로 multi line을 지정할 수 없다.
ex]
{ "key1":"hahaha
hohoho
bububu"} 불가
→
{ "key1":"hahaha \n hohoho \nbububu"} 가능
-JSON.parse(obj)를 사용하기 위해서는 obj가 ''로 둘러쌓인 string 이여야 한다.
1 2 3 | var obj = '{"success":1,"data":{"sell":"1917702","buy":"1906011","high":"2020731","low":"1803078","last":"1906011","vol":"304.2223","timestamp":1515477721405}}'; var json = JSON.parse(obj); console.log(json.success) | cs |
▶[JSON]API란 무엇인가? API의 사용법(sync-request모듈과 XMLHttpRequest모듈)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //sync-request모듈을 를 사용 function jsonDataWithHtml(coinApi){ var res = sync_request('GET', coinApi); var body = res.getBody('utf8'); var jsonData = JSON.parse(body); return jsonData; } //XMLHttpRequest모듈을 를 사용 function jsonDataWithXML(coinApi) { var xhttp = new XMLHttpRequest(); xhttp.open("GET", coinApi, false); xhttp.setRequestHeader("Content-type", "application/json"); xhttp.send(); var response = JSON.parse(xhttp.responseText); return response; } | cs |
[AJAX]
▶[AJAX]html에 필요한 글을 일일이 쓰지 않고, AJAX를 이용해 서버에서 전달해주기
이렇게 하는 이유는 유지보수의 편리성을 위해서인데, 글의 내용이 바뀔 때 유지보수가 매우 빠르다는 장점이 있다. 특히 다양한 언어를 제공해주는 사이트를 운영할 때 매우 편리하다. i18n이라는 속성을 태그에 넣고, 그 속성값으로 제이슨의 키값을 넣어 제이슨과 매칭시키는 방법을 사용하고 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | ... <script type="text/javascript"> function applyI18n(lang) { var data = { 'lan' : lang } $.ajax({ url : '/about', data : data, dataType : 'json', type : 'post', success : function(result) { //url:about 페이지에 post로 요청 //data:data에 담긴 json 정보를 서버로 송신, 형식은 정해져있지않음 //dataType:서버로부터 받아오는 정보의 형식은 json //서버에서 쏜 정보를 result로 받음 $('span').each(function(index) { var attr_i18n_Val = $(this).attr('i18n'); if (attr_i18n_Val != '') { $(this).text(result[attr_i18n_Val]); } }); $('img').each(function(index) { var attr_i18n_Val = $(this).attr('i18n'); if (attr_i18n_Val != '') { $(this).attr('src', result[attr_i18n_Val]); } }); } }); } <script> ... |
1 2 3 4 5 6 7 8 9 10 11 | app.post('/about', function(req,res){ console.log(req.body.lan); if(req.body.lan=='en'){ var en = require('./public/json/contents_en.json'); res.send(en); } else{ var kr = require('./public/json/contents_kr.json'); res.send(kr); } }); | cs |
[UBUNTU]
▶ubuntu 서버 생성 부터 노드/자바 실행까지
[NGINX]
▶config파일의 설정이 변경되면 아래와 같은 명령어로 재실행을 해주어야함
[SERVER ETC]
▶Tomcat과 Servlet, JSP의 관계
Servlet과 JSP는 PHP와 ASP와 같이 서버에서 동작하며 DB에 접근하든지 비지니스 로직처리를 수행하기 위한 Java언어를 사용하는 Server Side Script 언어이다.
Tomcat은 웹서버상에서 Java코드를 이용하기 위한 엔진 혹은 컨테이너이다. 즉, Java기반인 JSP, Servlet을 이해하기 위해 Tomcat과 같은 자바를 이용하는 엔진이 필요한 것이다.
→http프로토콜로 받은 클라이언트의 요청을 받아 자바가 이해할 수 있는 방식으로 servlet 클래스에 전달해 주는 역할을 한다. 또 반대로 java를 받아서 http프로토콜이 이해할 수 있도록 레스폰하는 역할도 한다.
Servlet은 Tomcat이 이해할 수 있는 순수 Java 코드로만 이루어진 웹서버용 클래스이다. 일반적인 Java 코드와 같으며 HTML형태로 출력하기 위해 print() 메소드 같은 것을 사용한다. 이 때문에 Servlet은 PHP와 ASP에 비해 코딩하기가 복잡하다. 이러한 단점을 보완하기 위해 나온것이 JSP이다. JSP는 PHP나 ASP처럼 HTML코드와 혼용되서 사용한다. Tomcat은 JSP코드를 컴파일할때 Servlet코드로 전환하여 컴파일을 진행하게 된다. 그래서 Tomcat을 Servlet/JSP 컨테이너라고 한다.
▶MVC모델
Controller
사용자가 접근 한 URL에 따라서 사용자의 요청사항을 파악한 후에 그 요청에 맞는 데이터를 Model에 의뢰하고, 데이터를 View에 반영해서 사용자에게 알려준다.
Model
일반적으로 CI의 모델은 데이터베이스 테이블에 대응된다. 이를테면 Topic이라는 테이블은 topic_model이라는 Model을 만든다. 그런데 이 관계가 강제적이지 않기 때문에 규칙을 일관성 있게 정의하는 것이 필요하다.
View
View는 클라이언트 측 기술인 html/css/javascript들을 모아둔 컨테이너이다.
▶서버와 클라이언트 사이드의 기술 개요
[Good site for Reference]
▶Parallax Scrolling
https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm
▶배경이 고정되어 있는 사이트의 예 : background-attachment: fixed
http://likesrobo.com/home-test/
▶배경이미지가 지속적으로 변화하는 사이트
'C Lang > Web Lang Program Diary' 카테고리의 다른 글
| ngrok로 터널열기 (0) | 2018.05.22 |
|---|---|
| XML Tree(Root element, element, attribute) (0) | 2018.04.05 |
| 무료 도메인 만들기 (2) | 2018.03.15 |
| 웹 서버와 웹 애플리케이션 서버 (0) | 2018.02.04 |
| How Browsers Work: Behind the scenes of modern web browsers (0) | 2017.12.19 |