<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="../css/layout2.css" rel="stylesheet">
</head>
<body>
<div class="main-background">
<div></div>
<h4 class="main-title">Buy Our Shoes!</h4>
<p>
안녕하세요<br>
6/16 - 6/18일 단, 3일간 빅 세일 합니다<br>
세일 제품들은 이염 혹은 하자가 없을 시 반품은 어렵습니다<br>
신중한 구매 부탁드립니다<br>
오늘도 즐거운 쇼핑 되세요🙂 <br>
감사합니다
</p>
<button class="main-btn">구매하기</button>
</div>
</body>
</html>
.main-background {
width: 100%;
height: 600px;
background-image: url(../image/shoes%20%EB%B3%B5%EC%82%AC%EB%B3%B8.jpg);
background-size: cover;
background-position: center;
/* main-title과 margi-collapse 현상 방지 */
padding: 1px;
/* 스크롤 시 배경위치 조정 가능
background-attachment: fixed;*/
/* background-size : 100%, 꽉차지 않으면 배경화면은 반복됨, 방지코드
background-repeat: no-repeat;*/
/* 보정입히기 filter()
배경 여러개 겹치기 가능 background-image : url(), url(), url();
*/
}
.main-title {
color: white;
font-size: 40px;
font-family: cursive;
text-align: center;
}
p {
color: white;
font-family: cursive;
font-size: 20px;
text-align: center;
}
.main-btn {
width: 100px;
padding: 10px;
border: none;
border-radius: 10px;
background-color: white;
font-size: 16px;
}
질문) main-btn에 margin을 줬을 경우,
margin-left:100px / margin-right:100px / margin: 100px / margin:50px 100px: 각각 단독으로 잘 작동을 하는데
margin-right:100px / margin-bottom:100px 얘넨 왜 작동이 안되는 건가요?
