본문 바로가기
반응형

전체 글170

[개인 프로필 사이트] 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.
[Javascript] 밤하늘의 별 이펙트 만들기 Intro 어느 날 포트폴리오 웹페이지를 만들다 문득 별이 빛나는 듯한 이펙트를 추가하고 싶다는 생각이 들었습니다. 그래서 인터넷을 찾아보다 좋은 튜토리얼을 발견하여 조금 수정해서 적용해봤습니다. 적용 후 결과가 상당히 마음에 들어서 이번 시간엔 밤하늘의 별 이펙트 를 추가하는 방법에 대해 포스팅하도록 하겠습니다. 코드는 아래의 링크를 참고하여 작성했습니다. http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/ HTML5 Canvas Particle Animation Learn how to make a beautiful HTML5 canvas particle animation system of glowing stars and a .. 2021. 6. 4.
[개인 프로필 사이트] 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.
[HTML] Lottie Web Player를 사용하여 움직이는 이미지 출력 Intro 웹사이트를 개발하다 보면 이미지를 추가해야 할 일이 정말 많습니다. 하지만 막상 이미지를 추가하면 뭔가 허전하고, 이미지가 움직였으면 좋겠다 라는 생각이 들 때가 있습니다. 이럴 땐 Lottie Web Player를 사용하여 손쉽게 움직이는 이미지를 추가할 수 있습니다. 이번 시간엔 Lottie Web Player를 사용하는 방법에 대해 포스팅 하도록 하겠습니다. Lottie란? - 하단의 페이지를 참고하여 작성하였습니다. - https://lottiefiles.com/what-is-lottie What is a Lottie animation? - LottieFiles A Lottie is a JSON-based animation file format that enables designers .. 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.
반응형

티스토리툴바