Notice
Recent Posts
반응형
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 후두골이형성증
- 크리에이터링크 상세페이지
- 강아지 발작
- 애드센스
- javascript 자식 노드 삭제
- 클린 서구
- css사칙연산
- javascript 자식 노드 추가
- javascript 자식 노드 복사
- 포토샵 스페이스바 오류
- 일러스트 스페이스바 오류
- 당연해?뭐가?
- 일러스트 핸드툴 오류
- 덕수궁 석조전
- 자바스크립트 타이머 만들기
- 크리에이터링크 이미지클릭
- 쏜살치킨
- 크리에이터링크 이미지링크
- 종묘대제
- 매일두유
- 셀렉트 태그 링크
- css변수
- 다른 사이트로 연결
- 당연해?왜?
- css 화면이동
- 포토샵 핸드툴 오류
- html 다운로드 버튼 만들기
- 대한제국역사관
- 자바스크립트 링크
- 포토샵 핸드툴 단축키
Archives
- Today
- Total
열정과 게으름 사이
css 변수 , 연산 본문
- CSS변수 선언
선언식 : --font-color: #fff; or --width: 100px; 와 같이 앞에 두 개의 바가 들어간다.
변수의 사용 범위 : 변수가 선언된 요소의 하위 트리.
전역 변수로 사용할 경우 :root{ --font-color: #fff; } 내에 선언하면 되고,
지역 변수로 사용할 경우는 사용할 트리의 기준이 되는 상위 요소에 선언.
- CSS변수 사용
요소{ color: var(--font-color);}
//지역 변수 선언
:root{
--bg-color:#26ae9a;
}
//지역 변수 선언
section2 .outbox{
--fnot:'Roboto', sans-serif;
}
// 변수 사용
section1{
background-color:var(--bg-color:#26ae9a;)
}
section2{
background-color:var(--bg-color:#26ae9a;)
}
section2 .outbox > p{
font-family:var(--fnot); // .outbox 영역 내에서만 사용 가능
background-color:var(--bg-color:#26ae9a;) //전역 변수 사용 가능
}
- 자바스크립트에서 변수 값 얻기
// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--font");
// 어느 곳에서나 변수 얻기
getComputedStyle(element).getPropertyValue("--font");
- CSS 사칙 연산
calc() 함수 사용으로 더하기( + ), 빼기 ( - ), 곱하기( * ), 나누기( / ) 를 함.
*(더하기와 빼기의 연산자는 앞 뒤로 띄어쓰기 반드시 필요)
width: calc(100% - 20px)는 기준요소의 width 100%에서 20px를 뺀 width를 가짐.
중첩 사용 가능 : width: calc(calc( 100% / 3) - 10px); => 100%가 600px일 경우 190px의 width를 가짐.
+유용한 기능
:scroll-behavior => 페이지 내에서 링크 이동시 자바스크립트 없이 부드러운 이동이 가능함.
auto, smooth 두 가지의 속성을 가짐, auto는 애니메이션 없는 기본 속성, smooth는 부드러운 애니메이션.
사용=> :root{ scroll-behavior: smooth;}
*속도 조절은 안됨.
반응형
'공부 메모 > css3' 카테고리의 다른 글
css 회전하는 큐브 (0) | 2021.05.24 |
---|---|
css 반응형 폰트 (0) | 2021.05.21 |
position:sticky 가 안될때 +반응형 여백 (0) | 2021.04.25 |
Comments