본문 바로가기
반응형

분류 전체보기276

[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.
[포트폴리오 페이지] 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.
[포트폴리오 페이지] 2단계: About Me 섹션 추가 2단계: About Me 섹션 추가2.1 About Me 섹션 HTML 작성index.html 파일에서 About Me 섹션에 내용을 추가합니다.index.html (수정된 부분) About Me 안녕하세요! 저는 프론트엔드 개발자 홍길동입니다. 웹 개발에 열정을 가지고 있으며, 최신 기술을 배우고 활용하는 것을 좋아합니다. HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 사용자 친화적이고 반응형 웹사이트를 만드는 데 관심이 있습니다. 저는 다양한 프로젝트를 통해 문제 해결 능력을 키워왔으며, 팀워크와 커뮤니케이션 스킬을 중요하게 생각합니다. 앞으로 더 많은 경험을 쌓고, 더욱 성장하는 개발자가 되고자 합니다.2.2 About Me 섹션 스타일링styles.css 파일에.. 2024. 6. 16.
[포트폴리오 페이지] 1단계: 프로젝트 초기 설정 1단계: 프로젝트 초기 설정1.1 프로젝트 디렉토리 생성로컬 환경에서 프로젝트 디렉토리를 생성합니다.mkdir MyPortfoliocd MyPortfolio1.2 Git 초기화생성된 프로젝트 디렉토리에서 Git 저장소를 초기화합니다.git init1.3 기본 파일 생성프로젝트의 기본 파일을 생성합니다.touch index.html styles.css scripts.js README.md LICENSE1.4 README.md 작성README.md 파일을 작성하여 프로젝트 설명을 추가합니다. 다음 내용을 추가합니다. # MyPortfolioMyPortfolio는 HTML, CSS, JavaScript를 사용하여 만든 개인 포트폴리오 웹사이트입니다. 이 웹사이트는 나의 경력, 프로젝트, 연락처 정보를 포함하고.. 2024. 6. 16.
[기능별 페이지] lotto 상세 설명HTML (index.html) 🎱 Lotto Number Generator 🎱 Generate Numbers History Download History main 태그 내에 모든 요소가 포함되어 있습니다.div.generator-container 내에 로고, 버튼, 번호 표시 영역, 기록 표시 영역, 다운로드 버.. 2024. 6. 11.
[기능별 페이지] memory matching game2 HTML (index.html) Memory Matching Game Rows: Columns: Card Type: Letters Numbers Colors Min: Max: Apply Reset Game .. 2024. 6. 10.
반응형

티스토리툴바