My web site : happy new year
이 프로젝트는 제가 처음으로 제작해본 사이트 입니다. 2021년을 맞아 새해기념으로 이 웹사이트를 제작했습니다. 처음 접해보는 HTML, CSS, JavaScript를 이용해 제작했고 이미지를 디자인해주는 제 친구와 함께 진행했습니다. 새해를 맞아 인기있을 사이트가 뭐가 있을까 생각해보다가 재미로 신년 운세를 보여주는 웹 사이트를 제작해봐야겠다고 결심하여 제작에 들어갔습니다. 생각 보다 힘든 점이 한둘이 아니었고, 디자인 또한 문제였습니다. 그래서 디자인이 가능한 친구 한명을 구해 같이 만들어 나갔습니다.
- 책이미지 상단에 페이지를 클릭하면 운세가 나타나는 방식으로 만들었으며 이 과정에서 :hover에 대해 알게되었습니다.
- ajax에 fetch기능을 이용해 클릭에 따라 선택된 박스를 다르게 변화시켜 여러가지 페이지들이 랜덤으로 나타나게 구성되어있습니다.
- 웹사이트 만드는 과정에 있어서 웹사이트를 어디서 보느냐에 따라 달라짐을 알게 되었고 변화하는 크기에 따라 해당 사이트 구성도 조금씩 변화하도록 반응형으로 제작했습니다.
- 카카오와 페이스북, 네이버로부터 공유하기 기능을 이용하는 방법을 공부하여 해당 버튼을 구성했습니다.
- 카카오 애드핏, 쿠팡 파트너스와 같은 광고를 추가하는 등 여러가지 기능들을 익혔습니다.
- meta요소가 페이지 관련 정보를 담고 있으며 검색 로봇이 이를 이용하여 페이지를 띄워줌을 알고 meta태그를 추가했으며 이러한 meta요소가 공유하기 기능에서도 이용된다는 사실을 알았습니다.
- 카카오 애드핏, 쿠팡 파트너스의 광고 배너들을 어느 device에서 보느냐에 따라 배너의 크기를 조절했습니다.
- 선택시 나오는 이미지를 선택되었을때 받아올 경우 시간이 오래걸려 페이지 로드가 끝난 후 이미지를 미리 로드할 수 있도록 구현 했습니다.
- 구글이나 네이버에서 검색될 수 있도록 meta tag들과 robots.txt, sitemap.xml 파일을 추가 했습니다.
