[CSS, 함수 Scope] 상대 단위와 절대 단위, 함수 Scope

1. CSS 상대 단위와 절대 단위

1) 절대 단위

1. px (픽셀) :
   
   • 화면에서 고정된 크기 단위
   • 가장 많이 사용되는 절대 단위
   • 예시 : width: 100px
2. pt (포인트)
   • 인쇄 매체에서 주로 사용되는 단위로 1pt는 1/72인치
   • 예 : font-size: 12pt
3. cm, mm
   • 실제 물리 단위 길이로, 주로 인쇄 매체에서 사용
   • 예 : width: 5cm
4. in
   • 2.54cm에 해당하는 물리적인 길이 단위
   • 예 : width: 5in
5. pc (파이카)
   • 1pc는 12pt에 해당
   • 예 : width: 1pc

2) 상대 단위

1. em
   
   • 부모 요소의 폰트 크기를 기준으로 크기를 결정한다.
2. rem (root em)
   • 문서의 루트 요소(`html`)의 폰트 크기를 기준으로 크기를 결정한다.
3. %
   • 부모 요소의 크기에 대한 비율로 크기를 결정
4. vm (viewport width)
   • 뷰포트(브라우저 창)의 너비에 대한 비율로 크기를 결정
   • 1vw는 뷰포인트 너비의 1%이다.
5. vh (viewport height)
   • 뷰포트의 높이에 대한 비율로 크기를 결정
   • 1 vh는 뷰포트 높이의 1%입니다.
6. vmin
   • 뷰포트의 너비와 높이 중 더 작은 값의 1%
7. vmax
   • 뷰포트의 너비와 높이 중 더 큰 값의 1%입니다.

 

2. 함수의 Scope

• 함수의 Scope는 변수나 함수가 정의된 위치에 따라 접근할 수 있는 범위를 의미한다.
• JS에서 스코프는 코드의 구조와 실행 환경에 따라 변수가 어디에서 접근 가능한지를 결정한다.

1) 전역 스코프(Global Scope)

• 전역 스코프에 정의된 변수나 함수는 코드 어디서든지 접근이 가능

var globalVar = "I am global";

function test() {
    console.log(globalVar); // "I am global"
}

test();
console.log(globalVar); // "I am global"

 

2) 함수 스코프(Global Scope)

• 함수 내부에서 정의된 변수는 해당 함수 내에서만 접근 가능

function test() {
    var localVar = "I am local";
    console.log(localVar); // "I am local"
}

test();
console.log(localVar); // ReferenceError: localVar is not defined

 

3) 블록 스코프(Block Scope)

• {} 로 감싸진 블록 내에서만 유효한 스코프

if (true) {
    let blockVar = "I am block-scoped";
    console.log(blockVar); // "I am block-scoped"
}

console.log(blockVar); // ReferenceError: blockVar is not defined

 

4) 그외

• 스코프 체인
  • JS에서는 내부 함수가 외부 함수의 스코프에 접근할 수 있다. 이를 스코프 체인이라고 한다.
  • 변수를 참조할 때 JS는 가장 가까운 스코프에서 변수를 찾기 시작하여, 없다면 외부 스코프로 계속 거슬러 올라간다.

var globalVar = "I am global";

function outerFunction() {
    var outerVar = "I am outer";

    function innerFunction() {
        var innerVar = "I am inner";
        console.log(globalVar); // "I am global"
        console.log(outerVar);  // "I am outer"
        console.log(innerVar);  // "I am inner"
    }

    innerFunction();
}

outerFunction();

 

• 렉시컬 스코프(Lexical Scope)
  • 함수가 어디에서 정의되었는지에 따라 스코프가 결정되는 것을 의미
  • JS는 렉시컬 스코핑을 사용하므로, 함수가 호출될 때가 아니라 함수가 정의된 위치에 따라 스코프가 결정
• 클로저(Closure)
  • 함수와 그 함수가 선언된 렉시컬 환경의 조합을 말한다.
  • 클로저는 함수가 외부 함수의 스코프에 있는 변수에 접근 할 수 있게 해준다.

function outerFunction() {
    var outerVar = "I am outer";

    return function innerFunction() {
        console.log(outerVar);  // "I am outer"
    };
}

var myFunction = outerFunction();
myFunction(); // 여전히 outerVar에 접근 가능

• 스코프의 중요성
  • 변수 충돌 방지 : 스코프를 사용하면 변수 이름이 겹쳐서 발생하는 충돌을 피할 수 있다.
  • 코드 가독성: 스코프를 잘 활용하면 더 명확하고 읽기 쉽게 작성 가능
  • 메모리 관리 : 함수 스코프와 클로저를 사용하여 불필요한 변수를 메모리에서 제거하거나 유지할 수 있다.