본문 바로가기

코딩/HTML CSS JS42

웹 스토리지: 로컬 및 세션 스토리지 사용하기 웹 스토리지(Web Storage)는 자바스크립트 API 입니다. 사용자의 브라우저에 데이터를 저장하는 메커니즘으로, 쿠키보다 용량이 크다는 장점이 있어서 HTTP 헤더로 정보가 전송되지 않는 영구 데이터를 사용자의 장치에 저장할 때 쿠키의 대안으로 사용됩니다. 이 기술은 클라이언트에 데이터를 저장할 수 있으므로, 잘 활용하면 브라우저 세션 간 정보 저장을 응용한 다양한 기능을 만들어낼 수 있습니다. 이로써 사용자 경험을 매우 향상시킬 수 있죠. 웹 스토리지의 핵심 개념 웹 스토리지는 두 가지 형태로 제공됩니다: 로컬 스토리지와 세션 스토리지가 있어요. 로컬 스토리지 데이터가 사용자의 브라우저에 영구적으로 저장됩니다. 사용자가 브라우저를 닫더라도 데이터가 유지됩니다. localStorage 객체를 사용하.. 코딩/HTML CSS JS 2024. 4. 11.
JSON과 웹 데이터: JSON 형식 이해와 활용 JSON(JavaScript Object Notation)은 경량의 데이터 교환 형식입니다. 이해하기 쉽고, 사람과 기계 모두에게 읽기 편하며, 프로그래밍 언어에 독립적인 특징을 가지고 있습니다. JSON의 기본 구조 형식 JSON은 이름과 값의 쌍으로 구성됩니다. JavaScript의 객체 리터럴과 유사합니다. 데이터는 중괄호 {} 안에 위치하며, 각각의 이름과 값은 콜론 :으로 구분됩니다. 배열은 대괄호 []로 표시됩니다. 예시: { "name": "Kim ha seong", "age": 30, "isStudent": false, "skills": ["HTML", "CSS", "JavaScript"] } 데이터 타입 JSON에서 사용할 수 있는 데이터 타입에는 문자열, 숫자, 객체, 배열, 불리언(t.. 코딩/HTML CSS JS 2024. 4. 7.
AJAX 기초: 비동기 웹 컨텐츠 로딩 AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 서버와 비동기적으로 데이터를 교환하고 업데이트할 수 있게 하는 기술입니다. 이를 통해 페이지 전체를 새로고침하지 않고도 부분적인 업데이트가 가능합니다. AJAX의 핵심 개념 비동기 통신 AJAX는 웹 페이지가 백그라운드에서 서버와 데이터를 교환할 수 있도록 합니다. 사용자의 경험을 방해하지 않고, 웹 페이지의 일부만을 업데이트할 수 있습니다. XMLHttpRequest 객체 AJAX의 핵심은 XMLHttpRequest 객체입니다. 이 객체를 사용하여 서버에 데이터를 요청하고 응답을 받을 수 있습니다. 기본 AJAX 요청 AJAX 요청 생성 자바스크립트에서 XMLHttpRequest 객체를 생성하여 서버에 요청을 보내는 기본.. 코딩/HTML CSS JS 2024. 4. 6.
기본 JS 함수와 이벤트: 함수 작성 및 이벤트 처리 기초 자바스크립트(JavaScript)는 웹 페이지에 동적인 요소를 추가하고 사용자 상호작용을 가능하게 하는 프로그래밍 언어입니다. 이 강의에서는 JS의 기본적인 구성 요소인 함수와 이벤트 처리에 대해 알아봅니다. 자바스크립트 함수의 기초 함수란 무엇인가? 함수는 하나의 작업을 수행하거나 값을 계산하는 재사용 가능한 코드 블록입니다. 함수를 사용함으로써 코드를 더 간결하고 유지보수하기 쉽게 만들 수 있습니다. 함수 선언 방법 자바스크립트에서 함수를 선언하는 기본적인 형태는 다음과 같습니다. function greet(name) { return "Hello, " + name + "!"; } 이 함수는 'name'이라는 매개변수를 받아서 문자열을 반환합니다. 함수 호출 var message = greet("Ali.. 코딩/HTML CSS JS 2024. 4. 5.
CSS Flexbox: 유연한 레이아웃을 위해 사용되는 플렉스박스 CSS Flexbox는 복잡하지 않으면서도 유연한 레이아웃을 만들기 위한 현대적인 CSS 도구입니다. 이 강의에서는 Flexbox의 기본 개념과 그 사용 방법을 살펴보겠습니다. Flexbox의 기본 개념 Flexbox는 주축(main axis)과 교차축(cross axis)을 중심으로 요소를 배치하는 레이아웃 모델입니다. 이를 통해 요소들의 크기가 동적으로 조절되며, 컨테이너 안에서 자유롭게 정렬될 수 있습니다. 핵심 구성 요소 Flex 컨테이너(Flex Container): Flexbox 레이아웃을 적용할 부모 요소. Flex 아이템(Flex Item): Flex 컨테이너 내부의 자식 요소들. Flexbox 사용하기 Flex 컨테이너 설정 Flexbox 레이아웃을 시작하기 위해서는 부모 요소에 disp.. 코딩/HTML CSS JS 2024. 4. 4.

티스토리툴바