calc / shadow

계산 함수 calc

width: calc(100% - 60px);
width를 무조건 100%에서 60px이 빠진 값으로 하고 싶을 때는 위와 같이 작성한다.
(단위가 %와 px 일 때에는 띄어쓰기를 반드시 해야한다.)

응용

계산 함수와 변수를 함께 쓸 때에는

:root {
	--default-padding: 20px;
}

padding: calc(var(--default-padding)*2); 와 같이 엮어서 작성하면된다.

---

shadow

글자에 그림자를 지정

text-shadow: x-offset y-offset blur color;
h2 { text-shadow: 2px 2px 5px red;}

DOM 요소에 그림자를 지정

box-shadow: x-offset y-offset blur color;
div {box-shadow: 2px 2px 5px red;}