CSS기초-(8) 변수 함수 그림자 둥글기

▶ CSS 변수 설정

css에서

:root{
	--color1 :red;
    --color2 :blue;
    --bigfont :42px;
    --smallfont: 12px;
    --middlefont: 19px;
}

위와 같은 방식으로 :root{ --글자 : 속성값; } 으로작성하여

div{ color:var(--color1);}

와 같은 방식으로 적용시킨다.

▶계산 함수

width: calc(100% - 60px);

width를 무조건 100%에서 60px 뺀 값으로 하고 싶을 때는 위와 같이 작성한다.
(단위가 %와 px 일 때에는 띄어쓰기 필)

응용

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

padding: calc(var(--default-padding)*2);

와 같이 엮어 작성한다.

---

▶그림자

글자에 그림자를 지정

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;}

▶ border-radius

border-radius : 전부
border-radius : 우상좌하 우하좌상

border-radius : 우상 좌상 우하 좌하