[HTML&CSS] 절대길이(px) 와 상대길이(em , rem)

1. 절대길이 - px9:56 → 고정값이라고 생각.

1. px → 대부분 px만 사용한다.

• cm(센치), in(인치)는 웹에서는 적합하지 않다. ( 화면을 확대, 축소에따라 길이가 달라질 수 있다.)
• pt (point) 는 가끔 볼 수도 있다. (워드, 한글은 출력할 가정이 있어서 쓰는것) -웹 세상에 적합x
•  

1. px을 지정하면 브라우저에서 확대,축소해도 변하지 않는다. (사용자 설정을 따르지 않는다.)

접근성 문제를 유발할 수 있다.

---

2. 상대길이 - em, rem8:33 → 기준점에 따라 달라진다.

 

먼저 보는 결론.

rem을 사용하는게 더 직관적으로 이해하기 편할 것이다.

접근성 문제도 해결된다.

 

 

1. em ⇒ 1em === 부모의 font-size이다.

 

See the Pen Untitled by ITK-SHIN (@itk-shin) on CodePen.

 

 

• 부모가 24px 이므로 1em=== 24px이다.

 

---

See the Pen Untitled by ITK-SHIN (@itk-shin) on CodePen.

• 부모가24px이므로 0.5em === 12px이다.

---

 

See the Pen Untitled by ITK-SHIN (@itk-shin) on CodePen.

• 부모가 2em이면 기본브라우저 font-size16px의 2배인 32px이다.
• 자식은 부모의 0.5em 이므로 16px이 된다.

추가로 em 대신 %로 쓸수도 있다. → 0.5em( 50%) 하지만 em을 사용함으로써 font-size를 더 직관적으로 알 수 있다.

---

 

2. rem ⇒ 1rem === root의 font-size이다.

• root는 html의 body를 이야기한다.
• 즉 root의 font-size는 말 그대로 브라우저에서 설정한 16px을 의미한다.

 

3. 1em은 부모에 따라서 계속 바뀐다.

 

rem은 root의 font-size , 즉 16px이 1 rem이므로 직관적으로 이해하기 편해진다.

See the Pen Untitled by ITK-SHIN (@itk-shin) on CodePen.

• 부모는 32px, 자식은 16px이라는것을 직관적으로 알 수 있다.

 

 

다시 보는 결론.

rem을 사용하는게 더 직관적으로 이해하기 편할 것이다.

접근성 문제도 해결된다.