[node js] node js의 기초
1. 크롬에서 사용하즌 V8 엔진을 사용한다.
- V8 엔진은 java script 해석기라고 생각하면 됨
2. 이벤트 기반의 비동기 I/O 프레임 웍크
- node js는 싱글스레드다. => Event Loop를 두고 하는말!
- 많은 시간이 걸리는 작업일 경우, event loop가 아닌 다른 스레드에게 넘김 (worker들 - 무거운 작업을 함)
3.commonJS를 구현한 모듈 시스템
- 파일 형태로 모듈을 관리함
- ex) var someFunc = require(./someJS)
4. 브라우저 밖에서 자바스크립트 코드를 실행할수 있다.
[생활코딩][CSS] inline block
같은 줄에 있는 <태그 inline> - 앞 뒤로 줄바꿈이 되지 않는다.
한 라인 전체를 다 사용하는 <태그 block> - 앞 뒤로 줄 바꿈이 된다.
요소는 inline 인데 내부는 block 처럼 표시 <태그 inline-block> - 박스 모양이 inline 처럼 옆으로 늘어섬!
'개발 > [언어] CSS' 카테고리의 다른 글
[생활코딩][CSS] 캐스케이딩 cascading (0) | 2016.12.06 |
---|---|
[생활코딩][CSS] 다양한 선택자들 CSS 선택자 (0) | 2016.12.05 |
[생활코딩][CSS] px vs em vs rem (0) | 2016.12.05 |
[css] 이미지에 색 필터 넣기 (0) | 2016.11.13 |
[css] input text속성 (0) | 2016.11.10 |
[생활코딩][CSS] 캐스케이딩 cascading
3cascading 우선 순위
1. html 소스의 style 속성
2. id selector
3.class selector
4.tag selector
-> 강제로 우선순위 올리는 방법은 {} 안에 !important;를 사용
왜 우선순위를 가지고 있을까?
- 뭐가 더 구체적이고 명시적인가에 따라 우선순위를 가지고 있다.
그냥 보면 이해가 안될 수 있으니
color:white > color:blue > color:green > color:red 순으로 적용된다.
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 | <!DOCTYPE html> <html> <head> <style> li{color:red;} #idsel{color:blue;} .classsel{color:green;} </style> </head> <body> <ul> <li>html</li> <li id="idsel" class="classsel" style="color:white;">css</li> <li>javascript</li> </ul> <ol> <li>style attribute</li> <li>id selector</li> <li>class selector</li> <li>tag selector</li> </ol> </body> </html> Colored by Color Scripter cs | cs |
'개발 > [언어] CSS' 카테고리의 다른 글
[생활코딩][CSS] inline block (0) | 2016.12.06 |
---|---|
[생활코딩][CSS] 다양한 선택자들 CSS 선택자 (0) | 2016.12.05 |
[생활코딩][CSS] px vs em vs rem (0) | 2016.12.05 |
[css] 이미지에 색 필터 넣기 (0) | 2016.11.13 |
[css] input text속성 (0) | 2016.11.10 |
[생활코딩][CSS] 다양한 선택자들 CSS 선택자
게임으로 선택자 공부 : http://flukeout.github.io/
.class {} class 속성
#id {} id 속성
* {} 모든 속성
A, B {} A,B의 속성
A + B {} A옆에 인접한 B가 선택이된다! (옆 하나만됨)
A ~ B {} A옆에 인접한 B가 선택이된다! (옆 마지막까지 선택)
child selector : element의 직계 child만
A > B {} 모든 A 안의 A바로 밑에있는 B만 선택한다.
First ChildA :first-child B {} 모든 A 밑에 있는 첫번째 child B만
Only child pseudo-selector(level 16 of 26)
* :only-child B {} 단독으로 차일드 있는 B만 (차일
드 두개이면 선택 안됨)
last child pseudo-selector(level 17 of 26)
.table>*:last-child {} table 제일 끝에있는 child값만
Nth child selector(level 18 of 26)
A:nth-child(3) {} A 의 3번 째 차일드
Nth Last child selector(level 19 of 26)
First of Type selector(level 20 of 26)
Nth of Type Selector(level 21 of 26)
A:nth-of-type(even) {} A중에서 짝수 번째 타입만 add = 홀 수
Nth of Type Selector with Formula(level 22 of 26)
Only of Type Selector (level 23 of 26)
Last of Type Selector (level 24 of 26)
empty Selector (level 25 of 26)
Native Pseudo-class (level 26 of 26)
'개발 > [언어] CSS' 카테고리의 다른 글
[생활코딩][CSS] inline block (0) | 2016.12.06 |
---|---|
[생활코딩][CSS] 캐스케이딩 cascading (0) | 2016.12.06 |
[생활코딩][CSS] px vs em vs rem (0) | 2016.12.05 |
[css] 이미지에 색 필터 넣기 (0) | 2016.11.13 |
[css] input text속성 (0) | 2016.11.10 |
[생활코딩][CSS] px vs em vs rem
오늘날에는 rem를 쓴다
why? 폰트크기를 조정할 수 있는 사용자의 권리
사용자가 텍스트 사이즈를 조절할 수 있게 한다는점에서 사용함
px 사용자가 글꼴 크기 키웠을때 커지지 않는다. (rem은 커진다.)
'개발 > [언어] CSS' 카테고리의 다른 글
[생활코딩][CSS] 캐스케이딩 cascading (0) | 2016.12.06 |
---|---|
[생활코딩][CSS] 다양한 선택자들 CSS 선택자 (0) | 2016.12.05 |
[css] 이미지에 색 필터 넣기 (0) | 2016.11.13 |
[css] input text속성 (0) | 2016.11.10 |
CSS - Image 겹치기 (0) | 2016.10.31 |
[서버] express 기본 개념
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var express = require('express'); var app = express(); // 가져온 모듈 = 함수 applicaition 이라는 것을 리턴 이거 만든 사람이 이 형식으로 쓰라고 만든 형식 app.get('/', function(req, res){ res.send('<h1> Hello porter'); }); app.get('/login', function(req, res){ // 라우터의 기능을 한다. res.send('<h1> Login please bro </h1>'); }); app.listen(3000, function(){ //서버 열기! console.log('conneted 3000 port!~'); }); | cs |
'생활코딩 ' 카테고리의 다른 글
[서버] 동기와 비동기 프로그램 (0) | 2016.12.02 |
---|
[서버] 동기와 비동기 프로그램
빨래 - 설거지 - 청소
동기적으로 일을 처리한다. - 동기적 : 일단 빨래를 한다. - 한 시간 뒤 설거지 - 한 시간 뒤 청소 - 3시간 후 일이 끝났다.
비동기적으로 일을 처리한다. -빨래하는 업체, 설거지 업체, 청소 업체 : 업체에게 빨래 해달라고 전화 빨리 끝나면 전화해 달라, 설거지 업체에게 전화 하고 끝나면 알려줘, 그후 청소 업체게 전화하고 끝나고 알려달라고함. 일을 재깍 재깍 바로 끝낼 수 있다.
이렇게 처리하게 되면 뭐가 먼저 될 질 알 수 없다. but 순서 상관 없다면 참 좋은 것
email 발행 -> 사람에게 이메일을 보내야 한다. -> 이메일 받을 사람 몇 만명
발행 버튼 누를 때
동기 : 서버에서 한명 한명에게 이메일 보냄 , 한명당 이메일을 보낸다면 1초가 걸리면 만 초가 걸린다.
비동기 : 이메일을 보내는 별도의 시스템에 보내라고 위탁하라고 함, 일이 끝나면 나에게 알려쥬 ( 백그라운드에서 작동 )
안붙어 있으면 비동기 방식
Sync 붙어 있으면 동기 방식
비동기적으로 어떤일을 처리한다. node.js 의 처리 철학
특별히 원할때 Sync를 이용하여 동기로 처리한다. ( 웬만하면 하지 말라고함 )
- node.js 는 싱글 스레드 라서 동기로 하게 될 경우 그 작업이 10분 걸리면 10분동안 다른 작업 아무 것도 못함!
'생활코딩 ' 카테고리의 다른 글
[서버] express 기본 개념 (0) | 2016.12.03 |
---|
[js] jquery로 hover 상태일때 다루기
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
<style>
ul {
margin-left: 20px;
color: blue;
}
li {
cursor: default;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class="fade">Chips</li>
<li class="fade">Socks</li>
</ul>
<script>
$( "li" ).hover(
function() {
$( this ).append( $( "<span> ***</span>" ) );
}, function() {
$( this ).find( "span:last" ).remove();
}
);
$( "li.fade" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
</script>
</body>
</html>
내가 쓴 예시
1 2 3 4 5 6 7 8 9 | <script> $("#request_mode_index").hover(function(){ document.getElementById("request_mode_blur").style.display="inline"; },function(){ document.getElementById("request_mode_blur").style.display="none"; }); </script> | cs |
'개발 > [언어] JS' 카테고리의 다른 글
[js] HTML에서 JavaScript 로드하기 (0) | 2016.11.05 |
---|
[Web] 웹 브라우저의 구조 (Window의 구조) [생활코딩]
(출처 : http://learn.javascript.ru/browser-environment)
Dom (다큐먼트 오브젝트 모델) - 문서를 제어 (가장 중요한 제어) ex) body, img .....
Bom (브라우져 오브젝트 모델)- 현재 웹브라우져가 가르키고있는 url 또는 표시하고있는 페이지 리로드, 경고창 띄우기 담당
BOM
Browser Object Model. 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것이다. 전역객체 Window의 프로퍼티에 속한 객체들이 이에 속한다.
1 2 3 4 5 6 7 | <!DOCTYPE html> < html > < body > < input type = "button" onclick = "alert(window.location)" value = "alert(window.location)" /> < input type = "button" onclick = "window.open('bom.html')" value = "window.open('bom.html')" /> </ body > </ html > |
DOM
Document Object Model. 웹페이지의 내용을 제어한다. window의 프로퍼티인 document 프로퍼터에 할당된 Document 객체가 이러한 작업을 담당한다.
Document 객체의 프로퍼티는 문서 내의 주요 엘리먼트에 접근할 수 있는 객체를 제공한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> < html > < body > < script > // body 객체 console.log(document.body); // 이미지 객체들의 리스트 console.log(document.images); </ script > </ body > </ html > |
또한 특정한 엘러먼트의 객체를 획득할 수 있는 메소드도 제공한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> < html > < body > < script type = "text/javascript" > // body 객체 console.log(document.getElementsByTagName('body')[0]); // 이미지 객체들의 리스트 console.log(document.getElementsByTagName('body')); </ script > </ body > </ html > |
(출처 : https://opentutorials.org/course/1375/6622)
'개발 > 웹' 카테고리의 다른 글
HTML, CSS, JAVASCRIPT 공부하면서 정리 (0) | 2016.10.14 |
---|---|
웹 개발 도움이되는 홈페이지 (1) | 2016.10.03 |
[자료구조] c++ 스택
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 | #include <iostream> template <class T> typedef struct Node{ int data; }Node; class Stack{ private: Node node; int size; int num; public: Stack(int size){ this->size = size; num = 0; node = new node[size]; } void push(int in){ node[num++]->data = in; } int pop(){ return node[--num]; } bool isempty(){if(num == 0) return true;} } | cs |
'개발 > 자료구조' 카테고리의 다른 글
[자료구조] [C++] CircularQueue 사이클 큐 (0) | 2016.11.16 |
---|---|
q_sort (1) | 2016.11.16 |
[자료구조] Select Sort (0) | 2016.10.26 |
Recursive 를 이용한 Permutation Generator (순열 생성기) (0) | 2016.10.25 |
Binary Search 이진 탐색 (0) | 2016.10.25 |