4. 단위와 값

숫자, 길이 및 백분율

• <length> : 꺽쇠 있으면 숫자 + 단위
• <percentage>
• <number> (unitless) : int / float

• 상대길이
  a. 글꼴 상대길이 - em, rem…
  b. 뷰포트 상대길이 - vw, vh…
  
• 절대길이 - px…

절대길이 - px

• 기준점이 없는 고정된 값
• 대부분 px만 사용한다.
• cm, mm, in 와 같은 값은 웹사이트에서 확대,축소시에 맞지않음 (viewport 시에도)
• pt(포인트) : 문서를 출력한다는 가정하에 a4, a2 등등에 맞춰 하는 것
• px : 사용자가 브라우저에서 기본 글꼴 크기를 늘려도 바뀌지 않는다. > 웹 접근성 문제 유발!

상대길이 - em, rem

<div class="parent">
안녕!
    <div class="child">
    안녕!
    </div>
</div>

.parent {
    font-size: 24px;
    // 별도 설정 안하면 기본값인 16px
}
.child {
    font-size: 0.5em;
    // 12px
}

• 접근성을 위해서는 em, rem 을 사용해야한다.
• 1em === 부모의 font-size / %단위로 사용해도 결과는 같다.
• em은 요소마다 부모를 계속 찾아야해서 번거롭다 > rem 사용하기
• 1rem === root의 font-size
• root 는 브라우저의 기본 사이즈
• rem으로는 웹 접근성 대응할 수 있다!

상대길이 - vw, vh

<div class="contatiner">
    안녕!
</div>

body {
    // body 에는 기본적으로 margin 값이 설정되어 있다.
    margin: 0;
}

.container {
    width: 100vw;
    height: 50px;
}

• viewport와 관련된 길이
• viewport : 디바이스별 화면의 크기
• 100vw : viewport의 전체 가로 길이
• 100vh : viewport의 전체 세로 길이
• 반응형을 위해 사용한다.

상대길이 - vmin, vmax

.text {
    line-height: 2.0;
}

• 반응형에서 가로모드, 세로모드 변경에 대응해야할 때 사용
• 스마트폰 가로모드, 세로모드에서의 100vw, 100vh가 서로 바뀜
• 세로모드일때는 vmax == 100vh, vmin == 100vw
• 가로모드일때는 vmax == 100vw, vmin == 100vh

퍼센트

<div class="parent">
안녕!
    <div class="child">
    안녕!
    </div>
</div>

.parent {
    width: 100px;
    height: 100px;
}
.child {
    width: 50%; //50px;
    height: 30%;
}

• 부모 객체의 퍼센트 값이 100 이다.

함수 표기법 - calc(), min(), max()

<div class="contatiner">
    안녕!
</div>

.container {
    width: calc(100% - 50px);
    // 나누기, 곱셈도 사용 가능 (사칙연산)
    height: min(100%, 200px);
    // 100%와 200px 중에서 더 작은 것을 선택한다.

}

• 단위들에 대한 계산식
• 여러 단위를 조합해서 사용하고 싶을 때
• calc(100% - 50px)
• 사칙연산 가능하며 연산자 양쪽으로 스페이싱하기
• min(100%, 200px) : 둘 중 작은 것을 선택
• max(100%, 200px) : 둘 중 큰 것을 선택
• min, max는 인터넷익스플로어 사용하지 않기 때문에 조심하기

나의 회고 🤫

처음 단위를 설정할때는 항상 px만 사용했는데 언제부턴가 사람들이 px 보다 rem 이 좋다해서 rem을 썼었다.
기준도 몰랐어서 항상 한번 대충 숫자 넣어보고 보기에 괜찮으면 그걸로 fix 하곤 했는데
rem의 기준이 브라우저의 기본 폰트라는 것을 알고다니 그동안의 의문점이 해소된 기분이다..!
반응형을 사용할땐 늘 %로만 컨트롤했었는데 viewport는 배우며 vh, vw도 활용하면 좋을 것 같다