본문 바로가기

ALL

(119)

[JavaScript] 이벤트 버블링, 캡처링, 위임이란? 🔗 이벤트 버블링(Event Bubbling)이란? 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성이다. 🔗 이벤트 캡처링(Event Capturing)이란? 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다. 🔗 이벤트 위임(Event Delegation)이란? 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트를 제어하는 방식이다. (앞에서 살펴본 이벤트 버블링과 캡처링은 이벤트 위임을 위한 선수 지식이라고 해도 과언이 아니다. 이벤트 위임은 실제 바닐라 자바스크립트로 웹과 앱을 구현할 때 자주 사용하는 코딩 패턴이다.) 장점 코드가 짧아지고 메모리가 절약된다. 무분별한 이벤트 등록으로 인한 메모리 누수를 방지할 수 ..

[JavaScript] 자료형 (Data Type) / 종류, 형변환, typeof 🔗 자료형(Data Type) 종류 숫자형 (Number) : 10진수, 16진수, 실수 모두 해당 문자형 (String) 논리형 (Boolean) : true(참) / false(거짓) undefined : 미정의된 자료형 null : 아무것도 참조하지 않은 자료형 📌 undefined VS null 차이점 공통점 : "값이 없다." undefined 데이터 타입 초기화 되지 않은 기본 초기값 상태 ex) var data1; null 오브젝트(객체) 타입 객체를 담기위한 변수를 초기화 하는 상태 ex) var data = null; (🤷‍♀️) undefined 보다 null 대상 변수가 더 큰 범위인 느낌 🔗 자료형 확인하기 typeof(변수); 🔗 자료형 형변환 문자형 -> 숫자형 Number(변수..

[JavaScript] 연산자(Operator) / 종류 🔗 기본 사칙 연산자 + , - , * , / , % 🔗 문자열 연산자 + : 문자열 합치기 ex) '감' + '자' => '감자' 🔗 복합 대입 연산자 += : 기존 변수 값에 값을 더하기 -= : 기존 변수 값에 값을 빼기 *= : 기존 변수 값에 값을 곱하기 /= : 기존 변수 값에 값을 나누기 %= : 기존 변수 값에 값을 나누기 한 나머지 구하기 ex) num = num + 10; => num += 10; 🔗 증감 연산자 ++ : 1씩 증가 -- : 1씩 감소 🔗 조건 비교 연산자 >= : (좌변이 우변보다) 크거나 같다. : (좌변이 우변보다) 크다.

[JavaScript] 변수(Variable) / 종류 🔗 변수(Variable)란? 변수란 데이터를 저장하는 장소를 의미한다. 🔗 변수 선언 방법 var let const [JavaScript / ES6] ES6 문법 정리 🔗 const, let 📌 var VS const, let var은 함수 스코프이다. const, let은 블록 스코프이다. 따라서 {블록} 밖에서 변수에 접근할 수 없다. 📌 const VS let let은 변수에 재할당이 가능하다. 따라서 다른.. devjindev.tistory.com 🔗 변수 종류 전역 변수 : 전체 영역에서 사용 가능 한 변수 지역 변수 : 정해진 영역 내에서만 사용 가능 한 변수 매개 변수 : 함수 외부에서 내부로 데이터를 전달할 때 사용하는 변수 멤버 변수 : 클래스 내부에서 만들어지며, 객체에서 사용하는 정..

[JavaScript] alert(경고창) / confirm (선택창) / prompt(입력창) / write(화면창) / log(콘솔창) 출력하기 alert() : 경고창에 출력하기 confirm() : 선택창에 출력하기 prompt() : 입력창에 출력하기 document.write() : 문서 화면창에 출력하기 console.log() : 콘솔창에 출력하기 💡 같이 보면 좋을 Post HTML / CSS / JavaScript 의 역할 및 차이점 (쉽고 빠르게 설명!) 🔗 HTML (Hypertext Markup Language) - 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어 - 웹의 뼈대, 구조를 설계하는 역할 🔗 CSS (Cascading Style Sheets) - 웹 문서의 전반적인 스타일을 미리 저장해.. devjindev.tistory.com

[Web] 웹 표준, 웹 접근성, 웹 호환성이란? 🔗 웹 표준 (Web Standards) 이란? 웹 표준이란 '웹에서 표준적으로 사용되는 기술이나 규칙'을 의미한다. 표준화 단체인 W3C가 권고한 표준안에 따라 웹 사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있다. 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다. 🔗 웹 접근성 (Web Accessibility) 이란? 웹 접근성이란 장애인, 고령자 등 모든 사용자가 어떠한 기술이나 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보를 동등하게 접근하고 이해할 수 있는 권리를 의미한다. 웹 표준을 준수함으로써 다양한 브라우저 환경에 대응이 가능하며 휴대폰, PDA..

[Web] 반응형 웹이란? / 반응형 vs 적응형 🔗 반응형 웹 (Responsive Web) 이란? 순서대로 PC - Tablet - Mobile 화면 반응형 웹이란 각종 디바이스 또는 모니터 해상도에 따라 컨텐츠들의 사이즈, 레이아웃 등이 유동적으로 바뀌는 웹을 말한다. 일반적으로 float, flex, % 등을 사용하여 유동적으로 반응할 수 있도록 한다. 1 2 3 4 5 @media screen and (max-width: 767px){ .container{ width: 50%; } } Colored by Color Scripter cs 미디어 쿼리를 사용하여 디바이스를 지정하여 화면 크기에 따라 바뀌는 웹을 제작한다. 📌 반응형 웹 (Responsive Web) vs 적응형 웹 (Adaptive Web) 차이점 반응형 웹은 디바이스에 따라 화면..

[CSS] flex 🔗 CSS에서 flex란? box와 item 등을 행 또는 열로 자유자재로 배치시킬 수 있는 CSS 속성이다. display: flex; flex-direction : 주축 방향 설정 · row : 가로축 → default · row-reverse : 가로축(역방향) ← · column : 세로축 ↓ · column-reverse : 세로축(역방향) ↑ flex-wrap : 줄바꿈 설정 · nowrap : 줄바꿈 X (1행에 모두 배치 => item width 자동으로 축소됨) default · wrap : 줄바꿈 O · wrap-reverse : 줄바꿈 O (역방향) ▪ flex shorthand flew-flow: flex-direction flex-wrap; justify-content : 주축(m..

이전 1 ··· 8 9 10 11 12 13 14 15 다음

티스토리툴바