[CSS in depth] part1(2장)

working with relative units

what is relative units

• em 이름 유래 http://designwithfontforge.com/en-US/The_EM_Square.html

• 각 속성에는 사용할 수 있는 value type이 있음

• 예를 들면 length css data type이 있는데

  • absolute / relative 으로 나뉜다

• percentage: always relative

• React Native에서 사용하는 모든 치수는 단위가 없다. https://reactnative.dev/docs/height-and-width

relative units의 미스테리

• 대표적이고 가장 친숙한 것은 pixel 단위 ===> absolute units

  • 5px은 항상 5px이다.

• em, rem ===> not absolute, "relative"

  • 2em은 외부 요인에 따라 다르게 적용된다.

• external factors

  • which element you are using it on

• 그러니까 사용하기 어렵다. (pixel에 비해서 예측이 안되고 깔끔하지 못하다고 생각할 수 있음)

2.1 relative values의 힘

• “pixel-perfect” 디자인에서 => 반응형
  • style 계산을 페이지가 스크린에 렌더링 될때 해야할 필요

1. 브라우저의 사이즈 변동(Web)
2. 다양한 디스플레이 대응

• 그래서 relative units가 필요하다.

2.2 ems/rems

• font-size외의 property에 적용할 때: ems are defined by the current element’s font size.

  • 1em: 해당 element의 font-size
  • 브라우저에 의해 계산된 결과: computed value => 예: 1em => 1 * 16 => 16(computed value)
  • font-size만 바꿔서 모든 걸 다르게 적용할 수 있음

• font-size property에 적용할 때: font-size ems are derived from the inherited font size.

  • 부모 요소 font: 16px
  • 속성을 적용한 요소의 font: 16 * 1.2em => 19.2px

• 대부분의 브라우저에서 16px이 default font size이다(medium)

• font-size와 나머지 property에 같은 declared value를 사용해도, 결과는 font-size property 먼저 적용되고, 그 계산 결과가 나머지 property의 declared value로 사용되기 때문에 computed value는 서로 다르다.(2.6)

• 스타일이 중첩되는 경우 축소되는 현상 방지하기(Listing 2.7) => font-size에 ems 사용하는 것은 주의하지 않으면 예상치 못하게 동작할 우려가 있다는 것을 보여줌

---

• 더 나은 선택지 => rems

• 브라우저가 HTML 도큐먼트를 파싱하는 과정에서 페이지의 모든 요소를 메모리에 표시한다.

• html요소는 최상위 요소 => 이것을 special 가상 클래스 한정자를 통해 선택할 수 있다.

• rem: root em의 줄임말: rems are relative to the root element.

• 사용자 폰트 크기 조정

  • 사용자가 +,-로 화면의 폰트 크기를 조정하는 경우 => 일시적 적용
  • 설정에 들어가서 조정 => 이 경우 조정했음에도 불구하고 적용되지 않는 경우 ? => pixel같은 absolute value를 사용한 경우 => font size를 항상 relative units나 percentage를 사용해야하는 이유(font-size.html)

• 선택에 따라 pixel, em, rem을 잘 사용해야 한다.

  • TIP: When in doubt, use rems for font size, pixels for borders, and ems for most other properties.

2.3 pixel만 사용하는 습관 버리기

• page root 글꼴 크기를 .625 em 이나 62.5%로 설정하는 것 => 계산을 쉽게하기 위해서 사용하는 것

  • 문제점: 10px은 대부분의 경우 작기 때문에 거의 모든 text에 font size를 정의해야 한다.
    • 스타일 시트의 사이즈가 커짐
  • 문제점2: 1.4rem을 사용할때 14pixel이라고 생각하게 된다.(치환해서 생각하게 된다는 의미)

• em이나 rem으로 작업할 때는 몇 픽셀로 보이게 될지 집착하는 습관을 버려야 할 것

2.3.1 기본 폰트 사이즈 설정

• 14px을 주로 사용한다면 계산을 통해서 root에 지정한다.
• 원하는 기본 글꼴 크기 / 브라우저 기본 사이즈인 16px => 0.875

2.3.2 스크린 사이즈에 따라 기본 폰트 사이즈 바꾸기

• 미디어 쿼리를 이용하면 기기 사이즈에 따라 기본 폰트 사이즈를 조정할 수 있고, 전체를 조정하는 효과가 있다.
• 일일이 키우고 줄일 필요없이 각 미디어 쿼리의 root만 바꿔주면 된다.

2.3.3 하나의 컴포넌트 수정하기(large)