<body>
<div class="container">
<div class="result"></div>
</div>
</body <style>
.container {
position: relative;
width: 800px;
height: 500px;
background-color: seashell;
}
.result {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: seagreen;
box-shadow: 30px 30px 20px 5px rgba(28, 27, 27, 0.4);
}
</style>
'공부 모음집 > 실습 기록' 카테고리의 다른 글
| [👩🏻💻 연습] Google 페이지 따라 만들어 보기 (0) | 2023.10.25 |
|---|---|
| [레이아웃] 레이아웃 유형(2) - flex, grid (0) | 2023.10.23 |
| [👩🏻💻 연습] 반응형 Navbar 만들기 (+ 미디어쿼리, 햄버거 메뉴 토글 버튼, 자바스크립트 적용) (0) | 2023.10.21 |
| [레이아웃] Layout 유형 (1) (0) | 2023.10.20 |
| [👩🏻💻 연습] display: flex/ position: absolute/ transform: translate (1) | 2023.10.19 |