반응형 Projects/개인 프로필 사이트9 9. 프로젝트 종료 보호되어 있는 글 입니다. 2021. 6. 23. [개인 프로필 사이트] 8. 피드백 페이지 작성 및 기능 구현 Intro 하위 3개 페이지 중 마지막인 피드백 페이지를 작성할 차례다. 마감일이 이틀밖에 남지 않아 기본적인 게시판 기능밖에 구현하지 못했다. 게시판 기능은 Web SQL을 사용하여 구현했다. Web SQL 특성상 로컬에 저장되는 DB이기 때문에, 한 PC에서 작업한 결과를 다른 PC에서 볼 수 없다. 하지만 DB 사용과 게시판 기능 구현 그 자체가 목적이기 때문에, 감안하고 넘어가기로 했다. 코드는 아래의 링크를 참조했다. https://github.com/liokingim/html5canvas/blob/master/sqliteboard.html liokingim/html5canvas Contribute to liokingim/html5canvas development by creating an ac.. 2021. 6. 16. [개인 프로필 사이트] 7. 취미 페이지 작성 및 기능 구현 Intro 하위 3개 페이지 중 2번째 페이지인 취미 페이지를 작성할 차례이다. 내가 해본 게임들을 카테고리별로 나눠서 나열하였다. 담는 내용이 그리 많지 않은 만큼 UI도 단순하다. 완성된 UI는 다음과 같다. 모든 코드는 github에 업로드해두었습니다. 아래의 링크를 클릭하여 소스코드를 보실 수 있습니다. https://github.com/DevJaewoo/DevJaewoo.github.io DevJaewoo/DevJaewoo.github.io Contribute to DevJaewoo/DevJaewoo.github.io development by creating an account on GitHub. github.com 취미 페이지 기능 구현 페이지를 만들며 추가/수정한 사항이다. 게임 이미지를 .. 2021. 6. 15. [개인 프로필 사이트] 6. 포트폴리오 페이지 기능 구현 Intro 이전 포스트에선 각 영역의 구조만 잡았다. 이제 추가/수정해야 할 사항은 다음과 같다. 배경 이미지 로딩 속도로 인한 화면 잘림 메뉴 클릭 시 해당 영역으로 이동 보고있는 영역에 해당하는 메뉴 강조 기술 막대 애니메이션 프로젝트 탭 변경 시 관련된 프로젝트만 보여주기 모든 코드는 github에 업로드 해두었습니다. 아래의 링크를 클릭하여 소스코드를 보실 수 있습니다. https://github.com/DevJaewoo/DevJaewoo.github.io DevJaewoo/DevJaewoo.github.io Contribute to DevJaewoo/DevJaewoo.github.io development by creating an account on GitHub. github.com 배경 로딩.. 2021. 6. 15. [개인 프로필 사이트] 5. 포트폴리오 페이지 작성 Intro 하위 3개의 페이지 중 첫 번째인 포트폴리오 페이지를 작성할 차례이다. UI는 이전에 설계한 그대로 진행하되, 세부적인 UI는 좋은 아이디어가 떠오를 때마다 수정할 예정이다. 2. 프로젝트 기획 프로젝트 기획 저번 시간에 프로젝트 주제와 세부 테마를 정하고, 참고할 만한 사이트들을 찾아봤었다. 이번엔 메인 페이지와 각 세부 테마가 포함할 내용을 정하는 시간을 갖겠다. 메인 페이지 devjaewoo.tistory.com 모든 코드는 github에 업로드 해두었습니다. 아래의 링크를 클릭하여 소스코드를 보실 수 있습니다. https://github.com/DevJaewoo/DevJaewoo.github.io DevJaewoo/DevJaewoo.github.io Contribute to DevJae.. 2021. 6. 2. [개인 프로필 사이트] 4. 허브 페이지 기능 구현 Intro 허브 페이지를 만든 이후 여러 환경에서 테스트 해본 결과 크게 2가지의 문제점이 발견됐다. 모바일 화면에서 화면이 제대로 보여지지 않는다. 화면에 3개의 섹션과 메뉴 버튼 뿐이라 페이지가 너무 허전해보인다. 이 문제들은 다음과 같은 방법으로 해결할 수 있다. 모바일과 같은 세로형 화면에선 다른 UI를 보여주도록 media 쿼리를 추가한다. UI 이미지 또는 배치를 수정한다. 우선 첫번째 문제부터 해결해 보자. 모든 코드는 github에 업로드 해두었습니다. 아래의 링크를 클릭하여 소스코드를 보실 수 있습니다. https://github.com/DevJaewoo/DevJaewoo.github.io DevJaewoo/DevJaewoo.github.io Contribute to DevJaewoo/D.. 2021. 6. 2. [개인 프로필 사이트] 3. 허브 페이지 작성 Intro 이 프로젝트의 첫 페이지인 허브 페이지를 개발할 차례다. 프로젝트의 UI는 저번에 정한 그대로 개발할 예정이다. 2. 프로젝트 기획 프로젝트 기획 저번 시간에 프로젝트 주제와 세부 테마를 정하고, 참고할 만한 사이트들을 찾아봤었다. 이번엔 메인 페이지와 각 세부 테마가 포함할 내용을 정하는 시간을 갖겠다. 메인 페이지 devjaewoo.tistory.com 모든 코드는 Github에 업로드 해두었습니다. 아래의 링크를 클릭하여 소스코드를 보실 수 있습니다. https://github.com/DevJaewoo/DevJaewoo.github.io DevJaewoo/DevJaewoo.github.io Contribute to DevJaewoo/DevJaewoo.github.io development.. 2021. 6. 1. [개인 프로필 사이트] 2. 프로젝트 기획 Intro 저번 시간에 프로젝트 주제와 세부 테마를 정하고, 참고할 만한 사이트들을 찾아봤었다. 이번엔 메인 페이지와 각 세부 테마가 포함할 내용을 정하는 시간을 갖겠다. 메인 페이지 메인 페이지는 각 세부 테마에 해당하는 섹션을 선택하여 클릭 시 페이지를 이동시켜주는 일종의 허브 역할을 하도록 할 생각이다. 페이지 UI 구조는 아래의 링크를 참고할 예정이다. https://webstoryboy.github.io/portfolio/port2/ Portfolio Site PORTFOLIO UX.UI Design · Web Publishing · Product Design · Other webstoryboy.github.io 기본적인 UI 구성은 같고, 가운데의 이미지와 텍스트, 메뉴 구성 등을 변경하여 개.. 2021. 6. 1. [개인 프로필 사이트] 1. 프로젝트 준비 Intro 이번 학기에 웹프로그래밍 강의를 듣게 되었다. 3개월이라는 시간동안 HTML, CSS, Javascript의 기초적인 사용법에 대해 배웠고, 배운 내용을 토대로 과제를 진행하게 되었다. 과제는 "나를 표현하는 미니 홈페이지 설계" 이며, 3가지 이상의 세부 테마로 구성해야 한다. 또한 5페이지 이상 설계했는지, 콘텐츠 구성과 페이지 구조가 주제에 적합한지, 게시판과 DB를 사용했는지에 따라 추가 점수가 부여된다. 기한이 2주일밖에 남지 않았기에 서둘러 프로젝트 주제를 정해야 한다. 프로젝트 주제 선정 이번 프로젝트의 주제를 "개인 프로필 사이트"로 정했다. 세부 테마는 각각 포트폴리오, 취미, 개인 프로젝트 및 피드백으로 할 예정이다. 피드백 페이지에서 댓글 기능을 추가하여 게시판, DB를 사.. 2021. 5. 31. 이전 1 다음 반응형
