1. 웹사이트를 만들게 된 동기는 ??
현재 군대를 다니면서 군대에서 주관하는 sw 억량 강화 교육을 통해 elice라는 기업과 협업하여 웹프로그래밍 커리큘럼을 만들어 놓은 좋은 강의를 듣게 되었다. 이를 계기로 원래 웹 프로그램에 관심이 많았던 나로써는 좋은 기회라고 생각하고 웹 프로그램에 필요한 언어인 HTML, CSS ,JAVACRIPT를 기반으로 강의를 배우게 되었다. 그리고 이 강의를 들으면서 한번 강의에서 배운 웹사이트를 기초 내용을 통해 TWOSOMEPLACE 웹사이트를 만들어보는게 어떨까라는 생각이 들어 내가 현재 배운 내용을 최대한 이용할 수 있도록 최소한의 웹사이트를 만들어 보게 되었다.(물론 투썸 플레이스의 웹사이트를 똑같이 다 구현하지는 못하였고 어느정도 표현할 수 있을 정도로만 구현하였다.)
2. 웹사이트 소개
(1) 네비게이션 바 & Slider
위의 사진을 보면 먼저 투썸 플레이스의 네비게이션 바를 만들었는데 상단 좌측에는 투썸플레이스의 로고를 나타나내는 글자를 넣어 놓았고, 상단 우측에는 "메뉴 스토리", "에이리스트", "브랜드 서포트"로 마우스로 이 글자들을 클릭 했을때 해당 내용으로 부드럽게 자동 스크롤이 되도록 기능을 넣어 놓았다.
그리고 네비게이션 바 밑에 슬라이더를 구현하여 시간이 지날때 마다 다른 사진으로 넘어가는 슬라이들을 구성하여 주로 투썸 플레이스의 광고 및 홍보를 나타날때 사용되는 슬라이더들으 사용하였다.
(2) Menu Story (본문)
위의 네비게이션 바에 있던 메뉴 스토리에 관한 내용으로 각 메뉴를 카테고리 별로 나누어 나타내 커피 스토리, 디저트 스토리, 델리 스토리로 각 메뉴의 스토리를 담은 내용을 자세히 알려주는 내용을 담고 있다. 여기서 기능은 각 카테고리별로 마우스로 클릭을 할 경우 스토리별로 따로 내용이 나오는 기능을 사용 하도록 하였다.
(3) A List (본문)
A List는 투썸플레이스에서 출시된 스틱 커피들을 종류별로 상세히 알려주는 페이지로 각 사진을 첨부하여 기존의 네모난 사진을 대비해 둥근 사진을 CSS로 만들어 보는게 좋을것 같아서 사진을 위로 첨부하고 밑에 자세히 그 상품을 소개하는 글을 표시하였다.
(4) Brand Support
Brand Support 부분에는 투썸 플레이스의 브랜드 가치를 만들어내는 전문 육성 센터를 소개하는 곳을 나타낸 곳으로 각 센터의 사진을 넣어 아래의 화살표를 클릭하여 각 사진을 볼 수 있도록 하게 하였다.
(5) footer
=> 가장 하단에 들어가는 정보 표기
3. 웹사이트를 만들게 되면서 겪은 오류점 & 수정해야했던 점
(1) 오류점
1.Menu Stroy Tab 부분에 카테고리 별로 탭을 클릭하면 해당 카테로리로 넘어가지지 않은 오류점이 발견됨.
// 3) Tabs var links = document.querySelectorAll(".tabs-list li a") var items = document.querySelectorAll(".tabs-list li") for (var i = 0; i < links.length; i++) { links[i].onclick = function(e) { // 자바스트립트 탭 부분에 links[i]=>item으로 바꿨음.. e.preventDefault(); } } for (var i = 0; i < items.length; i++) { items[i].onclick = function() { var tabId = this.querySelector("a").getAttribute("href"); console.log(this.classList); document.querySelectorAll(".tabs-list li, .tabs div.tab").forEach(function(item) { item.classList.remove("active"); console.log(item); }); document.querySelector(tabId).classList.add("active"); this.classList.add("active"); } }
=>알고 보니 자바스트립트 탭 부분에 for문의 지정자를 잘못 지정했었다(하하..)
2.Brand Surrpot 부분에 사진이 첨부되지 않았음.
=>CSS 부분에 해당 사진의 url을 제대로 첨부하지 않아서 일어난 일이었다 . ㅠㅠ
(2) 수정해야 했던 점
(1) .Slide 부분에 각 슬라이들의 사진들의 크기들을 동일하게 맞추거나 CSS에 미리 적용한 크기에 맞게 사진을 수정하거나 찾아 봐야했었다.
4. 최종 결과물
https://replit.com/@cow2533/Distruction-of-Web-Page#index.js
5. 느낌점 & 앞으로의 다짐..!!!
처음에는 HTML과 CSS ,자바스크립트를 배우고 나서 각각의 툴을 활용하여 배운 내용을 쉽게 써먹고 실습하여 이론의 내용을 더 재밌게 활용하고 실력이 조금 늘어난것 같았다. 그리고 처음에는 내가 만들수 있는 간단한 웹사이트를 만들보자라는 동기를 가지고 웹사이트를 만들었지만, 만들고서는 뭔가 더 복잡하고 상품에 대해 자세히 소개하고 구매할 수 있도록 유도하는 웹사이트를 만들고 싶다는 생각이 계속 들게 되었고, 이 사이트를 더 완성형 단계로 만들어가도록 공부해야겠다고 다짐하였다. 앞으로는 이제 웹을 더 파고 들어 내부 동작이 어떻게 작동하는지도 공부할 계획이다.
