[CSS] 기타 분류

box-shadow

요소에게 그림자를 줄 때 사용하는 property입니다.

1. h-offset (x축)
2. v-offset (y축)
3. blur
4. spread
5. color

의 속성을 가지며, 위 번호의 순서대로 속성을 입력해줘야 합니다.

 

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

 

 

 

opacity

투명도입니다.

.box {
	opacity: 0.3;
}

 

 

 

 

overflow

요소 안에 있는 자손들이 요소를 벗어났을 때 어떻게 처리할지를 정해줍니다.

.box {
	overflow: hidden;
    /* visible | auto | scroll | hidden */
}

 

 

 

transform

요소를 2차원, 3차원에서 모양을 변형시킬 때 사용합니다.

.box {
	transform: translate(x,y);
    transform: scale(x,y);
    transform: rotate(Ndeg);
}

이동이나 변형 후 요소의 원래 위치가 기억되기 때문에 변형된 모양이 다른 요소에게 영향을 미치지 않습니다.

 

 

 

 

 

visibility

요소를 보이지 않게 합니다. 자리는 유지됩니다.

display:none은 요소를 레이아웃에서 제외시킨다는 차이점이 있습니다.

.box {
	visibility: hidden;
    /* visible | hidden */
}