1주차 과제는 주어진 기획서에 맞게 페이지를 만드는 것이었다. 단, html만을 이용해야 했다.
부트스트랩을 쓰면 금방 끝낼 수 있는 간단한 과제였기 때문에 나는 몇 가지 기능을 더 추가해서 만들기로 했다.
그래서 나온 결과물은 다음과 같다.
기획의도는 애플 공식 홈페이지를 따라 만들어보는 것이었다. 그래서 기획서에 없는 헤더를 추가해보았다.
각 메뉴를 클릭하면 각각의 페이지로 이동하도록 a태그를 이용하였다.
그리고 마우스를 올리면 하얀색으로 불이 들어오길래 그것 역시 구현하였다. 다만 애플로고와 오른쪽 검색과 장바구니는 불이 들어오지 않는다. 이미지를 따와서 그것을 만들기는 어려움이 있었다.
페이지를 좌우로 줄이면 중간의 메뉴가 왼쪽으로 이동하면서 햄버거 안으로 들어가고 애플 로고가 가운데로 이동하였는데 그것을 구현해보려고 했지만 생각처럼 잘 되지 않았다. 그리고 알바 때문에 시간도 부족해서 약간의 변형을 주었다. 내가 만든 페이지는 창을 줄이면 애플 로고가 가운데로 이동하도록 만들었다.
마지막으로 아래 글을 다 채우고 구매하기를 누르면 상품이 담겨진 장바구니가 뜨도록 만들었다.
추가한 기능을 정리하면 다음과 같다.
1)헤더(윗부분)를 넣어 꾸며보았습니다. a태그를 이용해 애플 공홈의 메뉴를 구현해보았습니다. 클릭시 각 메뉴로 이동합니다
2) 한글로 적여 있는 메뉴는 마우스를 올리면 하얀색으로 반응할 수 있도록 구현했다.
3) 화면 좌우 사이즈를 850이하로 줄이면 메뉴가 사라지고 애플 로고만 남도록 변경했다.
4) 이름과 수량 등을 작성하고 구매하면 장바구니로 이동하도록 만들었다.
아래는 과제를 시연한 영상이다.
좀 더 꾸밀 수 있었겠지만 이 이상 건드리면 주어진 기획서에서 벗어나기 때문에 여기서 멈추었다.
아쉬운 부분이 분명 있지만 만들면서 느낀 것은 여기까지 내가 만들 수 있다는 사실을 알게 되었다는 점이다. 전에는 영상에서 나온 코드를 따라쳐서 만들었다면 지금은 예시를 보면 검색하고 찾아서 비슷하게 구현할 수 있게 되었다. 그래서 이번 과제를 하면서 내심 뿌듯했던 것 같다.
