나공탐 제작 1일차(23.5.20)

제작 계기 : 글쎄다... 그냥 지금까지 배운 기능을 모두 구현할 수 있는 웹페이지를 고민했는데 딱 떠오르는 데 사용자 맞춤형 공부 방식 추천 서비스 였음

 

1일차 진행 상황 (2023.5.20)

- 간단한 프로토타입을 그려보며, 웹 페이지의 구조와 어떤 기능에 어떤 태그를 적용할 건지 대략적으로 구상해보았음

- 각 웹페이지 구조화

- style.css 파일을 만들어서 html 로 불러올 수 있도록 함. 

- 가장 처음 화면에 간단한 소개 부분을 애니메이션으로 구현

- 나공탐에 대한 간략한 정보를 채팅 형식으로 제작함.

- 앵커를 통해 사용자가 원하는 정보를 볼 수 있도록 하였음.

- being creater AI 를 이용하여 내가 원하는 사진 추출하기

 

새롭게 배운 지식

- 애니메이션 기능

- 폰트 다운해서 style.css로 불러오기

 

문제점

- 창 크기에 따라 화면 밀림 현상 > 고정 위치로 해결해야할 것 같은데 막막하다.

 

메인 화면에서 해야할 점

- 채팅 부분 옆에 로봇 사진 넣기.

- 정보 부분 한 화면을 어떻게 담을지 생각해 보기.

- nav 부분 target으로 다른 링크 연결하기

- 처음 소개 부분 글씨 색상 넣어서 꾸미기

* 각 항목 별로 프로토타입 그리기

 

느낀점

만만치 않다는 것을 느낌. 여기까지 하는 데 5시간 정도 걸렸음. 그래도 지금까지 내가 배운 내용으로 내가 구현하고 싶은 기능들을 구현할 수 있다는 것이 너무 뿌듯하게 느껴지고, 더더욱 매달려서 제작하고 싶다는 욕구가 듦. 

 

 

오늘 구현한 부분