:root 가상 클래스란?
css에서 :root 가상 클래스는 HTML 문서의 루트 요소를 선택합니다
html의 루트 요소는 <html> 이기 때문에 root와 <html> 선택자와 동일합니다
CSS :root 변수
css에서 :root를 이용하여 재사용할 값을 담아줄 변수를 저장하여 변수로 불러올 수 있습니다
시스템 유지보수를 하려면 웹페이지의 여러 색상들이 담겨있는데 매번 하나하나 해당 클래스의 색의 코드를 검색하여 변경하려면 어렵기 때문에 색뿐만 아니라 재사용 가능한 다양한 값들을 변수에 저장하고 필요한 곳에서 불러와 재사용이 가능합니다
CSS :root 전역변수 선언하기
:root를 사용하여 CSS전역 변수로 설정하면 변수 안에 담긴 값을 원하는 곳에서 언제든 불러올 수 있습니다
*전역변수는 함수외부를 포함하여 모든함수에서 접근가능, 지역변수는 선언한 해당 함수 내에서만 접근가능*
:root 변수를 생성하여 안에 red와 blue라고 변수를 지정해주고 해당하는 색상 코드를 담아주었습니다
변수 명은 --를 붙인뒤에 입력해주면 됩니다
:root 변수 값 불러오기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bgcolor">
<h1>hello everyone</h1>
<p>this is test website</p>
</div>
</body>
</html>
|
cs |
html 코드에서 <body> 태그 내에 h1태그와 p태그를 사용하여 글을 작성 후 div로 감싸주었습니다
클래스 이름은 bgcolor로 지정해주었습니다
여기까지 작성후 웹페이지를 확인해보면 텍스트 두줄이 나오는 걸 확인하실 수 있습니다
이제 배경 색상과 글자색을 변경해보겠습니다
기본 코드
|
1
2
3
4
5
6
7
|
.bgcolor{
background-color: #ff0000;
}
.bgcolor h1{
color: #0e4bef;
}
|
cs |
CSS부분의 코드입니다
일반적으로는 div영역 내 배경색과 h1의 배경색을 변경하려면 이렇게 색상 코드를 직접 입력해주어야 하는데 웹페이지 하나에는 반복적인 색상을 사용하거나 반복적인 옵션을 주어야 할 때가 많습니다
그럴 때 이렇게 매번 코드를 복붙하거나 일부분만 변경해야 할 때 색상의 경우 코드를 매번 외울 수도 없고 반복적 입력을 하기 번거롭기 때문에 변수로 만들어주면 유용하게 사용할 수 있습니다
변수를 가져와 적용한 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
|
:root{
--red: #ff0000;
--blue: #0e4bef;
}
.bgcolor{
background-color: var(--red);
}
.bgcolor h1{
color: var(--blue);
}
|
cs |
아까 만든 변수를 가져와 적용해보겠습니다 var(변수명)을 입력해주면 됩니다
다시 한번 웹페이지를 확인해보겠습니다
div영역 내 배경 색상과 h1의 텍스트 색상이 의도한 대로 바뀐 걸 확인하실 수 있습니다