Notice
Recent Posts
Recent Comments
Link
혜야의 코딩스토리
[HTML&CSS] 맥모닝 웹 페이지 만들기 🍔🍟🥤 본문
오늘은 공간분할태그 <div> <span> semantic 태그까지 배웠다.
여태까지 배운 걸 모두 응용해서 만들었는데.......이거 발전하고 있긴 한건가 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
근데 제일 문제는 엄청 간단해 보이는 것도 처음이다보니.. 너무 오래걸린다는 거ㅠㅠ~!
아 그리고 우리반 수강생들이 만든 웹페이지들도 구경할 수 있는데
다들 너무 잘하셔서 구경하는 게 재밌다 ㅎㅎㅎㅎㅎ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>McDonalds main</title>
<style type="text/css">
a:hover {
text-decoration: overline;
color: #DA291C;
}
a:active {
text-decoration: none;
color: #DA291C;
}
* {
margin: 0px; padding: 5px 0px;
}
span {
font-size: 20px;
font-family: Arial Black;
}
.section1 {
font-size: 17px;
font-family: Arial Black;
}
nav {
padding: 10px 0px 30px 50px;
}
section {
width: 95%;
float: left;
}
aside {
width: 5%;
float : right;
font-size: 10px;
}
footer {
background: #ffc300;
color: white;
clear: both;
font-size: 10px;
padding: 10px 0px 30px 50px;
</style>
</head>
<body>
<div id=top style="width: 800px; height:100px; margin: auto;">
<header>
<a href="https://www.mcdonalds.co.kr/kor/main.do"><img alt="맥도날드 로고" src="https://www.mcdonalds.co.kr/kor/images/common/logo.png"></a>
<span style="padding: 5%;"><a href="#">Menu</a></span>
<span style="padding: 5%;"><a href="#">Store</a></span>
<span style="padding: 5%;"><a href="#">What's new</a></span>
<span style="padding: 5%;"><a href="#">Story</a></span>
</header>
</div>
<div style="margin: 5px 0;" >
<video autoplay="autoplay" controls="controls">
<source src="https://www.mcdonalds.co.kr/kor/images/main/0404_McD_BB_BigMac_30_1920x540.mp4">
브라우저에서 비디오 파일을 지원하지 않습니다.
</video>
</div>
<div align="center">
<nav>
<span><a href="https://www.mcdonalds.co.kr/kor/menu/list.do">단품메뉴🍔</a></span>
<span> </span>
<span><a href="https://www.mcdonalds.co.kr/kor/menu/list.do">세트메뉴🍔🍟🥤</a></span>
</nav>
</div>
<div class="content">
<section class="section1">
<table style="width:80%; table-layout: fixed;">
<tr>
<td rowspan="3"><img alt="" src="https://www.mcdonalds.co.kr/upload/product/pcList/1650447448077.png"></td>
<td><i>베이컨 토마토 에그 소프트 번 <br> BLT Egg Soft Bun</i></td>
<td rowspan="3"><img alt="" src="https://www.mcdonalds.co.kr/upload/product/pcList/1650447752200.png"></td>
<td><i>소시지 토마토 에그 소프트 번 <br> SLT Egg Soft Bun</i></td>
</tr>
<tr>
<td>스팀 번과 1+등급 계란이 주는 부드러운 식감과 신선한 야채와 베이컨으로 꽉 찬 영양까지!</td>
<td>스팀 번과 1+등급 계란이 주는 부드러운 식감과 신선한 야채와 소시지로 꽉 찬 영양까지!</td>
<tr>
</table>
<table style="width:80%; table-layout: fixed;">
<tr>
<td rowspan="3"><img alt="" src="https://www.mcdonalds.co.kr/upload/product/pcList/1646207398160.png"></td>
<td><i>베이컨 토마토 에그 머핀 <br> BLT Egg Muffin</i></td>
<td rowspan="3"><img alt="" src="https://www.mcdonalds.co.kr/upload/product/pcList/1597032732299.png"></td>
<td><i>치킨 치즈 머핀 <br> Chicken 'n Cheese Muffin</i></td>
</tr>
<tr>
<td>갓 구워내 따뜻하고 신선한 베이컨 토마토 에그 머핀</td>
<td>바삭한 치킨 패티와 고소한 치즈로 아침에도 든든하게!</td>
<tr>
</table>
<table style="width:80%; table-layout: fixed;">
<tr>
<td rowspan="3"><img alt="" src="https://www.mcdonalds.co.kr/uploadFolder/product/prol_201901290308474630.png"></td>
<td><i>에그 맥머핀 <br> Egg McMuffin</i></td>
<td rowspan="3"><img alt="" src="https://www.mcdonalds.co.kr/uploadFolder/product/prol_201901290309065310.png"></td>
<td><i>베이컨 에그 멕머핀 <br> Bacon Egg McMuffin</i></td>
</tr>
<tr>
<td>갓 구워내 따뜻하고 신선한 베이컨 토마토 에그 머핀</td>
<td>바삭한 치킨 패티와 고소한 치즈로 아침에도 든든하게!</td>
<tr>
</table>
<table style="width:80%; table-layout: fixed;">
<tr>
<td rowspan="3"><img alt="" src="https://www.mcdonalds.co.kr/uploadFolder/product/prol_201902080435011620.png"></td>
<td><i>상하이 치킨 스낵랩 <br> Shanghai Chicken Snack Wrap</i></td>
<td rowspan="3"><img alt="" src="https://www.mcdonalds.co.kr/uploadFolder/product/prol_201901290309431230.png"></td>
<td><i>디럭스 브렉퍼스트 <br> Deluxe Breakfast</i></td>
</tr>
<tr>
<td>매콤한 치킨에 달콤한 화이트 마요 소스로 매콤달콤하게! <br> 베이컨에 양상추, 또띠아까지 어우러져 씹는 맛까지 즐겁다!</td>
<td>정통 아메리칸 스타일의 브렉퍼스트와 달콤한 핫케익을 함께~ <br> 프리미엄한 주말 브런치를 매일 즐겨보세요</td>
<tr>
<tr>
<th colspan="4"><a href="#top"> TOP 🔺</a></th>
</tr>
</table>
</section>
<aside>
<a href="https://www.mcdelivery.co.kr/kr/" target="_blank"><img src="https://is4-ssl.mzstatic.com/image/thumb/Purple112/v4/7d/b3/a4/7db3a4b2-8b38-4844-9f3e-353a9470ae0e/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/230x0w.webp" width="100" height="100"> </a>
</aside>
</div>
<div>
<footer>
<h3><a href="#">개인정보 처리방침</a></h3>
<h3><a href="#">위치정보 이용약관</a></h3>
<h3><a href="#">사이트맵</a></h3>
<h3><a href="#">임차문의</a></h3>
<h3><a href="#">고객문의</a></h3>
<h3><a href="#">인재채용</a></h3>
</footer>
</div>
</body>
</html>'꿈 : 멋진 개발자 🧸 > HTML & CSS' 카테고리의 다른 글
| [HTML&CSS] 스타벅스 제주 홈페이지 만들기 (0) | 2022.06.21 |
|---|---|
| [HTML&CSS] 스타벅스 제주 홈페이지 ☕ - 회원 가입 (0) | 2022.06.11 |
| [HTML&CSS] 나만의 웹 페이지 만들기 1☕ - 메뉴 소개 (0) | 2022.06.08 |
| [HTML&CSS] 카페 메뉴판 ☕ (0) | 2022.06.07 |
'꿈 : 멋진 개발자 🧸/HTML & CSS' Related Articles
more
