본문 바로가기

코딩56

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.
그리드 시스템: CSS 그리드 레이아웃 이해하기 CSS 그리드 레이아웃은 웹 페이지의 복잡한 레이아웃을 손쉽게 구현할 수 있도록 해주는 강력한 CSS 기능입니다. 이 강의에서는 그리드 레이아웃의 기본 원리와 사용 방법을 탐구해보겠습니다. 그리드 레이아웃의 기본 CSS 그리드는 웹 페이지를 그리드(격자) 형태로 나누어 레이아웃을 구성합니다. 이는 행(row)과 열(column)의 형태로 구성된 2차원 배열을 제공하며, 이를 통해 복잡한 레이아웃을 쉽게 구현할 수 있습니다. 주요 개념 그리드 컨테이너(Grid Container): 그리드 레이아웃을 적용할 요소. 그리드 아이템(Grid Item): 그리드 컨테이너 내의 자식 요소들. 그리드 트랙(Grid Track): 그리드의 행(row) 또는 열(column). 그리드 셀(Grid Cell): 그리드의 .. 코딩/HTML CSS JS 2024. 4. 3.

티스토리툴바