반응형 Javascript 프로젝트25 [포트폴리오 페이지] 7단계: 프로젝트 상세 페이지 추가 ~ SEO 최적화 2. 프로젝트 상세 페이지 추가이 단계에서는 각 프로젝트에 대한 상세 페이지를 추가하여 방문자가 각 프로젝트의 상세 내용을 확인할 수 있도록 합니다. 상세 페이지를 만들고 링크를 추가하여 이를 구현합니다.2.1 프로젝트 상세 페이지 HTML 작성각 프로젝트에 대한 상세 페이지를 추가합니다. 예를 들어 project1.html 파일을 생성합니다.Git Commit Messagegit commit -m "Add detailed project pages"project1.html 6.2 커밋과 푸시변경된 내용을 커밋하고 GitHub에 푸시합니다.git add index.htmlgit commit -m "Improve SEO with meta tags and keyword.. 2024. 6. 16. [포트폴리오 페이지] 6단계: 반응형 디자인 반응형 디자인을 확장하여 포트폴리오 웹사이트를 모든 기기에서 최적화된 방식으로 표시하도록 개선해 보겠습니다. 반응형 디자인을 구현하기 위해 추가할 내용은 다음과 같습니다.헤더 및 네비게이션 메뉴의 반응형 디자인섹션과 폼 요소의 반응형 디자인이미지 및 기타 미디어 요소의 반응형 디자인1. 헤더 및 네비게이션 메뉴의 반응형 디자인1.1. HTML 수정헤더와 네비게이션 메뉴를 위한 구조를 조금 더 개선하여 모바일에서의 사용성을 높입니다. index.html (수정된 부분) My Portfolio ☰ About Me Projects Contact English .. 2024. 6. 16. [To Do List] 다음 단계 추가 작업테스트 작성할 일 추가, 삭제, 완료 상태 토글 등의 기능을 테스트하기 위한 단위 테스트를 작성합니다.Jest와 같은 테스트 프레임워크를 사용하여 테스트를 구현합니다.추가 기능 구현할 일 수정 기능 추가: 기존 할 일을 수정할 수 있는 기능을 추가합니다.할 일 필터링 기능 추가: 완료된 할 일, 미완료된 할 일 등을 필터링하여 볼 수 있는 기능을 추가합니다.데드라인 설정 기능 추가: 할 일에 데드라인을 설정하고, 데드라인이 가까워지면 알림을 주는 기능을 추가합니다.반응형 디자인 적용모바일 및 다양한 화면 크기에서도 잘 보이도록 반응형 디자인을 적용합니다.미디어 쿼리를 사용하여 CSS를 조정합니다.사용자 인증 추가Firebase Authentication 등을 사용하여 사용자 인증 기능을 추가합니.. 2024. 6. 16. [To Do List] 5단계: 단계별 진행 및 코드 주석과 Git 커밋 메시지 5. 단계별 진행 및 코드 주석과 Git 커밋 메시지단계 1: 프로젝트 설정 및 초기 파일 생성프로젝트 디렉토리를 생성하고, 필요한 파일들을 만듭니다.index.html, css/style.css, js/app.js, js/storage.js, js/ui.js 파일을 생성합니다.mkdir simple-to-do-listcd simple-to-do-listtouch index.html css/style.css js/app.js js/storage.js js/ui.jsGit 커밋 메시지feat: 초기 프로젝트 설정 및 파일 생성프로젝트 디렉토리 생성.index.html, css/style.css, js/app.js, js/storage.js, js/ui.js 파일 생성.단계 2: HTML 구조 작성index.. 2024. 6. 16. [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] 2단계: README.md 작성 To Do List프로젝트 설명To Do List는 사용자가 해야 할 일들을 추가, 수정, 삭제할 수 있는 간단한 웹 애플리케이션입니다. 이 프로젝트는 JavaScript의 DOM 조작과 로컬 스토리지를 활용한 데이터 저장 방법을 사용할 것입니다. 또한, HTML과 CSS를 사용하여 사용자 친화적인 인터페이스를 제공하며, JavaScript를 통해 사용자 인터랙션을 처리합니다.이 애플리케이션의 주요 기능은 다음과 같습니다:사용자가 새로운 할 일을 입력하고 목록에 추가할 수 있습니다.추가된 할 일을 클릭하여 완료 상태로 표시할 수 있습니다.할 일을 수정하거나 삭제할 수 있습니다.로컬 스토리지를 사용하여 할 일 목록을 브라우저에 저장하고, 페이지를 새로고침해도 데이터가 유지됩니다.주요 기능할 일 추가: 사용.. 2024. 6. 16. [To Do List] 1단계: 프로젝트명과 설명 1. 프로젝트명과 설명프로젝트명To Do List설명To-Do List는 사용자가 해야 할 일들을 추가, 수정, 삭제할 수 있는 간단한 웹 애플리케이션입니다. 이 프로젝트는 JavaScript의 DOM 조작과 로컬 스토리지를 활용한 데이터 저장 방법을 이용할 것입니다.. 또한, HTML과 CSS를 사용하여 사용자 친화적인 인터페이스를 제공하며, JavaScript를 통해 사용자 인터랙션을 처리합니다.이 애플리케이션의 주요 기능은 다음과 같습니다:사용자가 새로운 할 일을 입력하고 목록에 추가할 수 있습니다.추가된 할 일을 클릭하여 완료 상태로 표시할 수 있습니다.할 일을 수정하거나 삭제할 수 있습니다.로컬 스토리지를 사용하여 할 일 목록을 브라우저에 저장하고, 페이지를 새로고침해도 데이터가 유지됩니다. 2024. 6. 16. [포트폴리오 페이지] 다음 과정 1. 반응형 디자인 구현모든 화면 크기에서 잘 작동하는 웹사이트를 만들기 위해 반응형 디자인을 구현하세요. 미디어 쿼리를 사용하여 다양한 화면 크기에서 웹사이트가 어떻게 보이는지 조정합니다.예시:styles.css (추가된 미디어 쿼리)@media (max-width: 768px) { nav ul li { display: block; margin: 1em 0; } #project-list { flex-direction: column; } .project { flex: 1 1 100%; }}2. 프로젝트 상세 페이지 추가각 프로젝트에 대한 상세 페이지를 추가하여 프로젝트의 구체적인 내용과 이미지를 포함할 수 있습니다.예시:새.. 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. 이전 1 2 3 다음 반응형