CSS_단위

css 단위

#1. 절대 단위 (Absoulte Units)

• 절대 단위는 특정한 물리적 길이를 나타내며, 일반적으로 고정된 크기를 의미
• 주로 인쇄 매체에서 사용
• 픽셀 (px) / 포인트 (pt) / 인치 (inch) / 센티미터(cm) 등등
  - px 단위 : 화면의 픽셀 하나에 해당
  

#2. 상대 단위 (Realtive Units)

• 상대 단위는 다른 길이 값에 상대적인 크기를 지정
• "반응형" 디자인에서 매우 유용
• 백분율 (%) / em / rem / 뷰포트 너비 (vw) / 뷰포트 높이 (vh) 등등 ,,,
  - % 단위 : 상위 요소의 상대적인 크기 (부모 요소 영향)

.pct-child {
width: 60%;
height: 60%;
background-color: palegreen;
}

• em
  - font-size 속성값에 비례해서 결정된느 상대 단위
  - 상위 요소 크기에 비례
  - em 단위는 "중첩!" 굳이 필요한 상황이 아니라면 자주 사용되지 않음
  - 3em을 사용하더라도 상황에 따라 그 크기가 다르기 때문

.em {
  font-size: 2em;
}

• rem
  - root em 약자
  - 최상위 요소(html) 글꼴 크기에 비례
  - 2rem 이든 3rem 이든 다 같은 크기! ( 중첩 영향을 받지 않음 )

CSS 변수

• 변수 이름 : --로 시작
  사용법 : "var(변수명)" -> var() 함수 사용

• CSS 변수의 장점
  재사용성: 중복되는 값을 변수로 정의해 유지보수를 쉽게 만듬
  동적 스타일: 테마 변경 등 동적으로 값을 조정할 수 있음
  지역화: 특정 범위 안에서만 변수를 사용해 스타일 충돌을 방지
  이 접근법은 특히 다크 모드나 테마 변경 구현에도 유용합니다!

• 지역화
  #1. 전역 변수 (Global Variables)
  정의 위치: :root 또는 다른 전역 선택자 안에서 선언
  root는 문서의 최상위 요소
  사용 범위: 해당 문서의 모든 요소에서 접근 가능
  목적: 스타일에서 자주 사용되는 공통 값을 선언해 재사용성을 높이고,
  전체적으로 일관된 디자인을 유지

  #2. 지역 변수 (Local Variables)
  정의 위치: 특정 선택자(예: .btn, .card) 안에서 선언
  사용 범위: 해당 선택자의 자식 요소에서만 접근 가능
  목적: 선택자 안에서만 사용되는 값을 선언해 불필요한 전역 변수의
  남발을 줄이고, 모듈화된 스타일을 유지

:root {
  --color-success: blue; /* 성공 시 색상 */
  --color-error: red;    /* 에러 시 색상 */
  --color-white: white;  /* 흰색 */
  
  --ok: rgb(241, 124, 124); /* 커스텀 컬러 */
  
  --color-red-1: rgb(249, 42, 42); /* 빨간색 셰이드 1 */
  --color-red-2: rgb(251, 72, 72); /* 빨간색 셰이드 2 */
}

.btn {
  --size: 8px; /* 지역 변수 */
  
  color: var(--color-white); /* 전역 변수 사용 */
  border: none;
  border-radius: 4px;
  font-weight: bold;
  padding: var(--size); /* 지역 변수 사용 */
  width: 100px;
}

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

ViewPort 단위

• vw (Viewport Width)
  - "vw"는 뷰포트의 너비를 기준으로 함
  - 뷰포트의 너비를 100등분한 단위!
  ex) 1vw = 1% 너비
  - 화면의 너비에 따라 크기가 조정
  
• vh (Viewport Height)
  - "vh" 는 뷰포트의 높이를 기준으로 함
  - 뷰포트의 높이를 100등분한 단위
  ex) 1vh = 1% 높이
  - 화면의 높이에 따라 크기가 조정
  
• % (Percentage)
  - "%"는 부모 요소의 크기를 기준으로 합니다
  - 부모 요소의 크기를 100 등분한 단위
  - 부모 요소의 크기에 따라 크기가 조정!