1. 중앙 정렬일때 ( margin: auto; ) width 값 조절하기
왼쪽 오른쪽 50px씩 빼기
<body>
<div class="container"></div>
</body>body {
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
width: calc(100% - 100px);
margin: 0 auto;
height: 200px;
background: yellowgreen;
}
2. 자식요소 width 똑같이 나누기
<body>
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>.container {
width: 900px;
margin: 0 auto;
overflow: hidden;
/* 자식요소 float -> 부모요소가 높이값을 잃음
overflow: hidden; 또는 부모에 높이값을 줘야한다. */
border: 5px solid #000;
}
.child {
float: left;
/* 3으로 나누기 */
width: calc(900px / 3);
height: 200px;
}
.child:nth-child(1) {
background-color: coral;
}
.child:nth-child(2) {
background-color: dodgerblue;
}
.child:nth-child(3) {
background-color: green;
}
3. 중첩가능
1000px - 300px == 700px;
calc(1000px - calc(200px + 100px));
4. 화면 전체 100% 100vh로 채우고, 가운데정렬 (상하좌우 마진 20px)
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 40px);
height: calc(100vh - 40px);
margin: 0 auto;
background: yellowgreen;
}
'Web > CSS' 카테고리의 다른 글
| CSS filter 효과 - blur, grayscale (0) | 2022.02.09 |
|---|---|
| CSS 변수 var() 사용하기 (0) | 2022.02.09 |
| [animation] 도형로딩 애니메이션 #2 (0) | 2021.08.02 |
| [animation] 도형로딩 애니메이션 #2 (0) | 2021.08.01 |
| UIKit #1 사용법, Accordion 컴포넌트 (0) | 2021.07.27 |