2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
분명 강의 똑같이 따라가고있었다고 생각했는데 뭔가 잘못적어서 영상과는 다른 모습이 된것같습니다. 그런데 도대체 어디가 틀려서 이런식으로 그림크기가 안바뀐다거나 main-bg의 크기가 너무작다거나 다크테마 버튼위치가 중앙에 있는건지 잘모르겠습니다. main.css
.list-group { display: none; } .black-bg { width : 100%; height : 100%; position : fixed; background : rgba(0,0,0,0.5); z-index : 5; padding: 30px; visibility: hidden; opacity: 0; transition: all 1s; } .white-bg { background: white; border-radius: 5px; padding: 30px; } .show-modal { visibility: visible; opacity: 1; }.main-bg { padding: 100pw 20pw; background: lightgray; }.show { display: block; }.slide-container { width: 300vw; } .slide-box { width: 100vw; float: left; } .slid-box img { width: 100%; } index.html<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>site</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link href="main.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script> </head> <body> <div class="black-bg"> <div class="white-bg"> <h4>로그인하세요</h4> <form action="success.html"> <div class="my-3"> <input type="text" id="id" class="form-control"> </div> <div class="my-3"> <input type="password" id="pw" class="form-control"> </div> <button type="submit" class="btn btn-primary"id="submit">전송</button> <button type="button" class="btn btn-danger" id="close">닫기</button> </form> </div> </div>
<nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand">JSShop</span> <span id = 'badge' class="badge bg-dark">Dark 🔄</span> <button class="navbar-toggler" type="button"> <span class="navbar-toggler-icon"></span> </button> </div> </nav>
<ul class="list-group"> <li class="list-group-item">An item
<li class="list-group-item">A second item
<li class="list-group-item">A third item
<li class="list-group-item">A fourth item
<li class="list-group-item">And a fifth one
<div class="main-bg"> <h4>Shirts on Sale</h4> <button id="login" class="btn btn-danger">로그인</button> </div>
<div class="slide-container"> <div class="slide-box"> < img src="car1.png"> </div> <div class="slide-box"> < img src="car2.png"> </div> <div class="slide-box"> < img src="car3.png"> </div> </div>
<div class="alert alert-danger"> <span id="num1">5</span>초 이내 구매시 사은품 증정! </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html> 스크립트는 생략했습니다
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.