웹개발16 CSS : 박스 모델 (Box Model) CSS의 박스 모델은 여백, 테두리, 패딩, 및 콘텐츠등 자체를 포함한 다양한 속성을 담고 있는 컨테이너입니다. 이러한 속성들은 함께 요소의 크기와 간격을 결정하여 페이지에서 볼 수 있는 박스를 생성하게 됩니다. - 콘텐츠 (Content) : 콘텐츠가 표시되는 영역으로 그 크기를 width (넓이) & height (높이)와 같은 속성을 사용해서 정할 수 있습니다. - 패딩 (Padding) : 콘텐츠 주변을 마치 공백처럼 공간을 만들어줍니다. 패딩의 크기는 padding과 관련 속성을 사용해 제어할 수 있습니다. - 테두리 (Border) : 콘텐츠와 패딩까지 둘러싸고, 테두리의 크기, 색상, 테두리 넓이, 스타일등은 border와 관련 속성을 사용하여 제어할 수 있습니다. - 여백 (Margin.. 2024. 9. 20. JavaScript에서 호이스팅(Hoisting)이란 JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다. 여기서 주의할 점은 "선언문" 이라는 것이며 "대입문"은 끌어올려지지 않습니다. JavaScript의 선언에는 3가지 방법이 있습니다. var : 변수를 선언. 추가로 동시에 값을 초기화let : 블록 스코프 지역 변수를 선언. 추가로 동시에 값을 초기화const : 블록 스코프 읽기 전용 상수를 선언 - var x = " " 와 같은 var 키워드로 변수를 선언이 가능하며, 실행 맥락에 따라 지역 및 전역 변수를 선언하는데 모두 사용될 수 있습니다. - let y - " " 와 같이 const 혹은 let 키워드로 변.. 2024. 9. 20. 스코프 (Scope) 이해 스코프는 프로그램에서 변수가 접근 가능한 영역을 나타냅니다. 이는 코드 내에서 변수, 함수, 객체의 가시성과 생명주기를 결정합니다. JavaScript에는 3가지 스코프 종류가 있습니다 :- 전역 범위 : 함수나 블록 외부에 선언된 변수나 함수가 해당되며, 프로그램 어디서든 접근할 수 있습니다.- 블록 범위 : 'let'이나 'const'를 사용하여 블록(중괄호 내)에서 선언된 변수는 블록 스코프를 가집니다. { } 에 있는 변수는 외부에서 접근이 불가합니다.- 함수 범위 : 각 함수는 새로운 스코프를 생성합니다. 이 변수는 그 함수 내에서만 접근할 수 있습니다. 전역 범위 : 함수 범위 : ** 함수 스코프 내에 선언된 'let', 'var', 'const'는 비슷한 역할을 합니다. 블록 범위 : .. 2024. 9. 18. JavaScript Event Delegation (이벤트 위임) 자바스크립트에서 이벤트 위임은 각 요소에 이벤트를 설정하는 대신, 상위 부모 요소에 설정하여 비슷한 방식으로 여러 요소를 다루면서 코드량을 줄일 수 있고 코드 효율을 높입니다. 또한 공통 조상에 인벤트 핸들러를 단 하나만 할당해 여러 요소를 한꺼번에 다룰 수 있어 메모리 사용과 성능을 최적화할 수 있습니다. 이벤트 전파에는 세 가지 단계가 있습니다 : 캡처링 단계, 타겟 단계 그리고 버블링 단계입니다. 이벤트 위임에서 버블링 단계를 활용합니다. 버블링 단계에서는 이벤트가 타겟 요소에서 시작하여 DOM 트리를 따라 상위로 전파됩니다. 자식 요소에서 발생한 이벤트가 부모 요소, 조부모 요소 등으로 전파되어 결국 최상위 문서 객체에 도달하게 됩니다. 캡처링 단계와 타겟 단계는 무엇인가요?캡처링 단계는 이벤.. 2024. 9. 13. AJAX 이해하기 AJAX는 'Asynchronous JavaScript And Xml' 줄인 단어 입니다. AJAX는 XMLHttpRequest 기술을 사용해 복작하고 동적인 웹페이지를 구성하는 프로그래밍 방식입니다. **AJAX는 프로그래밍 언어는 아닙니다** AJAX는 브라우저에 있는 XMLHttpRequest 객체 통해 웹 서버에서 데이터 요청하고 자바스크립트하고 HTML DOM을 사용하여 데이터를 사용하거나 복잡한 웹페이지를 만들 수 있게 해 줍니다. 1. 웹 페이지에서 이벤트가 발생합니다 (페이지가 로드되거나 버튼이 클릭됨).2. JavaScript가 XMLHttpRequest 객체를 생성합니다.3. XMLHttpRequest 객체가 웹 서버로 요청을 전송합니다.4. 서버가 요청을 처리합니다.5. 서버가 웹.. 2024. 9. 8. Node.js 모듈 시스템에 대해 Node.js에서 모듈은 '필요한 함수와 기능들의 집합'을 의미합니다. Node.js 에서 제공해 주는 많은 모듈들을 손쉽게 사용하거나 직접 모듈 만들어서 사용할 수 있습니다. const module = require "require() 함수를 사용해 자바스크립트 파일을 읽고, 실행하여 객체를 반환합니다. core module(built-in module)은 Node.js에서 기본적으로 제공하는(내재되어 있는) 모듈을 의미합니다. Http : http 모듈은 Node.js에서 HTTP 서버를 생성하기 위한 클래스, 메서드, 이벤트를 포함합니다. Url : url 모듈에는 URL 확인 및 구문 분석을 위한 메서드가 포함되어 있습니다. Querystring : querystring 모듈에는 쿼리 문자열을 .. 2024. 9. 6. 이전 1 2 3 다음
