[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 |
[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 |
[백준] [DP] 2293번 동전 1
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 | #include <iostream> #include <cstdio> int coin_case[10001]; int main(void){ int n, money; int coin[101]; scanf("%d %d", &n, &money); for(int i = 1 ; i <= n ; i++) scanf("%d", &coin[i]); coin_case[0] = 1; for(int i = 1; i <= n ; i++){ for(int j = 1 ; j <= money; j++){ if( coin[i] <= j ) coin_case[j] += coin_case[j - coin[i]]; } } std::cout << coin_case[money] <<std::endl; return -1; } | cs |
'개발 > 백준_알고리즘' 카테고리의 다른 글
| [백준] [DP] 10942번 팰린드롬? 문제 (0) | 2016.11.14 |
|---|---|
| [백준] 1254번 팰린드롬 만들기 (0) | 2016.11.13 |
| [백준][DP] 2294번 : 동전 2 문제 (0) | 2016.11.08 |
[자료구조] [C++] CircularQueue 사이클 큐
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 46 47 48 49 50 | #include<iostream> #include<string> typedef struct Node { std::string data; }Node; class cir_queue { private: Node* node; int size; int front; int back; public: cir_queue(int size) { this->size = size + 1; //더미 공간 node = new Node[this->size]; front = 0; back = 0; } void enqueue(std::string data) { int index; if (back == size - 1){ index = back; back = 0; } else { index = back++; } node[index].data = data; } std::string dequeue() { int index = front; if (front == size - 1) front = 0; else front++; return node[index].data; } int get_size() { if (front <= back) return back - front; else return size - front + back; } }; | cs |
'개발 > 자료구조' 카테고리의 다른 글
| [자료구조] c++ 스택 (0) | 2016.11.17 |
|---|---|
| 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 |
