TIL 37

css 변수 설정 방법

• css 파일에 문법에 맞게 변수를 설정하고 var() 함수를 사용해 변수에 접근할 수 있음
• 반복적으로 사용되는 값을 변수를 이용해 정해둘 수 있기 때문에 유지보수에 유리함
• 변수로 지정하고 사용하기 때문에 가독성에 더 좋음

사용법

// css
:root {
	--success-color: green;
  	--error-color: red;
}

.test1 {
	background-color: var(--success-color);
}
.test2 {
	background-color: var(--error-color);
}

visibility: hidden 과 display: none의 차이

• display: none
  • 아예 사라지게 하는 것. 보이지도 않고 공간도 존재하지 않음
• visibility: hidden
  • 보이지만 않고 해당 공간은 존재.
  • width와 height값을 주었다면 그만큼 공간은 존재