본문 바로가기
반응형

분류 전체보기289

[웹 디자인] 30일차: 최종 프로젝트 발표 및 리뷰 최종 프로젝트 발표최종 프로젝트는 그동안 학습한 내용을 종합하여 완성된 웹사이트를 발표하는 단계입니다. 프로젝트 발표를 통해 자신의 작업을 공유하고, 피드백을 받아 개선할 수 있는 기회를 갖게 됩니다.발표 준비1. 프로젝트 개요 설명프로젝트의 주요 목적과 목표를 간략히 설명합니다. 어떤 문제를 해결하고자 했는지, 어떤 기능을 구현했는지에 대해 이야기합니다.예제:제 프로젝트는 포트폴리오 웹사이트입니다. 이 웹사이트의 주요 목적은 제 작업물을 잠재적 고용주나 클라이언트에게 소개하는 것입니다. 주요 기능으로는 프로젝트 갤러리, 소개 페이지, 연락처 폼 등이 있습니다.2. 주요 기능 및 특징 설명웹사이트의 주요 기능과 특징을 설명합니다. 각 페이지나 섹션의 주요 요소를 시연합니다.예제:홈페이지에서는 짧은 소개와.. 2024. 8. 30.
[JavaScript 문법] 29일차: 에러 처리 에러 처리란?에러 처리는 코드 실행 중 발생할 수 있는 예외 상황을 관리하고, 프로그램이 예기치 않게 종료되지 않도록 하는 중요한 방법입니다. JavaScript에서는 try, catch, finally, throw 문을 사용하여 에러를 처리할 수 있습니다.try, catch 문try 블록은 코드 실행을 시도하며, catch 블록은 try 블록에서 발생한 에러를 처리합니다. 기본 문법try { // 코드 실행} catch (error) { // 에러 처리}예제try { let result = 10 / 0; console.log(result); // Infinity let json = JSON.parse('Invalid JSON');} catch (error) { console.error('Er.. 2024. 8. 29.
[웹 디자인] 29일차: 최종 프로젝트 계획 및 디자인 최종 프로젝트 개요최종 프로젝트는 그동안 배운 HTML, CSS, 자바스크립트, 반응형 디자인, 접근성 등을 종합하여 완성된 웹사이트를 제작하는 것입니다. 이 프로젝트를 통해 실전 웹 디자인 기술을 적용하고, 포트폴리오에 추가할 수 있는 결과물을 만들게 됩니다.프로젝트 단계1. 프로젝트 목표 설정웹사이트의 주요 목적과 목표를 정의합니다. 예를 들어, 포트폴리오 웹사이트, 블로그, 비즈니스 웹사이트 등을 선택할 수 있습니다.2. 콘텐츠 계획웹사이트에 포함될 주요 콘텐츠를 계획합니다. 각 페이지나 섹션에 어떤 내용이 포함될지 구체적으로 작성합니다.3. 사이트맵 작성사이트맵을 작성하여 웹사이트의 구조를 시각적으로 표현합니다. 주요 페이지와 그 하위 페이지를 계층 구조로 나타냅니다.예제:- 홈 - 소개 - .. 2024. 8. 29.
[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.
반응형

티스토리툴바