정 가운데 배치
justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다.
<body>
<main>
<section>
<div>안녕</div>
</section>
</main>
</body>body {
background-color: #EA2A81;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
main {
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 500px;
height: 600px;
}
배경 이미지 추가하기
befor를 통해서 배경 이미지를 추가할 수 있다.
<body>
<main>
<section>
<div>안녕</div>
</section>
</main>
</body>body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(./assets/mone.jpg) no-repeat 0 0/cover;
opacity: 0.6;
}
main {
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 300px;
height: 400px;
opacity: 0.8;
}
main {
z-index: 1;
}'웹 개발 > 기초' 카테고리의 다른 글
| 콜백함수 (0) | 2022.03.23 |
|---|---|
| [JS] 이벤트 다루기 (0) | 2022.03.22 |
| 자바스크립트 API 통신 (0) | 2022.03.21 |
| 자바스크립트 기본 문법 (0) | 2022.03.14 |
| [css] 반응형 레이아웃 만들기 (0) | 2022.03.10 |
[CSS] Flex box 정 가운데 배치 / 배경 이미지 추가