이 글은 부트스코스-웹프로그래밍(풀스택) BE_PJT A-1 프로젝트에 관한 내용입니다.

(1) index.html, index.css

head 태그 안에서 index.css를 연결하였고 title은 JIHYE's First Boostcourse 로 지정하였습니다.

메뉴는 header 태그를 사용하였습니다.

li 태그를 사용한 것들은 margin-left값을 주어 간격을 같게 하였습니다.
li 태그 안에 a 태그를 쓰면 글자 위에서만 마우스 커서 모양이 손모양으로 바뀌었습니다.
때문에 a 태그 안에 li 태그를 써서 css에서 설정한 모양 위로 마우스를 올렸을때 커서모양이 손모양으로 변경되게 하였습니다.

본문은 section 태그를 사용하였습니다.

본문에 '자기소개'와 '내 사진' 버튼은 옆으로 배치하기 위하여 span 태그를 이용하였고 지도는 이미지 형태로 추가하였습니다.

하단에는 footer 태그를 사용하였습니다.

그림자 효과를 넣어주는 코드는 box-shadow로 요소에서 수평수직 거리(오프셋), 흐릿함과 확산 정도, 색상으로 이루어집니다.
요소:hover를 이용하여 마우스를 요소에 올렸을 때 색이 어두워지도록 설정하였습니다.

글을 중앙에 배치하는 법은 text-align: center; / line-height: 각 요소의 높이; 로 맞춰주었습니다.

%는 부모 요소 길이의 몇 %를 차지할 것인지를 나타내기 때문에 먼저 부모 요소의 길이가 설정이 되어있어야 합니다.
따라서 html과 body 태그를 width: 100%, height: 100%로 지정해줍니다.
그런데 이렇게만 하면 스크롤이 생기는데 margin과 padding값이 default값으로 지정되어있기 때문인데, 이것을 없애기 위해서는 margin: 0;, padding: 0;을 추가해주면 됩니다.

(2) aboutme.html, aboutme.css

padding, margin값으로 세 가지 영역간의 간격(높이)를 맞춰주었습니다.

h1 태그를 이용하여 각 분단을 나누었으며, index.html과 같이 header, section, footer태그의 높이를 지정하였습니다.

(3) photo.html, photo.css

사진들의 width값을 %로 맞추어 넓이가 같도록 하였고 창의 크기를 줄이거나 키워도 영역을 넘어서지 않게 설정하였으며, border값으로 테두리를 지정하였습니다.

각 사진의 글들은 article 태그를 이용하였으며, 본문을 나누는 줄은 요소:nth-child(n)으로 border-bottom을 이용하였습니다.

index.html과 같이 header, section, footer의 높이를 지정하였습니다.

section 태그에 padding값을 주어 본문을 나누는 줄(border-bottom)을 양 옆으로 붙지 않고 떨어져 있도록 설정하였습니다.

(4) TodayServlet

어노테이션으로 @WebServlet이라는 것이 만들어져 있는데, 그 괄호 안에 ("/aboutme/today")을 써 넣음으로써 http://localhost:8080/aboutme/today 로 연결되게 설정하였습니다.

현재시간을 나타내는 방법으로는 Date객체를 활용하는 방법을 사용하였습니다.

메인화면을 선택하면 index.html로 돌아가게 설정하였습니다.

(5) 문제 상황

현재시간을 나타내는 화면으로 넘어가기 위하여 코드를 변경하였는데, 서버로 RUN 하였을때 코드가 바뀌지 않은 모습을 관찰하였습니다.

문제 화면에서 F12버튼을 누르고 새로고침 버튼인 F5버튼을 누르니 코드가 변경되었습니다.

조그만 코드의 변경은 프로그램이 알아차리지 못하고 적용시켜주지 않는다는 것을 알게 되었습니다.