안녕하세요~
오늘은 :root를 이용하여 변수를 선언하고 사용해보려고 합니다.
* 결과
* 전체 코드
<!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>
<style>
:root{
--white: #fff;
--blue : #045fd4;
--padding:8px;
--padding2:16px;
}
button{
background-color: var(--blue);
padding: var(--padding);
}
button:hover{
background-color: var(--white);
padding: var(--padding2);
}
</style>
</head>
<body>
<button>버튼입니다.</button>
</body>
</html>
[ CSS ] :root 변수 선언
:root{
--white: #fff;
--blue : #045fd4;
--padding:8px;
--padding2:16px;
}
[ CSS ] :root 변수 사용
button{
background-color: var(--blue);
padding: var(--padding);
}
button:hover{
background-color: var(--white);
padding: var(--padding2);
}
'HTML／CSS' 카테고리의 다른 글
| [ HTML / CSS ] 늘어나는 textarea 만들기 (0) | 2022.08.21 |
|---|---|
| [HTML/CSS] 사진 로딩 애니메이션 사용하기 (0) | 2022.08.11 |
| [HTML/CSS] 움직이는 검색창 만들기 (0) | 2022.07.27 |
| [HTML/CSS] 체크박스 토글 버튼 만들기 (0) | 2022.07.11 |
| [HTML] Expanding Cards 만들기 (0) | 2022.07.04 |
