Section 8: The CSS Box Model (2)

2022.05.03 09:30 PM ~ 2022.05.04 01:14 AM

Section 8: The CSS Box Model

＊ 글속 태그들 < >는 ( )로 대체

<< CSS Units (단위) >>

1. Absolute (절대적 단위들)
   ※ 딱 정한 값 그대로 고정 됨.

   PX : 현재까지 가장 일반적으로 많이 사용되는 '절대적 단위'

거의 쓰이지 않는 요소들

• PT
• CM
• IN
• MM

2. Relative (상대적 단위들)
   ※ 다른 요소들에 비례해서 같이 움직임.

   • EM : 최상위 부모 요소 font-size를 기준으로 N배가 됨. (단, 최상위 부모 요소에도 사이즈 지정이 되어 있어야 함.)
     (ex: 최상위 부모 요소의 font-size가 30px이면, 하위 요소에 font-size: 2em 한다면 2배인 60px이 된다는 것.)

     ※ 문제점! ul, ol 등으로 목록을 줄줄이 나열할 때,
     하위요소가 부모요소 보다 점점 더 커짐.

REM : EM과 비슷하지만 다름. 'HTML ROOT'의 font-size를 기준으로 N배가 됨.
(ex: html 문서 자체의 기본 글자 크기가 20px이면 1rem도 항상 20px이 됨)

※ ul, ol 등으로 목록을 나열할 때, em과 다르게 글자 크기들을 동일하게 맞춰줌.

% : 부모 요소가 무엇이 됐건, 그 부모 요소 안에서 % 대로 조절 됨.

(ex: width/height 둘 다 800px인 div안에 다른 div를 넣어서 width/height 50% 씩 주면
가로로 50%인 400px 자리, 세로로 50%인 400px 자리까지 뻗어나감.
즉, 800px 정사각형의 4분의 1 자리에 위치하게 됨.)

그외 등등...

• VH
• VW

※ Font에서의 'line-height'에 %를 지정하면 요소 자체만 조절됨.