* 메인 페이지 <홈 페이지 시작.html>
-메뉴바 : 다른 상세 페이지로 넘어갈 수 있게 해주는 배너이다.
1. 로고 이미지를 클릭하면 메인 페이지로 돌아갈 수가 있다.
2. story : 맥도날드만의 약속 && 맥도날드의 시작 두 페이지로 이동할 수 있으며 회사의 대한 설명들을 볼 수 있다.
3. menu : 이 가게가 판매하고 있는 메뉴들을 음료, 버거, 스낵, 맥모닝으로 따로 분류하여 볼 수 가 있다.
4. what’s new : 신메뉴의 대한 설명 && 다음 신메뉴의 대한 고객의견 반영을 위한 투표
5.order : 클릭하면 음식을 배달시킬 수 있게 배달 사이트를 연결해 주었다.
--------------------------------------------------------------------------------------------------------------------------------
메뉴 base : 에 위치한 이름들은 li로 정리하고 inline-block처리하여 옆으로 한 줄로 나열함.
드롭다운 : 평소에는 display:none을 하다가 :hover를 하면 마우스가 올라간 곳만 display:block으로 바뀌어 나타난다.
-왼쪽 이미지 : 이미지가 3초만에 바뀌면서 가게의 이벤트광고들을 볼 수 가 있다.
자바스크립트를 이용했다. files라는 배열에 이미지 파일이 img태그에 하나씩 들어간다.
이는 3초마다 init()라는 함수가 setTimeout()로 인하여 무한 반복되며 이루어진다.
-오른쪽 이미지 : 고정된 배경 이미지로 가장 중요한 이벤트광고를 실어 놓았다.
Background-img를 사용하였다.
-광고 : 오른쪽 이미지의 관련된 광고 동영상이며 페이지가 시작될 때 자동으로 플레이 된다.
Fixed를 이용해 맨 아래에 스크롤바를 움직여도 고정되게 하였다.
- 홈페이지 설명 : 스크롤 바를 내리면 맨 아래에 위치하고 홈페이지의 상세 설명을 볼 수 있다.
Pre로 원하는 모양 틀로 잡고 div로 묶어서 absolute를 이용해 위치를 맨 아래 고정.
---------------------------------------------------------------------------------------------------------------------------------
* story<맥도날드의 시작.html>
이 가게를 설립한 사람의 대한 설명 + 가게의 역사
인물 : 인물의 사람의 사진과 이름,년도는 <figure>태그를 사용하였다. 인문의 대한 설명은 <p>태그로 묶어서 display:inline-block를 이용해 사진 바로 옆에 배치시켰다. 또 그가 남길 말을 강조하기위해서 css파일에서 color를 이용하여 글자색을 바꾸었다.
역사 : 모두 <ul>와 <li>태그로 나열하였고 이중 <ul> 태그를 사용하였다.
-----------------------------------------------------------------------------------------------------------------------------------
* story<맥도날드만의 약속.html>
1.
<select>태그의 <option> value에 각 이동할 html파일을 작성하였다. 이 페이지들은 onchange="window.open(value,'right')"를 통해 연결된 right를 통해 iframe에 띄어 지게 될 것이다.
2. 화살표 이미지를 통해 select를 이용할 수 있게 강조하였다.
이 화살표는 애니메이션 기능이 사용되어 무한대로 5초동안 위 아래로 움직인다.
3.iframe
-사회공헌
이 가게가 사회에 기부하고 공헌한 내용들을 설명한다. 또한 증거자료로 여러 사진들을 볼 수 있게 배치하였다.
onclick리스너가 해당 button id에 일어나면 거기에 맞는 이미지와 설명이 뜨게 하였다.
-환경이야기
이 세계를 대표하는 햄버거 브랜드로써 환경은 의무로써 생각되어야 하며 또 이 브랜드가 얼마나 생각하고 있는지 설명해주는 페이지이다. 3개의 이미지에 마우스를 올리면 해당 설명이 출력된다.
onmouseover리스너를 사용해 그 이미지에 해당하는 id가 target을 받으면 저장해 두었던 배열에 내용이 innerHRML로 출력되게 하였다.
-약속
이 가게는 음식점으로써 음식에 대한 신념과 음식을 어떻게 다룰지를 설명해주는 페이지이다. 품질, 청결, 서비스, 가치 카테고리로 나누어 해당 설명은 클릭하면 볼 수 있게 하였다.
<details>태그를 사용해 해당 제목을 클릭하면 상세 내용과 이미지가 출력되도록 하였다.
--------------------------------------------------------------------------------------------------------------------------------
* menu<버거.html>
-메뉴판 : 가게에서 판매 중인 메뉴들은 나열한 판으로 클릭하면 옆 iframe에서 자세한 내용을 볼 수 있다.
<table>태그를 사용했으며 iframe에 내용을 띄우기 위해 <a>로 링크를 걸어주었다.
-메뉴 설명 : 메뉴판을 클릭하면 해당 버거의 상세내용을 알려준다.
<iframe>의 name right와 연관된 링크들이 띄어진다.
- 하단 알림(하늘색) : 세트가 가능함을 알리는 문구이다.
유니코드를 사용함으로써 참고사항임을 알려주었다.
- 상단 알림(하늘색) : 배달 주문을 유도하는 고객의 시각을 사로잡기 위해 깜빡인다.
Animation을 사용했으며 시간마다 option을 사용하여 글씨가 없어지고 사라지고를 반복하게 하였다.
-------------------------------------------------------------------------------------------------------------------------
* menu<스낵.html>
메뉴판 : 다른 메뉴판과 다르게 메뉴들의 카테고리가 나눠진다. 노란색 박스와 같이 사이드, 맥너겟, 치킨 텐더로 나누어지며 마우스를 올리면 위 사진과 같이 분홍색 박스(빨간색 동그라미)로 고객들에게 추천하는 문구가 띄어 진다.
<th id="d1" colspan="3" >사이드</th>를 사용해서 한 줄을 통합하여 제목을 만듬.
-메뉴설명박스(빨간색 동그라미) : 노란색 박스에 마우스를 올리면 띄어 지는 박스로 스낵 메뉴를 어떻게 먹으면 좋을지 고객들에게 알려주는 문구가 띄어진다.
1.onmouseover 와 onmouseout 리스너를 이용해서 해당 함수가 열리게 만든다.
2. e.target.id를 이용해서 해당 id가 타겟을 받는다.
3. e.clientX 와 e.clientY를 이용해서 박스가 띄어지는 위치가 마우스 위에 오도록 조정한다.
4. onmouseover리스너가 발생하면 visibility = hidden 으로 박스가 사라진다.
- 메뉴 설명 : 메뉴판을 클릭하면 해당 버거의 상세내용을 알려준다.
* menu<버거.html>와 설명이 동일하다.
-하단 알림 : 메뉴설명박스가 띄어진다는 것을 고객들에게 알려준다.
* menu<버거.html>와 설명이 동일하다.
---------------------------------------------------------------------------------------------------------------------
*menu<음료.html>
- 배경 : 다른 페이지와 다르게 음료의 상큼함을 강조하기위해 배경을 이미지를 사용했다.
Background- img 사용
-이미지 베너 : 이번에 나온 가게의 야심작을 설명해주는 광고임으로 눈에 띄게 메뉴판 위에 크게
달았다.
<input type=”radio”>를 사용하고 각각 value에 이미지를 저장하였다. onlick리스너를 달아주어 해당 칸을 클릭하면 <img src>에 value에 저장된 이미지 링크가 연결되게 하였다.
-투표 : 음료의 맛의 대한 고객의 소리를 듣기위해 투표 부분을 만들었다. 해당 맛을 체크하면 이미지가 같이 뜨게 만들었고 버튼을 누르면 투표가 완료되었다는 알림이 뜬다.
onclick리스너를 달아 해당함수에서 alert()문구가 뜨게 만들었다.
-메뉴판 &iframe: 음료사이트에서 다른 점은 신메뉴를 클릭하여 위 광고 베너로 이동한다는 것이다.
앵커를 사용하여Img id=”seaon” 과 메뉴 판 신 메뉴<a>태그에 href="#season"으로 연결시켰다.
---------------------------------------------------------------------------------------------------------------------------------
*what’s new<what’s new.html>
-img배너 : 최근에 나온 신 메뉴 광고 베너를 맨 위에 달아 주었다.
<img>태그 사용
- 신 메뉴 설명 + 이미지 : 이번 신 메뉴가 어떤 의미로 나왔는지의 대한 설명과 이미지를 달아주었다. 또한 다음 신 메뉴의 대한 설명도 포함.
글씨는 <p>태그로 묶어 text-align을 center로 맞춰주었다. 또한 text-shadow를 사용하여 글씨를
화려하게 만들어주었다. <img>들은 table을 사용해서 정렬해서 깔끔하게 정리하였다.
-투표 바로가기 : 다음 신 메뉴에 고객들의 의견을 반영하기위한 투표 링크를 달아주었다.
투표 링크는 position을 fixed로 설정해서 스크롤 바를 어디로 이동하든지 간에 투표 링크를 클릭할 수 있도록 설정하였다.
----------------------------------------------------------------------------------------------------------------------------------
*세계의 맛 투표 바로가기<투표.html>
1. 투표 설명 : 투표를 하는 이유를 설명.
2. input type=”radio”: 다음 신메뉴를 이미지와 함께 띄어 한가지를 선택할 수 있게 하였다.
3. input type=”tel” : 투표해준 사람을 추천을 통해 선물을 전달하기위해 전화번호를 입력할 수 있게 하는 박스이다.
해당 타입이 focus를 받으면 배경과 글씨색이 변하게하였다.
4. button : 투표를 완료시키는 버튼으로 누르면 창이 저절로 닫힌다.
자바스크립트를 이용해 alert()문구로 완료 문구를 띄어주고 window.close()를 이용해 투표창이 저
절로 닫히게 하였다.
'WEB PROGRAMMING' 카테고리의 다른 글
| [React] React 처음이라면... React란 ? React의 핵심 (0) | 2020.08.11 |
|---|---|
| [React]React-redux란 무엇인가? (0) | 2020.08.05 |
| HTTP Methods & CRUD (0) | 2020.05.01 |
| MongoDB와 Node.js에 연동시키기 (0) | 2020.05.01 |
