2025-02-03T13:25:31

2025-02-03 13:25:31 +09:00
parent e7ee682f16
commit 7936270d10
21 changed files with 1896 additions and 98 deletions
--- a/docs/02_단위.md
+++ b/docs/02_단위.md
@@ -18,6 +18,7 @@ CSS 단위는 크게 절대 단위와 상대 단위로 나뉘어.
 * 가장 많이 쓰이는 단위
 * 디바이스의 **물리적 픽셀(pixel)**을 기준으로 함
 * 고정된 크기이기 때문에 반응형 디자인에는 다소 불리함
+
 ```css
 p {
  font-size: 16px;
@@ -64,6 +65,7 @@ div {
 * 부모 요소의 font-size를 기준으로 크기가 결정됨
 * 기본적으로 1em = 부모 글자 크기
 * 배수로 크기를 조정할 수 있음
+
 ```css
 .parent {
  font-size: 20px;
@@ -74,6 +76,7 @@ div {
  /* 부모가 20px이면, 자식 요소의 글자 크기는 30px이 됨. */
 }
 ```
+
 > em을 중첩해서 사용하면 예상보다 큰 값이 나올 수 있음!
 > ```css
 > body {
@@ -90,6 +93,7 @@ div {
 ### rem (루트 요소 <html>의 글자 크기 기준)
 * html 요소의 font-size를 기준으로 크기 결정
 * em과 달리 부모 요소에 영향을 받지 않음
+
 ```css
 html {
  font-size: 16px;
@@ -108,32 +112,38 @@ html {
 ### vw / vh (뷰포트 기준)
 * vw: 브라우저 너비(Viewport Width)의 %
 * vh: 브라우저 높이(Viewport Height)의 %
+
 ```css
 div {
  width: 50vw; /* 화면 너비의 50% */
  height: 30vh; /* 화면 높이의 30% */
 }
 ```
+
 > 반응형 디자인에서 매우 유용!

 ### vmin / vmax (작은 쪽 or 큰 쪽 기준)
 * vmin: vw와 vh 중 작은 값 사용
 * vmax: vw와 vh 중 큰 값 사용
+
 ```css
 div {
  width: 10vmin; /* 작은 쪽의 10% */
  height: 20vmax; /* 큰 쪽의 20% */
 }
 ```
+
 > 정사각형 요소를 만들 때 유용!

 ### ex / ch (문자 기준)
 * ex: 소문자 x의 높이를 기준으로 크기 지정
 * ch: 숫자 0의 너비를 기준으로 크기 지정
+
 ```css
 p {
  width: 10ch; /* 숫자 0이 10개 들어갈 크기 */
 }
 ```
+
 > 코드 블록이나 글자 기반 디자인에서 유용!