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 

    <div class="loading">
        <span></span>
        <span></span>
    </div>

부모가 이미 absolute면 relative로 바꾸지 않아도 된다.

calc() 함수 사용해서 정확하게 계산하기

 

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    width: 100px;
    height: 100px;
    /* border: 1px solid #000; */
}
.loading span {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    left: 0;
    animation: clockwise 2s linear infinite;
}
.loading span:nth-child(1) {
    background-color: pink;

}
.loading span:nth-child(2) {
    background-color: palegoldenrod;
    animation-delay: 1s;
}

/* Animation */
@keyframes clockwise {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 0;
        left: calc(100% - 30px);
        background-color: dodgerblue;
    }
    50% {  
        top: calc(100% - 30px);
        left: calc(100% - 30px);
        background-color: orange;
    }
    75% {
        top: calc(100% - 30px);
        left: 0;
        background-color: yellowgreen;
    }
    100% {
        top: 0;
        left: 0;
    }
}

'Web > CSS' 카테고리의 다른 글

CSS 변수 var() 사용하기  (0) 2022.02.09
CSS calc() 산술식(사칙연산)  (0) 2022.02.07
[animation] 도형로딩 애니메이션 #2  (0) 2021.08.01
UIKit #1 사용법, Accordion 컴포넌트  (0) 2021.07.27
display 속성 정리 (인라인, 블럭, 인라인블럭)  (0) 2021.07.23

+ Recent posts

티스토리툴바