[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 39회차 미션

내일이면 40회차!

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 39일차입니다!

오늘은 12번째 커리큘럼인 'CSS / 단위'에 대하여 학습하였습니다.

얼마 전에 자바스크립트 스터디를 할 때 제가 만든 반응형 화면을 보고 스터디원 분이 px 단위 말고 rem 단위를 써보라고 권유한 적이 있었어요.

이후 검색하여 찾아보면서 그 응용방법을 잘 떠올리지 못했는데 오늘 강의를 들으니 그 방법을 유용하게 쓸 방법이 떠오르네요. 어떨 지는 모르겠지만요.

 

이동하는 지하철에서 강의를 들으며 휴대폰 노트에 메모했었답니다

오늘은 12번째 커리큘럼의 01. px, % / 02. em, rem / 03. vw. vh / 04. vmin, vmax 의 내용을 공부했습니다.

---

<Today I Learned>

<px>

🔶 해상도에 따른 고정 단위

<%>

🔶 부모 요소 사이즈에 영향받은 비율

<em>

🔶 자신의 현재 폰트 사이즈에 영향 받음

🔶 폰트 사이즈는 '부모'의 영향을 받을 수 있기 때문에 중간중간 em으로 사이즈 관리가 어려울 수 있음

 

🔷 폰트 사이즈는 상속될 수 있는 속성 ➡ 부모 요소의 폰트 사이즈가 정해져 있으면 자식은 그대로 영향 받음

 

- 예제

body {
  font-size: 10px;
}

body > container {
  width: 30em;
  /* 300px */
}

container > box {
  width: 20em;
  /* 200px */
}

 

<rem>

🔶 root em

🔶 최상위 조상인 html의 폰트 사이즈 크기를 지정해두면 그 후손들이 rem 단위로 html 요소의 폰트 사이즈 속성 값의 배수를 쓸 수 있음

🔷 body 부분은 따로 지정해도 rem 단위는 html의 폰트 사이즈 속성에만 영향 받음

 

- 예제

html {
  font-size: 10px;
}

body {
  font-size: 16px;
}

body > container {
  width: 30rem;
  /* 300px */
}

<vw, vh>

🔶 viewport와 연관 (현재 브라우저 화면 자체가 viewport라고 생각)

🔶 값: 백분율로 씀 (절반=50)

 

<vmax, vmin>

🔶 값: 백분율로 씀

🔶 vmax: 브라우저에서 더 긴 사이즈를 가지는 부분 컨트롤

🔶 vmin: 브라우저에서 더 짧은 사이즈를 가지는 부분 컨트롤

 

---

강의 링크: https://bit.ly/3m0t8GM