<바꾸기 전>
각각의 ul태그에 클래스값을 지정하여
각 클래스마다 style태그에서 따로따로 배경색과 컬러,왼쪽 너비등 값을 넣은 상태.
중복되는 값이 많아 코드가 길어지고 오타가 날 수 있어,
따로 상수를 정하여 불편함을 줄일 수 있다.
</head>
<body>
<ul class="first-list">
<li>orange</li>
<li>blue</li>
</ul>
<ul class="second-list">
<li>korea</li>
<li>japan</li>
<li>china</li>
</ul><바꾼 뒤>
-css에서는 root를 사용하여 전체 노드의 부모 노드를 선언할 수 있다.
(즉, 모든 태그에 root에서 선언한 상수를 모두 적용 가능.)
-style태그 안에서는 반드시 var을 사용하여 상수를 사용할 수 있다.
-calc는 계산을 할때 사용하는 함수이다.
' -- '을 사용하여 상수값을 선언,사용할 수 있다.
<style>
:root{
--background-color: blue;
--color: beige;
--base-space: 8px;
}
.first-list{
background-color: var(--background-color);
color: var(--color);
margin-left: var(--base-space);
}
.second-list{
background-color: var(--background-color);
color: var(--color);
margin-left: calc(var(--base-space) * 2);
}
</style>
</head>
<body>
<ul class="first-list">
<li>orange</li>
<li>blue</li>
</ul>
<ul class="second-list">
<li>korea</li>
<li>japan</li>
<li>china</li>
</ul>
용호의 코딩블로그 22.11 코딩공부 시작 23.2 부트캠프 입소