본문 바로가기
반응형

분류 전체보기276

[JavaScript 문법] 28일차: AJAX와 Fetch API AJAX란?AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 전체를 다시 로드하지 않고도 서버와 데이터를 주고받을 수 있도록 하는 비동기 기술입니다. 이를 통해 웹 애플리케이션의 속도와 사용성을 크게 향상시킬 수 있습니다.XMLHttpRequestXMLHttpRequest 객체는 AJAX 요청을 보내고 응답을 처리하는 데 사용됩니다. 이는 오래된 방식이지만 여전히 많은 프로젝트에서 사용되고 있습니다. 기본 사용법let xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function() { if (xhr.readyState === 4.. 2024. 8. 28.
[웹 디자인] 28일차: 웹 접근성 고려한 디자인 웹 접근성이란?웹 접근성(Web Accessibility)은 모든 사용자가 웹 콘텐츠에 접근하고 사용할 수 있도록 보장하는 것을 의미합니다. 여기에는 장애를 가진 사용자뿐만 아니라, 다양한 기기와 환경에서 웹 사이트를 사용하는 모든 사용자가 포함됩니다.웹 접근성의 중요성포용성: 모든 사용자가 웹사이트를 사용할 수 있도록 하여 포용성을 증진합니다.법적 요구사항: 많은 국가에서는 웹 접근성을 법으로 요구하고 있습니다.사용자 경험 향상: 접근성 개선은 모든 사용자의 경험을 향상시킵니다.웹 접근성을 고려한 디자인 원칙1. 인식할 수 있어야 한다(Perceivable)모든 사용자, 특히 시각, 청각 장애를 가진 사용자가 콘텐츠를 인식할 수 있어야 합니다. 이미지에 대체 텍스트 추가이미지에 alt 속성을 사용하여 .. 2024. 8. 28.
[JavaScript 문법] 27일차: 이벤트 루프와 태스크 큐 이벤트 루프란?이벤트 루프(Event Loop)는 JavaScript의 비동기 작업을 처리하는 메커니즘입니다. JavaScript는 싱글 스레드로 동작하지만, 이벤트 루프를 통해 비동기 작업을 효율적으로 관리하고 실행할 수 있습니다.이벤트 루프의 동작 원리이벤트 루프는 콜 스택(Call Stack)과 태스크 큐(Task Queue)를 지속적으로 감시하면서, 콜 스택이 비어 있을 때 태스크 큐에서 작업을 가져와 실행합니다. 이 과정을 반복하여 비동기 작업을 처리합니다.기본 흐름콜 스택: 현재 실행 중인 함수가 쌓이는 스택입니다.태스크 큐: 비동기 작업의 콜백 함수가 대기하는 큐입니다.이벤트 루프: 콜 스택이 비어 있을 때 태스크 큐에서 작업을 가져와 실행합니다.예제console.log('Start');se.. 2024. 8. 27.
[웹 디자인] 27일차: 반응형 그리드 레이아웃 프로젝트 반응형 그리드 레이아웃이란?반응형 그리드 레이아웃은 다양한 화면 크기에 맞게 자동으로 조정되는 그리드 레이아웃입니다. CSS Grid를 사용하면 복잡한 레이아웃을 쉽게 구현하고, 미디어 쿼리를 사용하여 반응형 디자인을 적용할 수 있습니다.프로젝트 목표이번 프로젝트에서는 반응형 그리드 레이아웃을 사용하여 포트폴리오 웹사이트를 만들 것입니다. 이 웹사이트는 다양한 크기의 이미지를 그리드 형태로 배치하고, 화면 크기에 따라 그리드 레이아웃이 자동으로 조정되도록 합니다.프로젝트 단계1. HTML 구조 작성HTML 구조를 작성하여 그리드 레이아웃의 기본 틀을 만듭니다. Portfolio 2. CSS 스타일링CSS를 사용하여 그리드 레이아웃을 설정하고 스.. 2024. 8. 27.
[JavaScript 문법] 26일차: 타이머 함수 타이머 함수란?타이머 함수는 특정 시간 후에 코드를 실행하거나, 일정 간격으로 코드를 반복 실행할 수 있도록 도와주는 함수입니다. JavaScript에서는 setTimeout, setInterval, clearTimeout, clearInterval 네 가지 주요 타이머 함수를 제공합니다.setTimeoutsetTimeout 함수는 지정한 시간 후에 한 번 특정 코드를 실행합니다. 시간은 밀리초 단위로 지정합니다. 기본 문법setTimeout(callback, delay);예제function greet() { console.log('Hello, World!');}setTimeout(greet, 2000); // 2초 후 'Hello, World!' 출력인라인 함수 사용setTimeout(() => { .. 2024. 8. 26.
[웹 디자인] 26일차: 갤러리 및 슬라이더 디자인 갤러리 및 슬라이더란?갤러리와 슬라이더는 웹사이트에서 이미지를 효과적으로 표시하는 방법입니다. 갤러리는 여러 이미지를 그리드 형태로 배열하여 사용자가 쉽게 볼 수 있게 하고, 슬라이더는 이미지를 슬라이드 형태로 전환하여 하나씩 표시합니다.갤러리 디자인HTML 구조 CSS 스타일body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f4;}.gallery { display: gri.. 2024. 8. 26.
[JavaScript 문법] 25일차: async/await async/await란?async와 await는 JavaScript에서 비동기 작업을 보다 간편하고 직관적으로 작성할 수 있도록 도와주는 구문입니다. async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 해결될 때까지 기다립니다.async 함수async 키워드를 함수 앞에 붙이면 해당 함수는 항상 프로미스를 반환합니다. 함수 내부에서 return한 값은 자동으로 Promise.resolve로 감싸집니다.예제async function fetchData() { return 'Fetched Data';}fetchData().then((data) => { console.log(data); // 'Fetched Data'});await 표현식await 키워드는 async 함수 내부에서만 .. 2024. 8. 25.
[웹 디자인] 25일차: 폼 디자인 및 검증 폼 디자인이란?폼은 사용자가 데이터를 입력하고 제출할 수 있도록 하는 웹 페이지의 중요한 요소입니다. 잘 설계된 폼은 사용자 경험을 향상시키고 데이터를 정확하게 수집하는 데 도움이 됩니다.폼 디자인 기본 요소입력 필드: 텍스트 입력, 이메일, 비밀번호, 등.라벨: 입력 필드에 대한 설명을 제공하는 텍스트.버튼: 폼 제출 또는 취소 기능을 제공하는 버튼.필수 입력 표시: 필수 입력 필드를 명확하게 표시.오류 메시지: 입력 검증 오류에 대한 피드백.폼 디자인 예제HTML 구조 Contact Us Name Email Message .. 2024. 8. 25.
[JavaScript 문법] 24일차: 프로미스 고급 프로미스 체이닝프로미스 체이닝(Promise Chaining)은 여러 프로미스를 순차적으로 실행하는 방법입니다. 각 then 메서드는 항상 새로운 프로미스를 반환하므로, 여러 then 메서드를 연결하여 사용할 수 있습니다. 이를 통해 비동기 작업을 순차적으로 처리할 수 있습니다.예제let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('1단계 완료'); }, 1000);});promise .then((message) => { console.log(message); // '1단계 완료' (1초 후 출력) return '2단계 완료'; }) .then((message) => { console.lo.. 2024. 8. 24.
[웹 디자인] 24일차: 네비게이션 바 디자인 네비게이션 바란?네비게이션 바(Navigation Bar)는 웹사이트에서 사용자가 주요 페이지나 섹션으로 쉽게 이동할 수 있도록 도와주는 메뉴입니다. 잘 설계된 네비게이션 바는 웹사이트의 가독성과 사용자 경험을 향상시킵니다.네비게이션 바의 기본 요소로고: 웹사이트의 로고를 표시합니다.메뉴 항목: 주요 페이지나 섹션으로 이동할 수 있는 링크입니다.검색 창: 검색 기능을 제공합니다.버튼: 로그인, 회원가입 등의 버튼입니다.네비게이션 바 디자인 예제HTML 구조 Logo Home About Services Contact Login Sign Up Home .. 2024. 8. 24.
반응형

티스토리툴바