2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
<body class="main-background">
<div class="sidebar">
<ul>
<li>
<i class="fa-solid fa-house"></i>
<span>Hoem</span>
</li>
<li>
<i class="fa-solid fa-headphones"></i
<span>Services</span>
</li>
<li>
<i class="fa-solid fa-flag"></i>
<span>ALerts</span>
</li>
<li>
<i class="fa-solid fa-chart-pie"></i></i>
<span>Stats</span>
</li>
</ul>
</div>
<div class="content">
<div class="up-navbar">
<nav>
<form method="get" action="" role="search">
<input
type="search"
class="search"
aria-label="사이트 내 검색"
placeholder="search"
/><button type="submit" class="search-btn">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>
<ul>
<li><i class="fa-solid fa-bell"></i></li>
<li><i class="fa-solid fa-envelope"></i></li>
<li><span>Minny Park</span></li>
</ul>
</nav>
</div>
<div class="container">
<h4>Dashboard</h4>
<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
---------------------------------------------------------------------------------------
.main-background { background-color: rgb(221, 221, 221); }div { box-sizing: border-box; }body { margin: 0px; padding: 0px; }li { list-style-type: none; }.search-btn { background-color: rgb(27, 27, 27); color: white; border-top-right-radius: 5px; border-bottom-right-radius: 5px; height: 30px; width: 30px; border: none; }.searchbar { margin-top: 20px; margin-bottom: 20px; margin-left: 90px; height: 30px; border: 1px solid rgb(170, 168, 168); transition: all 1s; z-index: 5; position: fixed; }.searchbar:focus { transition: all 1s; width: 400px; outline: none !important; border-color: skyblue; box-shadow: 0 0 5px skyblue; }.up-navbar { background-color: white; box-shadow: 0px 5px 5px 0px rgb(184, 184, 184); position: relative; }.up-navbar li { display: inline; }.up-navbar ul { float: right; position: absolute; }.container { margin-left: 80px; margin-top: 20px; }.container h4 { margin-top: 20px; }.container div { background-color: white; height: 20px; width: 100%; }.sidebar { background-color: rgb(104, 104, 230); height: 100vh; width: 150px; color: white; padding-top: 10px; transform: translateX(-100px); }.sidebar:hover { transform: translateX(0px); transition: all 0.5s; }.sidebar i { transform: translateX(80px); }.sidebar:hover i { transform: translateX(0px); }.sidebar li { padding-top: 20px; }.content { margin-left: 50px; ------------------------------------------------------------------------------ 1. 해설편 보고 sidebar를 제외한 모든걸 div class content에 넣었는데도 사진처럼 사이드바 밑으로 내려갑니다. z-index도 줬는데 왜그럴까요? 2. 위에 up-navbar 에 minny park가 왜 안올라가고 밑으로 내려와요. 부모 div에 relative를 넣고 ul에 absolute랑 float:right 넣으면 div안에 우측정렬는거 아닌가요..? float 빼도 안올라가요.. 3. col-3가 안먹히는거 같아요.. 덮어쓰기 안한거 같은데도 4개로 안나눠져요..ㅠㅠ 하나의 큰 덩어리로 나와요. 그것도 정중앙도 아니에요. margin, padding 넣어도 안되요..
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.