3 글 보임 - 1 에서 3 까지 (총 3 중에서)
-
사과 선생님 안녕하세요 숙제 다하고 선생님이 하신거 보고 질문드립니다 position: relative 준 다음 top : -40px 부분 확인했는데 margin-top : -100px 줬을 때 explain-box가 밑으로 안가고 위로 올라가더라구요 position을 따로 주지도 않았는데 왜 이런 현상이 나오는걸까요? HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="css/layout2.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body stlye="margin: 0px;"> <div class="main-background"> <div class="text-content"> <h4 class="main-title">Buy Our Shoes!</h4> <p class="main-content">10% studnet Discount*<br><br> 10% off with UNiDAYS & Free UK Standard delivery on all orders over £70. *Exclusions apply, see T&C's. </p> <button class="buy-btn btn btn-light main-button">Buy Now</button> </div> </div>
<div class="sub-background"> <h4>How we design our shoes</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem aliquid libero ut distinctio tempora labore ipsum tempore quae atque consectetur dolores, sapiente cumque animi provident </p>
</div>
</body> </html> CSS
.main-background { width: 100%; height: 500px; background-image: url(../img/shoes.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 1px; text-align: center; }.main-title { margin-top: 100px; color: white; font-size: 40px; }.main-content { margin-top: 30px; color: white; }.buy-btn { padding: 15px; font-size: 20px; border: none; border-radius: 5px; position: relative; top: 20px; left: 0; right: 0; margin: auto; width: 150px; } // 강의에선 class명 explain-box .sub-background { width: 700px; margin: auto; height: 200px; padding: 20px; text-align: center; margin-top: -100px; background-color: #eee; } Live Server에서 조회 시
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
- 답변은 로그인 후 가능합니다.