두 줄 요약 : css 전역변수 선언과 호출, css에 calc를 이용한 계산식 사용
1. :root { --myWidth: 180px; --myColor: 180;}
2. width: calc(100% - var(--myWidth)); background-color: (calc(var(--myColor) + 100), 51, 180);
출처 : youtu.be/x7EWFoRzAkk
Web Dev Simplified 라는 채널을 운영하고 있는 Kyle 형님이다.
잘생기고 목소리도 좋고 캠위치와 크기, VS code와 live server 화면분할, 단계적 레슨, 활용도까지.
정말 어마무시한 형님이다.
매 영상마다 시작할 때 너의 드림 프로젝트를 시작할 수 있게 웹을 심플하게 해주려 한다는데
암튼 정말 어마무시한 형님이다. 만약 내가 유튜브를 한다면 이 형님이 나의 롤모델이 될 것 같다.
암튼 이번 포스팅은 이 형님의 이 영상을 보고 익히기 위해 실습을 한 결과를 저장하는 포스팅이다.
호환성
시작에 앞서 브라우저 호환성에 대한 명시다.
CSS 전역변수 활용은 IE 11 미지원, Opera Mini 미지원이다. 95% 커버된다.
CSS calc 활용은 IE 11 부분지원, Opera Mini 미지원이다. 98% 커버된다.
이 정도면 써도 되지 않을까 헤헤.
calc과 var
테스트 해본 결과 학습한 내용은 다음과 같다.
1. 전역변수는 :root 에서 선언한다
2. 선언시 --변수명: 값 으로 선언하되, px등 단위가 필요하면 함께 선언한다.
3. 호출시엔 var(--변수명) 으로 호출하고 호출할 때 단위를 붙이거나 바꿀 수 없다.
4. calc 사용 시 calc(a - b)에서 띄어쓰기를 반드시 지켜야만 정상 작동한다.
calc후 괄호열기까지 공백이 없어야 하며 연산자 앞뒤로 반드시 공백이 필요하다.
전역변수 선언하고 변수를 CSS에서 활용할 경우,
전역변수만 변경함으로써 변수 활용한 모든 요소 값이 변하게 된다.
Java에서 상수 선언한 뒤 상수값을 변경을 통해 일괄 변경을 처리하는 기분이 들었다. 캬.
calc는 이전에 알고 있었지만 제대로 활용하지 못했는데
이번에 변수까지 알게 되어서 더 활용하게 될듯.
코드펜 실습 결과
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
1. 전역변수는 :root 에서 선언한다
2. 선언시 --변수명: 값 으로 선언하되, px등 단위가 필요하면 함께 선언한다.
3. 호출시엔 var(--변수명) 으로 호출하고 호출할 때 단위를 붙이거나 바꿀 수 없다.
4. calc 사용 시 calc(a - b)에서 띄어쓰기를 반드시 지켜야만 정상 작동한다.
calc후 괄호열기까지 공백이 없어야 하며 연산자 앞뒤로 반드시 공백이 필요하다.
*/
/* 문서의 루트 요소 선택 HTML에서는 <html>
:root 에 전역 변수를 선언하여 사용한다 */
:root {
--myWidth: 180px;
--myColor: 120;
}
div {
/* 공통 높이 지정 */
height: 100px;
/* 가운데정렬 처리 */
margin: 0 auto;
}
div[id="calcTest1"] {
/* 100%에서 200px 뺀 길이 */
width: calc(100% - 200px);
/* rgb 첫번째 값 120을 변수에서 가져옴 */
background-color: rgb(var(--myColor), 51, 180);
}
div[id="calcTest2"] {
/* calc 중첩. 100%에서 200px 뺀 값에서 300px을 또 뺌 */
width: calc(calc(100% - 200px) - 300px);
/* calc, var 중첩. rgb 첫번째 값을 변수에서 가져와서 100을 뺌 */
background-color: rgb(calc(var(--myColor) - 100), 51, 180);
}
div[id="calcTest3"] {
/* calc 3번 중첩. 100% - 200px 에서 -300px 한 뒤 --myWidth 변수만큼 또 뺌 */
width: calc(calc(calc(100% - 200px) - 300px) - var(--myWidth));
/* calc, var 중첩. rgb 첫번째 값을 변수에서 가져와서 100 더함 */
background-color: rgb(calc(var(--myColor) + 100), 51, 180);
}
</style>
</head>
<body>
<div id="calcTest1"></div>
<div id="calcTest2"></div>
<div id="calcTest3"></div>
</body>
</html>
|
cs |
See the Pen CSS - calc(), var() by Richard JEON (@hj-rich) on CodePen.
'HTML & CSS' 카테고리의 다른 글
| CSS 적용 우선순위 (Specificity), JS로 style 다루기 (0) | 2020.11.29 |
|---|---|
| 링크 공유될 때 제목과 내용, 이미지 설정하기 : <meta property="og:title" content="!!"> + SEO 구글 검색에 노출시키기 (2) | 2020.10.09 |
| HTML, Tomcat, JAVA의 시작 2020-05-25 : HttpServlet (0) | 2020.05.26 |
