[css] advanced tricks

box-sizing

• content-box : content size에 따라 박스의 크기가 결정되며, border를 추가하더라도 box size는 여전히 content만 포함
• border-box : border size가 총 박스 크기에 포함되어 계산

Absolute vs Static

• position의 기본 값은 static
• 기존 static 값을 기준으로 relative 값만큼 움직임
• absolute는 근접한 부모 중에 static이 아닌 부모를 기준으로 움직임

Sticky vs Fixed

• position : relative/static 이면, 해당 박스가 들어 있는 부모 박스 안에서 sticky
• position : absolute 이면, 근접한 부모 중 static이 아닌 부모를 기준으로 sticky
• position : fixed 이면, viewport를 기준으로 relative하게 해당 position에 fixed 됨. sticky와 유사하지만, viewport를 기준으로 같은 자리에 고정 되어 있는 것임

Centering trick

• margin : auto → 좌우만 동일한 마진을 주어 centering 해줌
• text-align : center → inline 레벨에서만 text-align(좌우)이 작동함 / block 레벨에서는 작동 안함
• transform : translate(50%, 50%) → 자기자신의 크기를 기준으로 %를 계산하여 움직임 / 좌우 상하 모두 가운데 정렬
  • 부모의 가운데로 정렬하고 싶다면, position : absolute + top, left를 같이 주어 사용이 가능
• (hacky method) line-height: box의 높이만큼 → text에는 font matrix가 있고, line-heignt을 box의 높이만큼 지정하게 되면, 자동으로 text가 box의 중간에 위치하지만, 줄 띄우기를 하면, 다음 줄을 또 다시 box 높이만큼 이동하게 됨...

Responsive background

• background-repeat : no-repeat;
• background-position : center;
• background-size : cover;
• background : position/size repeat src or url=””;

Transform

• transform: translateX/Y/Z(value); (Y는 +값 → 아래로 움직임)
• transform: scale(value);
• transform: rotate(valuedeg);
• transform: translate(X,Y) scale(value) rotate(valuedeg);

Transition(animation)

MDN transition : https://developer.mozilla.org/en-US/docs/Web/CSS/transition

cubic-bezier : https://cubic-bezier.com/#.17,.67,.83,.67

• animation 효과를 transition을 이용하여 smooth하게 동작하게 함

.box1:hover{
	background-color: blueviolet;
	transition-property: background-color;
	transition-duration: 300ms;
	transition-timing-function: linear;
}

.box2:hover{
	border-radius: 50%;
	background-color: cornflowerblue;
	transition: all 2s ease; 
}

.box2:hover{
	border-radius: 50%;
	transform: translateX(400px);
	background-color: cornflowerblue;
	transition: all 300ms cubic-bezier(0,.66,1,.01); 
}