웹 페이지를 확대 축소 할 경우 형태가 망가집니다.(버튼에 위치가 다른 곳에 가는 등)
강의에서 봤을 때는 맞춰서 움직이던데..
혹시 잘못하고 있는 부분이 있다면 답변 부탁드립니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="foot.css">
</head>
<body>
<div class="main-picture">
<h1 class="spacing">We Want Shose</h1>
<p class="sale">오늘의 세일 상품 70% 할인</p>
<button class="but"><strong>구매하기</strong></button>
<div class="plus">
<p>box name</p>
</div>
</div>
</body>
</html>
CSS
* {
padding: 0; margin: 0;
}
.main-picture {
width: 100%;
height: 500px;
background-image: url(shoes.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding: 1px;
position: relative;
}
.spacing {
color: white;
font-size: 60px;
position: absolute; top: 55px; left: 0;
}
.but {
position: absolute; bottom: 0; left: 750px;
border: none;
outline: 0;
width: 100px;
height: 50px;
border-radius: 5px;
background-color: floralwhite;
font-size: 15px;
}
/*.plus {
display: block;
width: 400px;
height: 200px;
background-color: darkgray;
position: absolute; left: 300px; bottom: -150px;
}
*/
.sale {
position: absolute; top: 200px; left: 500px;
text-align: center;
font-size: 25px;
color: white;
}
