전체 글69 [SeSAC] 웹 풀스택 과정_JavaScript DOM(2) DOM 1. DOM의 객체화와 노드 DOM은 문서 내의 모든 요소를 노드라는 객체로 나타냅니다. 이 노드들은 계층 구조로 연결되어 있으며, 각각의 노드는 문서 내의 특정 부분을 나타냅니다. 노드는 HTML의 요소, 속성, 텍스트 등을 추상화하여 프로그래밍적으로 다룰 수 있게 해 줍니다. 이때, "객체"라는 표현은 DOM의 노드들을 프로그래밍 언어에서 다룰 수 있는 객체로 변환해 주는 것을 의미합니다. 각 노드는 특정 유형을 나타내며, 이러한 노드 객체들을 통해 JavaScript 등의 스크립트 언어를 사용하여 웹 페이지를 동적으로 조작할 수 있습니다. 2. 노드 유형과 태그 DOM에서 각 요소들은 노드로 표현됩니다. 노드에는 여러 종류가 있으며, 주요한 노드 유형으로는 다음과 같은 것들이 있습니다: - .. 2023. 8. 7. [SeSAC] 웹 풀스택 과정_JQuery 1. JQuery JQuery는 라이브러리이며, HTML의 DOM 조작 등을 지원해 자바스크립트를 간편하게 사용하기 위한 목적으로 만들어졌습니다. 2. 사용 현황 요즘에는 주로 JQuery보다 리액트(라이브러리)나 Vue(프레임워크) 등등 을 사용한다고 합니다. 사용률은 낮아졌지만 어느 정도 점유율을 유지하고 있어 개발자를 확보하는데 용이하며 정적이고 가벼운 웹페이지를 신속하게 제작하는 용도로는 쓰기 좋다고 합니다. 3. 사용해 보기 위해 사전 작업 https://releases.jquery.com/ 에서 CDN 링크를 복사해 HTML 파일에 붙여 넣는다. 4. 기본 작성문법 $(선택자).동작함수(); - $(선택자).동작함수() - $(): HTML 요소를 선택하는 함수 - 동작함수: 선택된 요소에 대.. 2023. 8. 4. [SeSAC] 웹 풀스택 과정_CSS/Bootstrap 반응형 이란 동일한 웹 페이지를 상황에 따라 레이아웃을 다르게 보여주는 것입니다. 예로 https://www.kakaomobility.com 웹사이트에서 브라우저의 크기를 변경하거나 모바일로 웹사이트를 볼 때 같은 내용의 레이아웃들이 변경되는 것을 볼 수 있습니다. 1. 뷰포트 뷰포트(viewport)는 현재 화면에 보이고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 2. CSS 미디어 쿼리 CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 2-1. 미디어 쿼리 구문 @me.. 2023. 8. 1. [SeSAC] 웹 풀스택 과정_JavaScript DOM(1) 시작 자바스크립트 언어는 웹 브라우저, 웹 서버 또는 그외 다른곳에서 동작할 수 있습니다. 각각 동작하는 곳들을 호스트 라고 합니다. 자바스크립트로 작성된 코드가 웹 브라우저에서 동작한다면 호스트는 웹 브라우저 입니다. 웹 브라우저는 자바스크립트 코드가 잘 동작할 수 있도록 기능들을 제공하고 이 기능들을 우선은 라이브러리(API),객체 라고 이해해도 될것 같습니다. 이렇게 호스트들이 제공하는 기능들까지 포함해서 호스트 환경 이라고 합니다. 이번 회고에서는 호스트 환경이 웹브라우저일때 브라우저에서 제공하는 기능중 하나인 DOM에 대해서 학습하고 내용 정리해 보겠습니다. - window : 자바스크립트 코드의 최상단 전역 객체 - DOM(Document Object Model) - BOM(Browser O.. 2023. 7. 31. [SeSAC] 웹 풀스택 과정_JavaScript 함수와 메서드 지난 수업시간에 이어서 자바스크립트의 함수, 메서드, 조건문, 반복문, DOM (Document Object Model)에 대해서 개념을 학습하고 실습을 해볼 수 있는 시간이었습니다. 그중 가장 재밌었던?? 함수와 메서드에 대해서 간략하게 정리하는 것으로 2주 차 회고를 작성하겠습니다. 자바스크립트에서 함수와 메서드 자바스크립트에서 메서드와 함수의 의미는 다릅니다. 메서드는 사용자가 정의한 객체의 프로퍼티가 함수인 경우입니다. 즉, 객체는 키와 밸류로 이루어진 프로퍼티를 가지고 있고, 프로퍼티가 함수인 경우 메서드입니다. - 함수 호출 시 : 함수() - 메서드 호출시 : 객체.메서드() - function 함수명 (){} 일 때 함수명을 쓰지 않고 사용했을 때 이 함수는 익명함수입니다. 1. 함수 선언.. 2023. 7. 31. [JavaScript] var로 선언된 변수가 선언되기 이전에도 접근할 수 있는 이유 (feat. 스코프&호이스팅) 변수 선언 키워드인 var에 대한 아래 설명을 보고 궁금해서 공부한 내용을 작성합니다. " var : 함수 스코프를 가지며, 호이스팅(hoisting)으로 인해 변수가 선언되기 이전에도 접근할 수 있습니다. " 1. 스코프 스코프 : 유효한 참조 범위 ex) 함수내부에 선언된 변수가, 함수 내부에서만 참조가 가능하다면 >> 해당 변수의 스코프는 함수 내부 함수 내부에서 var로 선언된 변수는 지역 변수의 스코프를 가집니다. 하지만 그외에서 var로 선언된 변수는 전역변수의 스코프를 가집니다. (따라서 함수내부가 아닌 if, for 문 내부에서 선언되더라도 전역변수의 스코프를 가집니다.) 모든 블록 내부에서 let과 const로 선언된 변수는 다 지역변수의 스코프를 가집니다. (if, for문 등에서도) .. 2023. 7. 26. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
