-
[부스트코스] 프로젝트 A-1. 나를 소개하는 홈페이지 만들기Front-end/부스트코스 : 웹 프로그래밍 2020. 2. 25. 20:01
https://www.edwith.org/boostcourse-web/project/4/content/3#summary
웹 프로그래밍 기초를 마치고 첫 프로젝트 주제는 '나를 소개하는 홈페이지 만들기'이다.
프로젝트 조건은 아래와 같다.
- index.html
- 상단 : 홈, 자기소개, 내사진, 몇시에요 라는 메뉴가 있음 (간격은 같아야 함)
- 모든 콘텐츠는 가운데 정렬
- 네모난 UI는 그림자 효과를 줌
- 링크 영역에 마우스를 올리면 커서모양이 손모양으로 바뀜
- 지도는 이미지 형태로 추가하기
- footer에 개인정보 추가하기
- aboutme.html
- 같은 수준의 태그는 같은 글자크기
- 세가지 영역으로 크게 나누고 각 영역의 높이는 같음
- photo.html
- 줄간격과 크기는 일관되고 동일하게
- 사진에는 테두리
- header와 footer 유지
- 현재 시간보기
- js나 html로 구현하지 않음
- 서블릿 클래스 이름 TodayServlet
- java.time.LocalDateTime 클래스 이용
- 서블릿 URL : http://localhost:8080/aboutme/today
- 디자인은 간단하게
- 메인화면으로 이동하는 버튼 제작
- 기술 요구사항 : 프론트엔드
- html layout tag 사용
- classname 일정한 컨벤션 유지
- 의미에 맞는 tag 사용 (div 자제)
- position, float 사용하기
- 부트스트랩 사용 X
- 다양한 selector 문법 활용하기
- 기술 요구사항 : 백엔드
- 톰캣서버를 통해 페이지 동작
- 서블릿 페이지를 생성해서 url을 입력했을 때 시간데이터가 화면에 노출되어야 함
아쉽게도 깃허브에 올릴 수가 없어서 로컬에만 저장하고 있어야겠다 .. ㅜㅜ
다 만들면 데모만 블로그에 올리겠음
제작하고 있는 페이지!!!!
'Front-end > 부스트코스 : 웹 프로그래밍' 카테고리의 다른 글
[부스트코스] 2. DB 연결 웹앱 : WEB UI 개발 (0) 2020.03.07 [부스트코스] 2. DB 연결 웹앱 : JavaScript (0) 2020.03.07 [부스트코스] 1. 웹 프로그래밍 기초 정리 (0) 2020.02.24 [부스트코스] 1. 웹 프로그래밍 기초 : Request, Response 객체 이해하기 (0) 2020.02.24 [부스트코스] 1. 웹 프로그래밍 기초 : Servlet 작성, 라이프싸이클 (0) 2020.02.19