본문 바로가기

프로젝트11

[JavaScript 문법] 50일차: 최종 프로젝트 최종 프로젝트 개요이번 단계에서는 지금까지 배운 모든 내용을 활용하여 자신만의 웹 애플리케이션 프로젝트를 기획하고 구현해봅니다. 프로젝트를 통해 JavaScript, HTML, CSS, 그리고 선택한 프레임워크(React, Vue, Angular)를 사용하여 실제 웹 애플리케이션을 만드는 과정을 경험할 수 있습니다.프로젝트 기획먼저, 어떤 종류의 웹 애플리케이션을 만들지 결정합니다. 예를 들어, 다음과 같은 프로젝트를 선택할 수 있습니다:Todo 리스트 애플리케이션날씨 정보 제공 애플리케이션간단한 블로그 플랫폼영화 검색 애플리케이션예제: Todo 리스트 애플리케이션기능 목록:할 일 추가할 일 삭제할 일 완료 표시필터링 (전체, 완료, 미완료)프로젝트 구조 설계프로젝트의 구조를 설계합니다. 컴포넌트와 페이.. 2024. 9. 20.

[웹 디자인] 30일차: 최종 프로젝트 발표 및 리뷰 최종 프로젝트 발표최종 프로젝트는 그동안 학습한 내용을 종합하여 완성된 웹사이트를 발표하는 단계입니다. 프로젝트 발표를 통해 자신의 작업을 공유하고, 피드백을 받아 개선할 수 있는 기회를 갖게 됩니다.발표 준비1. 프로젝트 개요 설명프로젝트의 주요 목적과 목표를 간략히 설명합니다. 어떤 문제를 해결하고자 했는지, 어떤 기능을 구현했는지에 대해 이야기합니다.예제:제 프로젝트는 포트폴리오 웹사이트입니다. 이 웹사이트의 주요 목적은 제 작업물을 잠재적 고용주나 클라이언트에게 소개하는 것입니다. 주요 기능으로는 프로젝트 갤러리, 소개 페이지, 연락처 폼 등이 있습니다.2. 주요 기능 및 특징 설명웹사이트의 주요 기능과 특징을 설명합니다. 각 페이지나 섹션의 주요 요소를 시연합니다.예제:홈페이지에서는 짧은 소개와.. 2024. 8. 30.

[웹 디자인] 29일차: 최종 프로젝트 계획 및 디자인 최종 프로젝트 개요최종 프로젝트는 그동안 배운 HTML, CSS, 자바스크립트, 반응형 디자인, 접근성 등을 종합하여 완성된 웹사이트를 제작하는 것입니다. 이 프로젝트를 통해 실전 웹 디자인 기술을 적용하고, 포트폴리오에 추가할 수 있는 결과물을 만들게 됩니다.프로젝트 단계1. 프로젝트 목표 설정웹사이트의 주요 목적과 목표를 정의합니다. 예를 들어, 포트폴리오 웹사이트, 블로그, 비즈니스 웹사이트 등을 선택할 수 있습니다.2. 콘텐츠 계획웹사이트에 포함될 주요 콘텐츠를 계획합니다. 각 페이지나 섹션에 어떤 내용이 포함될지 구체적으로 작성합니다.3. 사이트맵 작성사이트맵을 작성하여 웹사이트의 구조를 시각적으로 표현합니다. 주요 페이지와 그 하위 페이지를 계층 구조로 나타냅니다.예제:- 홈 - 소개 - .. 2024. 8. 29.

[To Do List] 4단계: 확장 가능한 프로젝트 구조 4. 확장 가능한 프로젝트 구조프로젝트 구조를 확장 가능하게 설계하면 나중에 기능을 추가하거나 유지보수하기가 쉬워집니다. 다음은 Simple To-Do List 프로젝트의 확장 가능한 디렉토리 및 파일 구조 예시입니다:simple-to-do-list/│├── index.html├── css/│ └── style.css├── js/│ ├── app.js│ ├── storage.js│ └── ui.js└── assets/ └── images/ └── logo.png디렉토리 및 파일 설명index.html: 프로젝트의 메인 HTML 파일입니다. 전체 구조를 정의하고, 필요한 CSS와 JavaScript 파일을 포함합니다.css/style.css: 모든 스타일 관련 정의가 들어있.. 2024. 6. 16.

[To Do List] 3단계: 규칙 설정 3. 규칙 설정: 코딩컨벤션, Git 커밋 메시지 양식코딩 컨벤션파일 및 디렉토리 구조파일명은 소문자와 하이픈(-)을 사용합니다. 예: index.html, style.css, script.js디렉토리명은 소문자와 하이픈(-)을 사용합니다.HTML들여쓰기는 2칸을 사용합니다.속성명은 소문자를 사용하며, 값은 큰따옴표("")로 감쌉니다.자주 사용되는 HTML 구조를 주석으로 표시합니다.CSS들여쓰기는 2칸을 사용합니다.클래스명은 소문자와 하이픈(-)을 사용합니다. 예: .todo-item, .completedCSS 속성은 알파벳 순으로 정렬합니다.JavaScript들여쓰기는 2칸을 사용합니다.변수명은 카멜케이스(camelCase)를 사용합니다. 예: todoItem, completedTasks함수명은 동사.. 2024. 6. 16.

[To Do List] 1단계: 프로젝트명과 설명 1. 프로젝트명과 설명프로젝트명To Do List설명To-Do List는 사용자가 해야 할 일들을 추가, 수정, 삭제할 수 있는 간단한 웹 애플리케이션입니다. 이 프로젝트는 JavaScript의 DOM 조작과 로컬 스토리지를 활용한 데이터 저장 방법을 이용할 것입니다.. 또한, HTML과 CSS를 사용하여 사용자 친화적인 인터페이스를 제공하며, JavaScript를 통해 사용자 인터랙션을 처리합니다.이 애플리케이션의 주요 기능은 다음과 같습니다:사용자가 새로운 할 일을 입력하고 목록에 추가할 수 있습니다.추가된 할 일을 클릭하여 완료 상태로 표시할 수 있습니다.할 일을 수정하거나 삭제할 수 있습니다.로컬 스토리지를 사용하여 할 일 목록을 브라우저에 저장하고, 페이지를 새로고침해도 데이터가 유지됩니다. 2024. 6. 16.

[포트폴리오 페이지] 5단계: 스타일링 및 레이아웃 개선 5단계: 스타일링 및 레이아웃 개선5.1 전체적인 레이아웃과 스타일링 개선styles.css 파일에서 전체적인 스타일링을 개선합니다.styles.css (수정된 부분)body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; /* 배경색을 설정합니다. */}header { background-color: #333; color: #fff; padding: 1em 0; text-align: center; position: sticky; /* 스크롤 시에도 상단에 고정됩니다. */ top: 0; z-index: 1000; /* 다른 요소보다 위에 표시됩.. 2024. 6. 16.

[포트폴리오 페이지] 4단계: Contact 섹션 추가 4단계: Contact 섹션 추가4.1 Contact 섹션 HTML 작성index.html 파일에서 Contact 섹션에 내용을 추가합니다.index.html (수정된 부분) Contact Send 4.2 Contact 섹션 스타일링styles.css 파일에서 Contact 섹션에 스타일을 추가합니다.styles.css (추가된 부분)#contact { background-color: #f9f9f9; /* 배경색을 설정합니다. */ padding: 2em; /* 패딩을 설정합니다. */ margin-top: 2em; /* 상단 여백을 설정합니다. */ border-radius: 8px; /* 모서리를 둥글게 만.. 2024. 6. 16.

[포트폴리오 페이지] 3단계: Projects 섹션 추가 3단계: Projects 섹션 추가3.1 Projects 섹션 HTML 작성index.html 파일에서 Projects 섹션에 내용을 추가합니다.index.html (수정된 부분) Projects Project 1 Description of project 1 View Project Project 2 Description of project 2 View Project Project 3 Description of project 3 View Projec.. 2024. 6. 16.

[UX/UI Design] 5단계: 프로젝트 수행 및 피드백 받기 5단계: 프로젝트 수행 및 피드백 받기학습 목표:프로젝트 기획 및 실행피드백 수집 및 반영세부 학습 내용:1. 프로젝트 기획 및 실행학습 목표:UX/UI 디자인 프로젝트의 전반적인 기획과 실행 과정 이해실무 프로젝트 경험 쌓기학습 자료:온라인 자료:UX Design.ccNielsen Norman Group예제 프로젝트:인터넷에서 검색하여 다양한 UX/UI 프로젝트 사례 참고세부 학습 과정:프로젝트 주제 선정 및 기획프로젝트 목표 및 범위 설정타임라인 및 주요 마일스톤 설정실습:프로젝트 주제 선정 (예: 특정 앱의 UX/UI 개선)프로젝트 목표 및 범위 설정타임라인 작성 및 주요 마일스톤 설정문서화 예시:# 프로젝트 기획 문서## 프로젝트 개요- 프로젝트명: [프로젝트명]- 작성자: [작성자 이름]- 작성.. 2024. 6. 8.

이전 1 2 다음

티스토리툴바