0. JQuery란? 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리 거의 모든 웹 브라우저에 적용이 될 정도로 여러 브라우저에 대한 호환성이 있음 물론 JS 만으로도 충분히 구현이 가능하지만, 코드를 쉽고 간결하게 작성할 수 있도록 도움을 줌 CDN을 불러와야 하기 때문에, 코드가 길어지고 무거워지면 JS와 비교하였을 때 시간이 조금 더 걸릴 수 있다는 특징 사실 JQuery는 점점 입지가 줄어들고 있다고 한다. React나 Vue와 같은 자바스크립트 라이브러리가 많이 사용되며 그만큼 JQuery에 대한 관심도가 줄어드는 것 같다고 생각한다. 실제로 google trend 사이트에 들어가 해당 검색어에 대한 작년 5년간의 관심도 변화를 확인할 수 있는데,..

0. 반응형 웹이란? Responsive Web 같은 웹 페이지를 디바이스의 크기에 따라 알맞은 레이아웃을 보여줌 ▶ 감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 방식 웹 페이지의 디자인과 레이아웃이 다양한 화면 크기에 자동적으로 맞춰짐 CSS의 미디어 쿼리 (맞춤형 스타일 시트) 를 사용하여 구현 ▶ 이를 바탕으로 자체적으로 렌더링 하나의 웹 페이지에서 처리할 수 있다는 장점 때문에 많이 사용 ex ) 카카오모빌리티 : https://www.kakaomobility.com/ [ 장점 ] 모든 플랫폼에 대해 일관된 자료와 구조 제공 보편적이지 않은 화면 크기가 아닌 기기에서도 정상적으로 작동 [ 단점 ] 디자인에 대한 더 깊은 전문 지식 요구 요소가 잘못된 순서 혹은 크기로 배치되지 않..

0. DOM이란? Document Object Model XML / HTML 문서에 접근하기 위한 일종의 인터페이스 문서 내의 모든 요소 정의 각각의 요소에 접근하는 방법 제공 1. DOM의 구조 DOM은 그림에서 확인할 수 있듯이, 트리 형식으로 이루어져 있다. ★ tree란? 방향성이 있으며, 순환하지 않는 그래프의 한 종류 정점(node)와 간선(edge)를 활용해 데이터의 배치 형태를 추상화한 자료구조 노드가 N개인 트리는 항상 N-1개의 간선을 가짐 노드들이 나무 가지처럼 연결되었으며, 나무를 거꾸로 뒤집어 둔 형태와 유사 위쪽의 노드를 부모(parent) 노드라고 하며, 아래쪽 노드를 자식(child) 노드라고 한다. root node : 최상단에 있는 노드, parent node가 존재하지 ..

0. 자바스크립트에서 함수란? 득정 작업을 수행하기 위해 독립적으로 설계된 코드들의 집합 명령어의 묶음 재사용 가능한 영역을 정의 코드를 캡슐화하는 데에 도움이 됨 일반적으로 '입력(input) → 함수 → return문 → 출력(output)' 순으로 구성 함수 정의 : 함수를 "생성" 함수 호출 : 함수를 "사용" [ 특징 ] 함수 = 객체 function이라는 키워드로 정의 / 생성하며 출력이 가능 객체이기 때문에 함수를 변수나 배열에 저장 가능 다른 함수 호출 시 인자를 넘겨줄 수 있음 동일한 작업을 반복 (반복 작업을 줄이며 코드 재사용성 ↑) 유지보수 편리 1. 함수의 종류 1.1 내장 함수 이미 언어에서 자주 쓰이는 기능을 만들어 놓은 함수 ex. alert ( ), confirm ( ), ..

0. flexbox란 웹 페이지의 복잡한 레이아웃을 보다 간단하게 구현할 수 있도록 나오게 된 것이 CSS3에 추가된 flexbox 속성이다. 요소의 크기와 순서를 유연하게 배치할 수 있다는 장점이 있다. 뷰 포트나 요소의 크기가 불명확하거나, 동적으로 변할 때에도 효율적으로 요소들을 배치하거나 정렬할 수 있다. flexbox 기본 용어 flex item : 자식 요소 flex container : 상위 부모 요소 주축 (main axis): 아이템의 배치 방향의 축 교차축 (cross axis): 주축의 수직축 flexbox에 속하는 속성들은 정말 많지만, 대표적인 속성들에 대해 바로바로 보고 이해할 수 있도록 이미지를 첨부하였으니 찬찬히 코드들을 살펴보자. 1. flex-direction 속성 fle..

1. 단일 선택자 단일 선택자란 선택자가 가리키는 요소 혹은 개체가 하나임을 말한다. 다만, 단일 선택자라고 해도 적용받는 태그의 수는 여러 개일 수 있다. 1.1 전체 선택자 ( Universal Selector ) 모든 형태의 모든 요소를 선택 * { color: red; background-color: blue; } /* 페이지의 모든 요소에 대해 스타일 적용 */ 1.2 태그 선택자 ( Type Selector ) 작성한 태그의 모든 요소를 선택 p { color: red; text-align: center; } /* 페이지의 모든 요소에 대해 스타일 적용 */ 1.3 Class 선택자 ( Class Selector ) 작성한 클래스 값을 가지는 모든 요소를 선택 .name { color: red..