웹페이지저작기초 웹 페이지 만들기

HTML, CSS, BOOTSTRAP를 이용한 웹페이지 만들기

제작: 2023.5.30 ~ 2023.6.16

깃허브 링크: https://github.com/HJ2828/web-ShareYou

피그마 링크: https://www.figma.com/file/hqKFPFJkY22gEBYmUdqwDz/%EC%9B%B9%EC%A0%80%EA%B8%B0ver3?type=design&node-id=0%3A1&mode=design&t=wB35iTjuCLj77OcN-1 

---

웹링크: https://hj2828.github.io/web-ShareYou/

 

셰어유(셰어U, Share You): 플로깅을 통해 환경 보호를 실천할 수 있도록 하는 사이트
플로깅 모임을 만들어 공유하고, 커뮤니티를 통해 플로깅 외 환경 정보를 공유할 수 있다.

 

1. index.html
   : 첫 메인 페이지 (네비게이션바 로고 이미지)
2. introduction.html
   : 네비게이션바 - 플로깅이란?
3. meeting.html
   : 네비게이션 - 함께해요
   + index.html에서 한강 버튼, '이번주 인기 플로깅 모임 >>', '상시 모집! 플로깅 모임 >>' 누르면 해당 페이지 이동 가능
   + plogging.html에서 목록 버튼 누르면 해당 페이지 이동 가능
4. community.html
   : 네비게이션 - 커뮤니티
5. plogging.html
   : index.html과 meeting.html에 있는 '토요일 오전 9시 뚝섬 플로깅 모집합니다~' 카드 글 누르면 해당 페이지 이동 가능

 

 

기획서

 

 

후기

만들고 큰 화면에서 보니 이상한 부분이 있었다.

내 컴퓨터에서 만든 것만 보다가 다른 화면으로 보니 다르다는 것을 깨달을 수 있었다.

부트스트랩을 사용해서 편리했지만, 부트스트랩의 class 이름을 알아야해서 어려운 부분도 있었다.

무엇보다도 내가 원하는 위치에 정확하게 두는 것이 어려웠다.

나름 figma에서 디자인한대로 만들려고 노력을 했다.