0510에 조별로 사이트 하나를 정해서 스토리보드를 짜고 화면을 구현해보라는 미션을 받았다.
완벽하진 않지만.. 80% 정도의 퀄리티로 완성이 되었다!
초반엔 맥북에어 기준 이런 모양이지만,, 다른 모니터로 보면 footer가 깨졌다.
-> 그런데 제출 후 다시 해서 해결했다ㅋㅋ 제출 후라는게 어이없지만 어쨌든 해결해서 속이 시원하다!
해결방법은 너무나도 당연하게 footer 에 width: 100%; 를 주면 되는거였음;
footer가 아니라 난 자꾸 footerbg에 엉뚱하게 값을 늘리고 줄이고 있었다.
근데 문제는..
이렇게 최소 사이즈를 안정해서인지 비율을 줄일때 문제가 나타난다.
그래서 80% 퀄이라는 것..
자바스크립트를 전혀 안했기 때문에 사실 기능하게 만드는 것에 있어서는 80%도 한참 못미치지만..
일단 css와 html만으로 똑같이(는 아니더라도 최대한 비슷하게) 만들었으니 스스로 칭찬하자는 의미의 '80%'이기도 하다.
css
<style>
* {
box-sizing: border-box;
}
div {
display: block;
unicode-bidi: isolate;
}
body {
font-family: "맑은 고딕", Verdana, Tahoma;
font-size: 10pt;
line-height: 160%;
color: #000;
padding: 0;
margin: 0;
background-color: #FBFBFB;
}
.container {
width: 925px;
margin: 0 auto;
padding: 0;
}
#logo {
position: relative;
max-width: 1020px;
min-width: 320px;
height: 70px;
margin: 0 auto;
}
.navigation {
background-color: rgb(254, 34, 89);
}
#logoYogiyo {
background-size: 90px;
overflow: hidden;
margin: 20px 10px;
}
.items mask {
margin-top: 20px;
}
.item {
border-color: rgb(122, 121, 121);
background-color: #fff;
float: left;
position: relative;
padding: 0;
border: 1px solid #dddd;
overflow: hidden;
padding-left: 10px;
margin: 5px;
/* 이미지 아래 여백 줄이기!!!!!!의 완벽한 답을 찾음 */
line-height: 0;
}
.item image {
margin-left: auto;
margin-right: auto;
border: 0;
max-width: 100%;
/* height: auto; */
/* vertical-align: bottom; */
}
.search {
padding: 125px 100px 70px;
background-image: url("./images/bg-top.png");
background-repeat: no-repeat;
background-position: center;
}
.search .ico-loc {
background: #fff url("images/sprite-icon.png") no-repeat 0 0;
background-size: 400px;
width: 40px;
height: 40px;
border-radius: 4px;
border: none;
}
.search .form-control {
border: none;
border-right: 0;
border-radius: 4px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
height: 40px;
width: 300px;
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.category-title {
position: absolute;
top: 7%;
left: 7%;
color: #333;
font-size: 110%;
font-weight: bold;
}
#cart .btn-login {
position: relative;
top: 0;
left: 0;
margin: 15px 0 7px;
width: 150px;
max-height: 40px;
padding: 7px 0;
text-align: center;
font-size: 18px;
border-radius: 5px;
background: #fa0050;
border: 1px solid #ea7266;
color: #fff;
}
#cart .btn-warning {
margin: 15px 10px 7px 5px;
width: 130px;
max-height: 40px;
padding: 7px 0;
font-size: 18px;
border-radius: 5px;
border-color: #ff8a00;
background: #ff8a00;
color: #fff;
}
#cart {
margin-top: 5px;
margin-right: 10px;
float: right;
}
.cancel {
height: 40px;
width: 30px;
border: none;
margin-left: -5px;
color: #fa0050;
background-color: #fff;
}
#whereAddress {
background: #ff8a00;
height: 40px;
width: 60px;
border: none;
color: #fff;
border-radius: 5px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: -5px;
}
.input {
position: relative;
border-collapse: separate;
text-align: center;
}
#wrapper {
height: auto;
min-height: 100%;
padding-bottom: 400px;
position: relative;
}
footer {
background: #FBFBFB;
padding-bottom: 65px;
font-size: 12px;
color: #999;
height: 400px;
position: absolute;
transform: translateY(120%);
border-top: 1px solid #e4e4e4;
width: 100%;
}
.footermenu {
/* width: 1600px; */
background: #FBFBFB;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
}
.footermenu ul {
list-style-type: none;
max-width: 1020px;
margin: 0 auto;
padding-left: 0;
overflow: hidden;
padding: 15px 0 13px;
}
.footermenu ul li {
display: inline;
margin: 20px;
}
.footermenu li a span {
display: inline-block;
width: 16px;
height: 16px;
margin: -1px 5px 0 0;
vertical-align: middle;
}
.footermenu li a {
float: right;
margin-right: 20px;
}
a #facebook {
background: url("images/img-footer1.png") no-repeat 0 -70px;
}
a #blog {
background: url("images/img-footer1.png") no-repeat -16px -70px;
}
.company-logo a {
display: block;
background: url("images/img-footer1.png") no-repeat;
width: 70px;
height: 29px;
text-indent: -999em;
overflow: hidden;
margin: 32px 45px 0;
float: left;
}
.address {
max-width: 1020px;
display: block;
margin-block-start: 2em;
margin-block-end: 1em;
margin-inline-start: 50px;
margin-inline-end: 50px;
/* 엄격하게 정렬, 정확한 이해를 위해 좀 더 찾아볼 예정.. */
unicode-bidi: isolate;
}
.service-info {
margin: 30px 150px;
}
.service-info .img {
display: inline-block;
width: 38px;
height: 38px;
margin: 0 5px 0 10px;
vertical-align: middle;
float: left;
}
.service-info .text {
display: inline-block;
vertical-align: baseline;
float: left;
}
.service .img {
background: url("images/img-footer1.png") no-repeat 0 -30px;
}
.review .img {
background: url("images/img-footer1.png") no-repeat -38px -30px;
}
.call {
font-size: 18px;
text-align: center;
}
.callcenter {
text-align: center;
vertical-align: middle;
}
.copyright {
margin: 5px 160px;
}
.all-footer {
margin-left: 130px;
}
</style>
html
<body>
<header>
<div class="navigation">
<div id="logo">
<img src="./images/logo-yogiyo.png" width="90" height="38" id="logoYogiyo">
<a id="cart">
<button type="button" id="topMenu" value="rogin" class="btn-login">로그인</button>
<button type="button" id="orderPad" class="btn-warning">주문표(0)</button>
</a>
</div>
</div>
<nav>
<div class="search">
<div class="input">
<button class="ico-loc"> </button>
<input type="search" class="form-control" placeholder=" 건물명,도로명,지번으로 검색하세요.">
<span id="button_search_address" class="input_btn">
<button class="cancel">X</span></button>
<button id="whereAddress">검색</button>
</span>
</div>
</div>
</nav>
</header>
<div class="container">
<div id="wrapper">
<div id="page_center">
<div class="items mask">
<div class="item">
<p class="category-title">전체보기</p>
<img src="./images/category-01.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">1인분 주문</p>
<img src="./images/category-onedish.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">프랜차이즈</p>
<img src="./images/category-10.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">치킨</p>
<img src="./images/category-02.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">피자/양식</p>
<img src="./images/category-03.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">중국집</p>
<img src="./images/category-04.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">한식</p>
<img src="./images/category-05.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">일식/돈까스</p>
<img src="./images/category-06.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">족발/보쌈</p>
<img src="./images/category-07.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">야식</p>
<img src="./images/category-08.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">분식</p>
<img src="./images/category-09.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">카페/디저트</p>
<img src="./images/category-11.png" width="200" height="200">
</div>
<div class="item">
<p class="category-title">편의점/마트</p>
<img src="./images/category-convenience-store.png" width="200" height="200">
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="footerbg">
<div class="footermenu">
<ul>
<li>이용약관</li>
<li>개인정보처리방침</li>
<li>포인트정책</li>
<li>회사소개</li>
<li>요기요사장님</li>
<li>입점문의</li>
<li>공지사항</li>
<li>
<a
href="https://www.facebook.com/Yogiyokorea/"
class="facebook"
rel="noopener noreferrer"
target="_blank">
<span id="facebook"></span>페이스북</a>
<a
href="https://blog.naver.com/rgpkorea"
class="blog"
rel="noopener noreferrer"
target="_blank">
<span id="blog"></span>블로그</a>
</li>
</ul>
</div>
</div>
<div class="all-footer">
<div class="address">
<div class="company-info">
<div class="company-logo">
<a href="#">요기요</a>
</div>
<strong>주식회사 위대한 상상</strong>
<p>
서울시 서초구 서초대로38길 12 마제스타시티 타워2 17층 | 대표이사 : 전준희 | 사업자등록번호:211-88-68802
<br>
개인정보담당자 : privacy@yogiyo.co.kr | 제휴문의 : partnership@yogiyo.co.kr | 고객만족센터 :
support@yogiyo.co.kr | 호스팅 제공자: 카페24 주식회사</p>
</div>
<div class="service-info">
<div class="service">
<span class="img"></span>
<span class="text">요기요<br>안심센터</span>
</div>
<div class="review">
<span class="img"></span>
<span class="text">요기요 100%<br>클린리뷰</span>
</div>
<p class="callcenter">
<strong class="call">고객만족센터 1661-5270 (유료)</strong>
24시간, 연중무휴</p>
</div>
<br>
<p class="copyright">주식회사 위대한상상은 통신판매중개자이며 통신판매의 당사자가 아닙니다. 따라서 상품/ 거래정보 및 거래와
관련하여 요기요에 등록된 판매자의 고의 또는 과실로 소비자에게 발생하는 손해에 대해 주식회사 위대한상상은 책임을 지지 않습니다. 상품 및 거래에
관하여 보다 정확한 정보는 해당 판매자에게 직접 확인하여 주시기 바랍니다. Copyright YOGIYO. All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
시련과 고난의 코드다.
그냥 무작정 따라한것도 아니고 내가 아는 것을 여기저기 끼워맞추다보니 이렇게 됐다.
이게 정리가 부족한 탓인 것 같다..!
css의 각 기능이 화면에서 어떤 작용을 하는지 정리를 좀 해야할 것 같다.