HTML & CSS
전역 변수(Global variable) / 지역 변수(Local variable)
오류확인자
2024. 8. 13. 16:34
1. 전역 변수(Global variable)
전역 변수는 전체 문서에 걸쳐 사용할 수 있는 변수이다. 이러한 변수는 보통 :root 선택자 안에서 정의가 된다
:root 선택자는 HTML 문서의 최상위 요소인 <html>을 가리키며, 여기서 정의 변수는 스타일 시트 어디에서나 접근이 가능하다.
:root {
--point-color: #f60;
--font-en: 'arial';
--font-kr: 'Noto Sans KR', sans-serif;
}
.header {
color: var(--point-color);
font-family: var(--font-kr);
}
2. 지역 변수(Local variable)
지역 변수는 특정 CSS 선택자내에서만 사용할 수 있는 변수이며, 이러한 변수는 특정 요소의 컨텍스트 내에서만 정의되며 사용된다.
.card.type_orange {
--point-color: #f60;
}
.card.type_green {
--point-color: #17a651;
}
.card.type_blue {
--point-color: blue;
}
현재 위 코드는 .card라는 클래스안에 이중클래스로 지정을 해줬다. .card는 최상위 요소로 자식요소에게 상속이 된다.
3. 전역 변수와 지역 변수의 차이점
- 전역 변수: 문서 전체에서 접근이 가능하며, 유지보수에 용이하다.
- 지역 변수: 특정 컨텍스트 내에서만 접근 가능하며, 해당 컨텍스트 내에서만 사용이 가능하다.