2021. 10. 28. 16:14ㆍProject/Web
2020년 1학기 인터넷프로그래밍 강의에서 처음 html과 css를 배웠다.
한 학기를 마치면서 기말고사 과제로 웹 페이지 제작을 하게 되었는데, 그때 'Life Sentences' 를 떠올리게 되었다.
나는 가끔씩 '책을 읽고싶다!'는 느낌이 들 때가 있는데, 이런 느낌을 받을 때가 어느 때인지 생각해보았다.
지식을 채우고 싶은 욕구를 느낄 때, 위로 받고 싶을 때, 현실에서 벗어나서 소설 속 이야기에 집중하고 싶을 때, 나보다 먼저 길을 걸은 사람들에게 지혜를 얻고 싶을 때 등등 책을 읽으려는 목적은 다양했지만 사실 이 목적을 달성한 적은 많지 않다.
하지만 주변 사람들의 추천을 받거나, 리뷰를 보다가 꽂히는 한 문장을 보고 고른 책은 대체로 내가 원하는 부분들을 충족시켜주었다.
그래서 책의 표지나 제목 말고 책에서 가장 와닿은 한 문장들을 보고 책을 고르면 어떨까 하는 생각에서 'Life Sentences' 라는 페이지를 만들게 되었다.
html과 css를 처음 배우면서 만든 웹 페이지기 때문에 구조적으로 체계화되어 있지 않지만
지금도 좋은 아이디어라고 생각해서 jsp와 자바스크립트를 공부하면서 이 페이지를 발전시켜 보려고 한다.
페이지의 전체적인 이미지들은 내가 좋아하는 잡지인 'LIFE' 사의 사진들을 이용하였다.
1. 시작 페이지
첫 화면은 심플하게 페이지의 이름만 표시했다. 내가 좋아하는 노란색으로 컨셉컬러를 정했다!
위로 스크롤 하면 다음 페이지가 나온다.
2. 메인 페이지
메인 페이지는 오늘의 문장, 이 주의 문장, 이 달의 문장, 그리고 베스트 문장 카테고리로 나누었다.
각 글씨들을 누르면 페이지로 이동한다.
글씨체, 글씨 굵기, 글씨 크기, 기울기 등을 랜덤하게 지정하면 좋을 것 같다는 아이디어가 나왔는데 적용해보진 못했다.
3. 세부 페이지
3월에 캡처해놓은 사진이라 3월의 문장들이다.
각 문장을 보고 마음에 드는 문장을 클릭하면 해당 책의 페이지로 넘어간다.
문장을 누르면 이동하는 책 정보 페이지.
기말과제 제출이 급해서 레이아웃에 대한 고민을 해보지 못한 것이 아쉽다.
이후에는 책 세부 페이지에 좀 신경을 써봐야겠다.
https://haaaein.github.io/LifeSentences/
Life sentences
Life Sentences
haaaein.github.io
깃헙 링크. 웹에서 봐야한다.
코드를 수정하는 것 보다는 아예 새로 만드는게 나을 것 같다는 생각이 든다 ... 🤯🤓