클로리셔 작은 공간

핵심 용어 용어 설명 프레임 워크 (Framework) 프레임 제공, 사용자가 동시에 하나 이상의 프로그램 모듈을 사용 할 수 있도록 함. 필요한 기능이 이미 만들어져 있어 틀을 이용해서 컴퍼넌트를 만들어서 완성하는 것. 단점 틀에서 벗어나기 어렵다. 단 하나의 프레임 웍만 사용가능하고 다른거 / 라이브러리랑 충돌. 무겁게 느껴질 수 있다. 라이브러리 (Library) 자주 사용되는 필요한 부분을 프로그램으로 모아놓고 가져와서 사용할 수 있게 한 것. 충돌이 없다. API 미리 만들어놓은 라이브러리를 가져와서 쓰는 기능. UI (User Imterface) 사용자 위주의 인터페이스. UX (User Experience) 사용자 경험의 인터페이스. :: 자바스크립트랑 제이쿼리의 차이가 뭐냐고? 우연히 본 ..

세상이 변화하는 발전의 속도보다 조금 더 빠르게 웹은 발전하고 있습니다. 특히 그 중에서도 CSS의 활용도가 높아지면서 복잡한 설계의 필요성을 느끼지 못했던 CSS에도 다양한 방법론들이 생기기 시작했습니다. 코드의 재사용성을 위해 쉽게 유지보수 하기위해 확장을 가능하게 하기위해 클래스명으로도 무슨 의미인지 예측 가능하도록 하기위해 SMACSS (Scalable and Modular Architecture for CSS) 정의 CSS에 대한 확장형 모듈식 구조 (by Jonathan Snook) CSS의 프레임워크가 아닌 하나의 스타일 가이드 사용목적 Class명을 통한 예측 재 사용 쉬운 유지보수 확장 가능 SMACSS의 유의사항 파생된 CSS 셀렉터 사용금지 ID 셀렉터 사용금지 !important 사..

addEventListener : 특정 이벤트가 발생했을 시, 특정 함수를 실행할 수 있게 해주는 기능. addEventListener으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록 이벤트 명 설명 change 변동이 있을 때 발생 click 클릭 시 발생 focus 포커스를 얻었을 때 발생 keydown 키를 눌렀을 때 발생 keyup 키에서 손을 땟을 때 발생 load 로드가 완료 되었을 때 발생 mousedown 마우스를 클릭 했을 때 발생 mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생 mouseover 마우스가 특정 객체 위로 올려졌을 때 발생 mousemove 마우스가 움직였을 때 발생 mouseup 마우스에서 손을 땟을 때 발생 select option 태그 등에서 선택을..

.querySelectorAll() : 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드입니다. document.querySelectorAll( '.abc' ) // 는 클래스 값이 abc인 모든 요소를 가져옵니다. document.querySelectorAll( '.abc, .def' ); // 클래스 값이 abc 또는 def인 모든 요소를 가져옵니다. Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor -> 클래스 값이 abc인 요소 중 두번째 요소의 색을 빨간색으로 만듭니다. Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor .querySelector() : CSS 선택자에 해당하는 첫번째 요소만..

1. 브라켓 다운로드 링크 >> http://brackets.io/ A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long. brackets.io 2. 필수 & 추천 플러그인 Beautify 코드를 보기 ..

++i (전위증가) : i의 값이 1 증가된 후 증가된 값을 리턴한다 i++ (후위증가) : 먼저 해당 연산을 수행하고 나서, i 의 값을 1 증가시킴. 1. 전위증가​ int main() { int i = 1; int j = ++i; printf("i:%d, j:%d", i, j); } // i:2, j:2 2. 후위증가 int main() { int i = 1; int j = i++; printf("i:%d, j:%d", i, j); } // i:2, j:1 => 전위증가에서는 i가 1 증가한 뒤, 증가한 값을 j가 리턴받아 2를 출력한다 후위증가에서는 i가 1 증가 하지만, j는 증가하기 전 값인 1을 리턴받아 출력한다

[ 자바스크립트 var ] 가장 많이 사용하는 선언은 " var " 입니다. var는 변수를 선언 할 수 있습니다. ex) var a = 0; var b; car c = []; car d = {}; 이렇게 선언하면서 값을 할당할 수도 있고 빈 변수로 선언해 둘 수도 있습니다. 변수를 덮어쓰기(재선언)도 가능합니다. ex) var a = 1; var a = 2; // a = 2 [ 자바스크립트 let ] let은 var의 문제점을 해결하기 위해 es2015부터 추가 되었습니다. let으로 선언 된 변수는 재선언 할 수 없습니다. ex) let a = 1; let a = 2; // Uncaught SyntaxError a = 3; //a = 3 [ 자바스크립트 const ] contst 역시 es2015부터..

HTML에서 그림 그리기 기능에는 와 태그가 있다. SVG란? - SVG는 확장 가능한 벡터(Vector) 그래픽을 의미한다. - SVG는 웹을 위한 벡터 기반 그래픽을 정의하는데 사용합니다. - SVG는 XML 형식의 그래픽을 정의합니다. - 확대 하거나 크기를 변경해도 품질은 전혀 손상이 없습니다. - 동영상으로 된 SVG의 모든 요소와 모든 속성은 W3C의 권장사항에 포함됩니다. * Canvas(캔버스)는 비트맵(Bitmap) 그래픽을 표현합니다. SVG와 Canvas의 차이점 - SVG는 XML의 2D 그래픽을 기술하는 언어입니다. - SVG는 XML을 기반으로하여 모든 요소가 SVG DOM내에서 사용할 수 있음을 의미합니다. - 요소에 자바스크립트 이벤트핸들러를 첨부할 수 있습니다. - SVG에..

:: 해당 요소의 일부분에 적용되는 가상선택자에는 콜론을 두개 :: 붙이고 : 해당 요소 전체에 적용되는 가상선택자에는 콜론을 하나 : 붙인다.