뮁이의 개발새발

[jQuery] - 경량 javascript library - 조작, 이벤트 핸들링, 애니메이션, Ajax등을 api를 통해 간편하게 사용 => 쉽고 빠른 개발~! - 메소드 체인을 제공하여, 반복적인 코딩을 줄여줌. [특징] - 어떤 브라우저에서도 동일하게 동작. => 대체코드 작성 필요X - 네이티브 DOM API보다 직관적이고 편리한 API를 제공! [기본 구문] $(selector).action(); - $(selector)는 탐색한 DOM 객체들을 담은 래퍼세트를 반환 [jQuery에서의 DOM 탐색] - CSS에서 사용하는 Selector 표현 방식을 사용 - DOM 탐색 결과로 래퍼세트(Wrapper Set)라는 DOM을 래핑 한 객체를 반환. [기본 형식] $("h1").css("color..

[Event] - 웹 페이지에서의 여러가지 동작 (상호작용) - ex: 마우스 클릭, 키보드 클릭 ... [마우스 이벤트] - onclick : 마우스로 클릭 - ondblclick: 더블클릭 - onmouseup: 마우스 버튼을 올렸을 때 - onmousedown: 마우스 버튼을 눌렀을 때 [키보드 이벤트] - onkeypress: 키보드가 눌려 졌을때 (눌렀다가 떼면 발생) - onkeydown: 키보드를 누르는 순간 발생 - onkeyup: 키보드의 누르고 있던 키를 뗄 때 발생 [Frame(UI) 이벤트] - onload: 모든 frame이 로딩 되었을 때 - onabort: 로딩하는 중 취소하여 중단 되었을 때 - onselect: 텍스트를 선택 했을때 [폼(form) 이벤트] - form이 전..

[window] - javascript의 최상위 전역객체 - 브라우저와 관련된 여러 객체와 속성, 함수 모두 포함. - BOM(Browser Object Model)으로 불리기도 함. [alert, confirm, prompt] - alert(): 브라우저의 알림 창. - confirm(): 브라우저의 확인/취소 선택창 - prompt(): 브라우저의 입력 창. [navigator] - 브라우저의 정보(플랫폼, 버전 등등..)가 내장된 객체 - HTML5에서는 위치 정보를 알려주는 역할도 가능 [location, history] - location.href: 값을 할당하지 않으면 현재 url을 조회하고 값을 할당하면 할당 된 url 페이지로 이동 - location.reload(): 현재 페이지 새로고침..

var val = 10; var val = 20; // 가능 (재선언, 재할당 O) let val = 10; let val = 20; // 불가능 (재선언 X) let val = 10; val = 20; // 가능 (재할당 O) const val = 10; val = 20; // 불가능 (재선언, 재할당 X) - 프로토타입 기반의 스크립트 프로그래밍 언어 - 객체지향 지원 -html과 함께 실행 -대부분 ECMAScript 표준을 지원 - 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 - 개발자가 별도로 컴파일 작업을 수행하지 않음 [선언 방법] 태그를 사용. html 문서에 포함할 시: function hello(message) { var x = 10; alert("Hello " + message);..

[non-semantic] - div, span - content에 대해 어떤 설명도 하지 않음 [semantic] - form, table, img - content의 의미를 명확히 설명 - html5를 지원하지 못하는 경우, pdf, flash 같은 콘텐츠를 포함할때 사용 웹 브라우저에서 직접 재생할 수 없는 콘텐츠를 포함할 때 사용 오디오나 비디오 재생시 사용

[구성] 선택자+선언으로 구성 .css { margin: 30px; color: black } .css: 선택자 margin:30px => 선언 속성 값 [주석] /* 내용 */ [link] 위와 같은 방식으로 html에서 불러와서 사용 [import] @import를 사용하여 외부 스타일 시트를 적용할 수 있음 @import는 스타일 시트 중 최상단에 위치해야 함! [내부 스타일 시트] tag 내부에 작성. 외부 스타일 시트보다 우선 적용. *인라인 스타일 시트: 개별 element마다 스타일을 지정. 유지보수에 용이하지 않다. *스타일 적용 우선순위 : 인라인>내부>외부 [선택자] 일반 선택자: 전체(*), 타입(h1), 클래스(.class), ID(#idname) * 우선순위 : 전체 화면에 표시X..

사용 툴: VS Code 추천 확장프로그램: - prettier(줄바꿈, 자동완성) - bracket pair Colorizer(괄호 위치에 맞춰서 색깔기둥) - Material Theme icons - Material Theme - Auto Rename Tag(태그 이름 변경시 닫힘태그 이름 자동 변경) - CSS peek (CSS 찾기 편리) - HTML CSS support (css 자동완성) - vetur( vue 입력시 자동완성) - 문서 템플릿: ! - 자식: > - 형제: + - 부모: ^ - 여러개: * - 그룹: () - 아이디, 클래스: #, .(dot) - 문자열: {} - 넘버링: {$}* (단축키 예제) table>(tr>td*3>{00$})*2 001 002 003 001 002..