오늘은 html로 맥도날드 정보를 담은 위키피디아 페이지를 만드는 프로젝트를 해보았다!!
처음엔 '이걸 할 수 있을까.. 나 코딩 엄청 못하는데 ㅠㅠ'하는 마음에 엄청 불안했는데 막상 하니 된다 😊😋
역시 그냥 하면 어떻게든 되나 싶다!!🙂 더 열심히 만들어야겠다는 마음이 커지는 프로젝트였다!!
내가 작업하면서 어떤 부분이 힘들었고 무슨 태그인지 설명해보는 시간을 가져보도록 하겠다
🥇완성된 맥도날드 위키피디아 프로젝트🥇
↑캡처를 하면 항상 화질이 낮아져서 너무 슬프다.. 아무리 캡처라지만 너무 흐리멍텅해진다 😥
아무튼 50분-1시간 사이에 완료했던 거 같다!! 간단하면서도 헷갈려서 정신없었다🙄😶
🧐간단하지만 양이 많기 때문에 큰 제목을 기준으로 나눠서 분석하겠다🧐
① 맥도날드 위키피디아 정보 / 목차
<!DOCTYPE html>
<html lang="ko">
<!-- → html을 읽을 때, 어떤 언어로 읽어줄까요?? (시각장애인분들을 위한 부분 : 웹 접근성) -->
<head>
<meta charset="UTF-8">
<!-- → 문자 인코딩 방식으로, UTF-8을 꼭 해주어야 한다. (안하면 글자가 깨져보인다.) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mcdonald 위키피디아</title>
</head>
<body>
<h1><strong>맥도날드 위키피디아 정보</strong></h1>
<h2>목차</h2>
<hr>
<ol>
<li><a href="#mcdomald">맥도날드</a></li>
<!-- → 맥도날드라는 글자를 클릭하면 1. 맥도날드(설명)이 되어 있는 본문으로 향하게 할려면, 그 곳이 정확히 어디인지 정해줘야한다. 컴퓨터는 하나를 알면 열을 아는 융통성 있는 친구가 절대 아니다!! 컴퓨터는 하나를 알면 하나만 정확히 아는 친구임을 인식하고 있으면 이 부분에 대해 쉽게 이해할 수 있을 것이다! 내가 향하고 싶은 곳이 어딘지 알려주기 위해 링크가 될 부분에 ID라는 값을 주어야한다. ID는 단 하나만 정해지는 값으로, ID의 이름은 중복이 불가능하다!!
* 링크 부분에 "<h2 id="mcdomald">1. 맥도날드</h2>" 이런 식으로 ID값을 주고, 링크를 삽입할 부분"<li><a href="#mcdomald">맥도날드</a></li>"에 #ID를 입력하면 완성!! -->
<li><a href="#history">역사</a></li>
<li><a href="#gallery">갤러리</a></li>
<li><a href="#viewWith">같이 보기</a></li>
<li><a href="#price">맥도날드 가격표</a></li>
<li><a href="#mcdonaldCf">맥도날드 CF</a></li>
<li><a href="#mcdonaldWebsite">맥도날드 웹사이트</a></li>
<li><a href="#bicmcIndex">빅맥 지수</a></li>
<li><a href="#goHome">홈으로 이동</a></li>
</ol>
이렇게 작성하면!!
이런 식으로 링크하고 큰 제목이 생긴다!(뿌듯)
② 1. 맥도날드 / 2. 역사
<h2 id="mcdomald">1. 맥도날드</h2>
<hr> → 수평선 그리기
<p>
<strong>맥도날드</strong>(<a href=" https://namu.wiki/w/%EC%98%81%EC%96%B4" target="_blank">
<!-- → 링크 클릭하면 새창으로 열기 -->
영어</a>: McDonald's)는 미국의 세계적인
<a href="https://han.gl/a4P5m" target="_blank">패스트푸드 체인점</a>이다. 전 세계 39,000개
<br>→ 줄바꿈
매장에서 하루에 약 6500만명의 고객이 찾고 있는 세계에서 가장 널리 알려진 체인 음식점이며,<br>
햄버거 체인점으로는 가장 규모가 크다. 맥도날드는 주로 햄버거, 감자튀김, 콜라, 치킨류, 아침<br>
메뉴, 패스트커피, 디저트류 등을 제공하고 있다. 최근의 웰빙 경향을 반영해 샐러드, 과일 등의<br>
식물성, 건강한 음식들을 메뉴로 제공하고 있기도 하다.
</p>
<h2 id="history">2. 역사</h2>
<hr>
<p>1940년, 맥도날드는 <a href="https://www.ca.gov/" target="_blank">미국 캘리포니아주</a> 몬로비아 공항 근처 헌팅턴 드라이브(미국도 66)에<br>
"비행장"이라는 뜻을 가진 '에어드롬'(Airdrome)이라는 상호의 식당을 창업하였다. 당시 햄버거는<br>
10센트였고, 오렌지 주스는 5센트였다. 같은 해에 그의 두 아들인 모리스와 리처드는 본래 있었던<br>
식당 자리에서 동쪽으로 40마일 떨어진 캘리포니아주에 있는 서부 샌버너디노 1398 노스 E<br>
거리에 이사하며 식당 이름을 개명하였는데 이것이 "맥도날드의 바베큐"였다.
</p>
<ul>
<li>
<a href="https://www.usa.gov/" target="_blank">미국</a> 밖에 세워진 최초의 맥도날드는 1967년 캐나다 브리티시컬럼비아주 리치먼드에 개점했다.
</li>
<li>유럽 최초의 맥도날드는 1971년 네덜란드 잔담(Zaandam)에 개점했다.</li>
<li>아시아 최초의 맥도날드는 1971년 일본 도쿄도 긴자에 개점했다.</li>
</ul>
↓↓완성본
③ 3. 갤러리
<h2 id="gallery">3. 갤러리</h2>
<hr>
<img src="./image/mcdonald3.jpg" alt="mcdonald3.jpg" width="400">
<br>
<맥도날드 플라자>
<!-- → 표현하고 싶은 문자: 꺽쇠(<>), 꺽쇠를 보여주려면 특수한 방법을 이용해서 나타낼 수 있다(코딩할 때, 꺽쇠를 많이 사용해서 차별화를 둬야되기 때문이다.) -->
<br>
<img src="./image/mcdonald2.jpeg" alt="mcdonald2.jpeg" width="400">
<br>
<<a href="https://www.seoul.go.kr/main/index.jsp" target="_blank">서울특별시</a>에 있는 한 맥도날드 점포>
<br>
<img src="./image/mcdonald1.jpg" alt="mcdonald1.jpg" width="400">
<br>
<맥도날드의 <a href="https://hypebeast.kr/2019/9/mcdonalds-beyond-meat-collaboration-plt-plant-burger-canada-test-info" target="_blank">햄버거</a>, 감자 튀김, 콜라>
<br>
↓↓완성본
④ 4. 같이보기 / 5. 맥도날드 가격표 / 6. 맥도날드 CF
<h2 id="viewWith">4. 같이보기</h2>
<hr>
<ul>
<li>드라이브 스루</li>
<li>로널드 맥도날드</li>
<li>롯데리아</li>
<li>맥플러리</li>
</ul>
<h2 id="price">5. 맥도날드 가격표</h2>
<hr>
<table border="1" width="50%">
<thead>
<hr>
<th>품목</th>
<th>품명</th>
<th>세트</th>
<th>단품</th>
</hr>
</thead>
<tbody>
<tr>
<td rowspan="2">버거</td>
<td>1955버거</td>
<td>7300</td>
<td>5700</td>
</tr>
<tr>
<td>빅맥</td>
<td>5300</td>
<td>4300</td>
</tr>
<tr>
<td rowspan="2">맥모닝</td>
<td>맥모닝 에그</td>
<td>4300</td>
<td>2300</td>
</tr>
<tr>
<td>베이컨 에그</td>
<td>4300</td>
<td>2500</td>
</tr>
<tr>
<td rowspan="2">치킨</td>
<td>맥너겟</td>
<td colspan="2">2300</td>
</tr>
<tr>
<td>맥윙</td>
<td>1100</td>
<td>1300</td>
</tr>
</tbody>
</table>
<h2 id="mcdonaldCf">6. 맥도날드 CF</h2>
<hr>
<video controls autoplay muted width="500" height="400">
<source src="./video/mcdonald-video.mp4">>
</video>* 개인적으로 colspan. rowspan이 너무 헷갈려서 이거 넣어보고 저거 넣어보면서 외운 거 같다 .. ㅠㅠㅠ 뜻은 다 알아도 table은 왜 이렇게 헷갈리는 지 모르겠다...! 안헷갈리도록 계속 반복해야겠다!!
↓↓완성본
⑤ 7. 웹사이트 / 8. 빅맥 지수 / 9. 홈으로 이동 / footer
<h2 id="mcdonaldWebsite">7. 맥도날드 웹사이트</h2>
<hr>
<iframe src="https://www.mcdonalds.co.kr/kor/main.do" frameborder="0" width="1100" height="1000"
sandbox=""></iframe>
<h2 id="bicmcIndex">8. 빅맥 지수</h2>
<hr>
<dl>
<dt><strong>빅맥지수</strong></dt>
<dd>빅맥 지수(Bic Mac Index)는 각 나라의 구매력 평가를 비교하는 경제지표로, 1986년 9월에<br>
영국의 이코노미스트지에서 처음 사용하였다.
</dd>
</dl>
<h2 id="goHome"><a href="./index.html" target="_blank">9. 홈으로 이동</a></h2>
<hr>
<h4>© 2021 그린컴퓨터. all rights reserved.</h4>
</body>
</html>
*<dl>에 속한 dt 소대장님과 dd 병장이 너무 헷갈린다 ,, 아까 너무 헷갈려서 dd 병장을 dd 소대장님으로 적어서 에?! 했다가 다시 수정했따 ㅎㅎ.... 😑
↓↓완성본
짠!! 이렇게 코드를 나열해보았다. 사실 저번에 배웠던 부분들로만 코드를 작성해서 특별하게 설명할 태그가 없었다ㅎㅎ
대신 헷갈리는 태그만 존재했을 뿐... table 태그와 dl 태그 외엔 괜찮았다!! 코딩에 대해서 제대로 배우고 있는 거 같아서 기분이 너무 좋다!!! 빨리 배워서 내 디자인이랑 같이 응용하고 싶다 🥰
'웹 > HTML' 카테고리의 다른 글
| [코딩 공부_08] 웹 사이트와 웹 페이지의 구조 알아보기 (0) | 2021.02.19 |
|---|---|
| [코딩 공부_07] form 태그 사용하기 (0) | 2021.02.17 |
| [코딩 공부_05] HTML의 각종 태그들 정리 (0) | 2021.02.15 |
| [코딩 공부_04] HTML, 웹을 이루는 근간 (0) | 2021.02.13 |
| [코딩 공부_03] 모바일 웹과 반응형 웹이란 무엇일까? (0) | 2021.02.12 |
댓글