whatisthis?

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

제이쿼리(jQuery) write less, do more 이라는 모토로 만들어진 오픈소스 기반의 자바스크립트 라이브러리. 쉽게 element를 찾고 조작할 수 있고, 브라우저의 호환성이 뛰어나다. 또한 메소드 체이닝 등 짧고, 유지관리가 용이한 코드를 지원한다. 장점 IE8,9를 지원한다. 모든 브라우저에서 호환 가능. 코드가 보기 좋다. (디자인을 위해) 플러그인을 지원한다. (다양한 기능 추가 가능) 애니메이션, AJAX도 간단히 사용 가능. 단점 무겁다. 바닐라 자바스크립트보다 10배~100배정도 느리다. 모듈화가 안되어있다. 예> $(document).ready(function(){ alert("Hello World!"); $("#blackBox").hide(); }); window.onload..

실행 컨텍스트(Execution Context) javaScript. (18) 실행 컨텍스트 실행 컨텍스트 (Execution Context) 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. var name = 'zero'; // 전역변수.. mywebproject.tistory.com - 지난번에 업로드했던 실행 컨텍스트 포스팅은 var을 기준으로 한 설명이였다. 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생김. 컨텍스트 생성 시 컨텍스트 안에 변수객체(argument, variable) , 스코프체인, this가 생성됨. 컨텍스트 생성 후 함수가 실행되는데..

원칙적으로, 자바스크립트로 CSS를 조작하는것은 지양하는 것이 맞다. 그러나, CSS만으로는 처리할 수 없을 때, (예 - 리액트같은 프레임워크를 쓰거나, 스크롤 문제 해결시) 어쩔 수 없이 js로 CSS를 조작해야 하는 경우가 발생한다. - 태그의 CSS를 변경 document.querySelector('선택자').style.display = 'inline-block'; 여기서 주의할 점은 -가 들어간 속성(예>background-color)은 -를 빼고 뒤의 문자를 대문자로 바꿔준다. (자바스크립트는 캐멀케이스 이므로) +) 처음부터 -가 붙은 CSS속성 (예> -webkit) 또한 -를 제거하고 w를 대문자로 바꿈. - 자바스크립트에서는 '-'가 빼기 연산자로 인식됨. - 태그의 css 속성을 읽어..

1. 뒤에 나오는 CSS가 우선순위가 높다. 2. 우선순위가 같다면 개수가 많은 것이 먼저 실행. (부모-자식 관계가 많은 경우) !important ∨ inline style attribute ∨ id ∨ class, 다른 속성(attribute), 가상클래스(:) ∨ tag element, 가상요소(::) !important 우선순위를 무시하고 꼭 적용시킬 속성은 속성 값(value) 뒤에 !important 키워드를 붙인다. .content{ color: black !important } - 우선순위 뿐만 아니라 디자이너와 개발자간 소통시 '중요한 속성임'을 나타냄. +) !important와 inline style attribute는 보통은 사용을 제한한다. ref. CSS 적용 ..

정렬 (align) 텍스트나 태그를 왼쪽 / 가운데 / 오른쪽에 배치하는 작업. - 보통 가운데 정렬이나 오른쪽 정렬 등 특수 형태를 많이 사용함. 부모 태그에 text-align을 사용하면? > 자식 태그들이 정렬된다. #parent { text-align: center; } 가로 정렬은 쉽지만, 세로로 가운데 정렬을 하는 것이 어렵다. 보통은 vertical-align: middle 속성을 시도하지만, vertical-align은 다른 태그를 기준으로 수직 정렬이 되는 것이라서옆에 다른 태그가 있어야만 그 태그에 맞춰서 세로 정렬이 된다. @css display: flex; align-items: center; 가장 쉬운 방법은 flex를 이용하여 align-items를 center로 설정하는 것이다..

CSS 포지션(Position) 모든 태그들은 position: static이라는 디폴트 상태를 갖는다. 차례대로 왼쪽>오른쪽, 위>아래로 쌓인다. position static default relative static을 픽셀만큼 이동시킴 (top,right,bottom,left 속성 有) absolute static이 아닌 포지션의 조상을 기준으로 정렬 (없을시 body) fixed 스크롤을 내려도 위치 고정되게 relative 태그의 위치를 살짝 변경하고 싶을 때, position: relative를 사용한다.이제 top, right, bottom, left 속성을 사용할 수 있다. relative는 각 방향을 기준으로 태그 안쪽 방향 으로 이동한다.(바깥쪽으로 이동하고 싶다면? 음수의 값을 주자.)..