![[웹코딩 가이드] 홈](./_img/sparrow-sqr.svg "[웹코딩 가이드] 홈으로 돌아가기"){kind=small}
- 변수와 함수
-
Css 변수에는 문서 전반에 걸쳐 재사용할 임의의 값(만!)을 담는데,
이를 이용하면 한 곳에 값 을 저장해두고서.. 다른 여러 곳에서 필요할 때마다
참조 하여 가져올 수 있는데, 이 토큰화된 값 은
var();함수를 써서 접근할 수 있다 - 곧, Css의var();함수는 Css 변수의 값 을 다른 속성의 값 으로 설정해줄 때 사용된다!
:root { --default-color: green; } /* 전역 Css 변수 --default-color 선언 및 값 설정 */
.def-color { /* 사용자정의 속성 .def-color 선언 */
/* var(); 함수를 써서 Css 변수 --default-color에 담긴 값을 가져온다 */
background-color: var(--default-color); /* 사용자정의 속성 .def-color의 배경색 설정 */
}
:root { --main-bg-color: pink; } /* body용 Css 변수 --main-bg-color 선언 및 값 설정 */
body {
/* Css 변수값을 body의 background-color에 속성값으로 넣는다 */
background-color: var(--main-bg-color);
}
☞
위 코드의 var(--default-color); 함수는
값으로 반환하려는 Css 변수(--default-color)을 인수로 사용하며,
해석된 값을 요청자에게 반환한다
←
참고로, Css 변수명 앞에는 --를 붙여야 하며 대소문자를 구분한다!
* cf)
주어진 변수가 아직 정의되지 않았을 때,
var(); 함수의 Css 변수값에 다수의 대체값들을 옵션으로 추가해줄 수 있다:
var(--main-bg-color, blue, red[, ..])
←
이는 사용자정의 컴포넌트 및 Shadow DOM으로 작업할 때 유용하게 활용된다!
✓
스크립트에서는 Css에서 표준 속성을 사용하는 것과 같은 방식으로 Css 변수값을 넣어주면 된다:
대상요소.style.setProperty("--my-var", myValue + 1);
-
계산 함수:
calc(); -
1.
Css의
calc();함수는 모든 대상에서, 모든 값과 연산기호 사용이 가능하다. 이 함수는 단일 수학 표현식을 인자로 받는데, 이 인자는 길이 length, 숫자 number, 각도 angle 및 주파수 frequency 등.. 다양한 유형의 혼합일 수 있고, 단위 또한 혼합할 수 있다 -
2.
Css의
calc();함수를 쓰면 고정된 너비의 여백을 가진 블록레벨 요소를 쉽게 배치할 수 있고, 입력폼 등이 컨테이너 박스 바깥으로 나가지 않도록 너비를 제한해주는 것도 간단하다
:root { --root-height: 5rem; }
.my-element {
height: calc(var(--root-height) * 3); /* height: 15rem; */
}
width: calc(100% - 5em);
.inner_calc_box {
width: calc(100% - 5em); /* 박스 너비 설정 */
margin: 0 auto; /* 박스 정중앙 배치 */
color: white; background-color: grey;
} .inner_calc_box p { text-align: center; } /* 텍스트 정중앙 배치 */
☞
참고로, calc(); 함수를 써서 텍스트 크기를 조절할 때에는 피연산자 중 하나는
반드시 상대길이 단위를 사용해주어야 한다.
그래야만 페이지 확대/축소 시에도 그 비율이 일정하게 유지될 수 있다:
font-size: calc(1.5rem + 3vw);
-
최소값/최대값:
min/max(); -
min();과max();함수는 전달된 인수들 중 가장 작게/크게 계산되는 값을 반환한다
body {
margin: 0 auto; /* 가로 정중앙 배치 */
width: min(1024px, calc(70% + 100px)); /* 둘 중 더 작은 값이 선택된다! */
}
p { font-size: max(1.2rem, 1.2vw); } /* 둘 중 더 큰 값이 선택된다! */
-
속성값 검색 및 설정하기:
attr(); -
attr();함수는 선택한 요소의 속성값을 검색하여 스타일시트에서 사용하는 데 쓰이는데, 가상요소에서도 사용할 수 있다. 이 경우 가상요소의 원래 요소에 있던 속성값이 반환된다
World
[data-hello]::before { content: attr(data-hello) " "; }
☞
예컨대, a::after { content: attr(href); }라면;
여기서, attr(); 함수는 <a> 요소의 href 속성값을 가져와서
::after 가상요소의 content로 설정한다
←
곧, <a> 요소의 href 속성값을 변경하려는 경우;
이 content 속성에 자동으로 반영되는 것이다!
-
데이터 소스 가져오기:
url(); -
URL은 이미지나 글꼴 등 리소스를 가리키는 문자열로서
background-image,cursor,list-style등 다양한 속성에서 사용되는데,url("데이터 소스");함수를 써서 URL의 데이터 소스(따옴표로 묶어야 한다!)를 불러와 이미지, 글꼴 및 컨텐츠 등을 표시할 수 있다
.container { background-image: url('/images/image.jpg'); }
