24년 09월 09일

챕터 04 화면 구현 시험당일.

시험 후기

우리 조는 숙박업소 예약 사이트를 주제로 잡고 진행했다.

 

그 중에서 내가 맡은 부분은 검색 버튼을 눌렀을 때 나오는 숙박업소 리스트가 나와있는 페이지를 맡았다.

처음에는 우리 조가 진행이 좀 다른조에 비해 더디다고 생각이 들었다.

아무래도 다른조는 4명에서 5명인 조도 있고 하지만 우리 조는 3명이기도 했고 이때까지 쳤던 내부평가들에 비해서 기간이 좀 긴편이기도 했어서 약간 여유롭다고 생각을 한것 같다.

 

그래서 끝까지 잘 완성할 수 있을까 걱정을 좀 하긴 했지만 먼저 나서서 시험에 대한 얘기를 좀 꺼내고 나니 조장님과 조원도 시험에 대해서 어떻게 진행할지 어떤 역할을 맡을 지 한번 말이 나오고 나니 계속 얘기를 하게 되었다.

 

---

그렇게 시작하게 된 페이지 HTML 코드 구현.

HTML , CSS , JS 의 수업을 들으면서 처음에는 많이 헷갈렸다.

HTML의 웹페이지 구조라던가 , CSS 의 선택자에 대한 부분이나 다양한 속성효과 지정 , JS의 많은 메서드와 문법들..

진짜 그때 당시에는 무슨 뜻인지도 몰라서 멍하니 선생님이 하는걸 보면서 코드를 따라 치기만 했던 것 같다. 하지만 포기하지 않고 집에 와서 천천히 자세하게 코드를 하나하나 주석을 달면서 이해해나가기 시작하니 조금씩 어떤 느낌인지 감을 잡으면서 내부평가 프로젝트도 진행을 할 수 있게 되었다.

그렇게 계속 공부해나가다 보니 전날밤까지 밤을 새긴 했지만 결국 나쁘지 않은 결과물이 나오게 됐다.

(물론 내 기준이다 ㅇㅇ)

header 부분

페이지 윗부분 header. 지역에 input text로 텍스트 기입을 할 수 있게 했다.

날짜 부분에 input date를 2줄로 사용해 입실날짜와 퇴실날짜를 고를 수 있게 했다.(지금 다시 보니 앞에 날짜 : 제목을 안붙였네;;)

인원 수 부분에 select 태그로 최대 5명까지 선택할 수 있게 했다.

google icon 을 사용해 검색버튼을 만들어 버튼을 누를 시 그에 맞는 숙박업소 목록으로 이동하게 만들었다.

 

 

header nav바 부분

 

내비게이션바에 hover 효과를 줘서 커서를 갔다 댔을 때 아래에 하위메뉴가 나오게 했다.

 

css 검사기 돌린 모습

 

CSS 검사기를 돌렸을 때 구조적으로 아무 문제가 없었는지 한번에 오류가 없다고 나왔다. 물론 좋은거긴 한데 오히려 내가 너무 대충 만들었나하는 생각이 들었었다.

 

main 페이지와 footer 부분

main 의 숙소 목록과 footer 부분. 예약하기 버튼을 누를 시 예약페이지로 넘어가게 하고 사진도 클릭할 수 있게 구현했다. footer 부분은 로고를 클릭할 시 메인페이지로 이동하게 했다.

 

 

html 코드 검사기 돌린 장면

html 코드 검사기를 돌린 장면인데 여기서도 딱히 큰 문제가 발견되지 않았다…

(좋아해야 하나.. 열심히 안했다고 자책해야 하나..)

---

웹페이지 자체에 많은 기능을 넣거나 디테일적인 디자인은 크게 신경쓰지 않고 만들어서 그렇게 어렵지는 않았다.

 

하지만 한가지 아쉬운 부분이 있다면 시험이 끝난 아직까지 내가 javascript의 문법이나 사용법을 제대로 이해하지 못해서 시험에는 전혀 사용하지 못했다는 점이다.

아마 js까지 사용했다면 더 멋지고 재밌는 기능을 많이 구현할 수 있었을텐데.. 시험평가에는 css까지만 사용하면 됐다지만 그래도 나한테는 약간의 아쉬움이 남는 시험이었다.

---

처음 시작부터 걱정이 많은 조별과제였지만 그래도 만족은 아니더라도 실망할만한 결과물은 나오지 않아서 나름 홀가분하다.

이제부터는 java 수업으로 넘어가게 될텐데 일단 지금은 앞으로만 나아가야 하는 시기이기 때문에 지난 아쉬움은 잠시 잊고 앞으로 배우게 될 내용들에 집중하고 공부하도록 하자. !!