2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
안녕하세요 HTML/CSS 강의 너무 잘 듣고 있습니다. admin 실습 하는 중에 질문이 있습니다. 1. 상단 Nav 바가 width를 줄이면 햄버거 아이콘 (toggle)으로 바뀌는데, media 쿼리로 수정을 해야하는 건가요?
2. 상단 Nav 바의 알림 badge에서 빨간색 원이 너무 큰 것 같아서 줄어보려고 하는데, 코드의 문제인건지 작아지지 않습니다.
이는 어떻게 수정하면 될까요..?
3. Chart 같은 경우 width를 줄이면 표가 줄어드는데, 줄인 상태에서 늘리면 늘어나지 않고 줄어든 상태로 고정이 되어있습니다.
어떻게 수정하면 될까요..?
* 코드 첨부
<!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/admin.css" , rel="stylesheet"> <link rel="stylesheet" href="../fontawesome/css/all.min.css"> <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> <nav class="side-bar"> <div> <i class="fas fa-home"></i> <span>Home</span> </div> <div> <i class="fas fa-car"></i> <span>Service</span> </div> <div> <i class="fa-solid fa-flag"></i> <span>Alerts</span> </div> <div style="margin-left: -2px;"> <i class="fa-solid fa-chart-pie"></i> <span style="margin-left: 8px;">Stats</span> </div> </nav> <div class="main-container"> <nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <form class="d-flex" role="search"> <input class="me-2 input-animation" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> <div> <i class="fa-solid fa-bell" style="position: relative;"> <span class="start-100 translate-middle badge rounded-pill bg-danger"> 5 <span class="visually-hidden">unread messages</span> </span> </i> <i class="fa-solid fa-envelope" style="position: relative;"> <span class="top-0 start-100 translate-middle badge rounded-pill bg-danger"> 9 <span class="visually-hidden">unread messages</span> </span> </i> <span> Minny Park </span> </div> </div> </nav> <div class="content"> <h4>Dashboard</h4> <div class="row"> <div class="col-lg-3"> <div class="card"> <div class="card-body" style="border-left: 3px solid red;"> <p>Earning (Monthly)</p> <h4>$400,000</h4> <i class="fa-solid fa-calendar"></i> </div> </div> </div> <div class="col-lg-3"> <div class="card"> <div class="card-body" style="border-left: 3px solid green;"> <p>Earning (Annual)</p> <h4>$800,000</h4> <i class="fa-solid fa-dollar-sign"></i> </div> </div> </div> <div class="col-lg-3"> <div class="card"> <div class="card-body" style="border-left: 3px solid blueviolet;"> <p>Tasks</p> <h4>13</h4> <i class="fa-solid fa-list-check"></i> </div> </div> </div> <div class="col-lg-3"> <div class="card"> <div class="card-body" style="border-left: 3px solid yellow;"> <p>Requests</p> <h4>26</h4> <i class="fa-sharp fa-solid fa-comments"></i> </div> </div> </div> </div> <div class="row" style="margin-top: 40px;"> <div class="col-lg-8"> <div class="card"> <div class="card-header">Earnings Overview</div> <div class="card-body"> <div> <canvas id="myChart"></canvas> </div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script> const ctx = document.getElementById('myChart');new Chart(ctx, { type: 'line', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); </script> </div> </div> </div> <div class="col-lg-4"> <div class="card"> <div class="card-header"> Tasks </div> <ul class="list-group list-group-flush"> <li class="list-group-item">Borrowed Items <span class="badge rounded-pill text-bg-primary" style="float: right;">14</span> </li> <li class="list-group-item">Trello requests <span class="badge rounded-pill text-bg-primary" style="float: right;">2</span> </li> <li class="list-group-item">Marked Comments <span class="badge rounded-pill text-bg-primary" style="float: right;">1</span> </li> </ul> </div> </div> </div> </div> </div> </body></html> -----------------
@use "./reset";
.side-bar { transition: all 0.5s; position: fixed; width: 150px; background: #484bb3; height: 100%; color: white; z-index: 5; transform: translateX(-100px); }.side-bar div { padding: 15px; }.side-bar span { margin: 10px; }.side-bar:hover { transform: translateX(0px); }.side-bar i { transition: all 0.5s; transform: translateX(100px); }.side-bar:hover i { transform: translateX(0px); }.main-container { margin-left: 50px; }.input-animation { transition: width 0.5s; width: 150px; }.input-animation:focus { width: 300px; }.main-container i { margin-right: 10px; }.content { padding: 30px; }.card i { float: right; font-size: 30px; margin-top: -45px; } 긴 글 읽어주셔서 감사드리며, 혹시 질문글이 문제가 된다면 삭제토록 하겠습니다.
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.