To set the font-size to pixels is very bad. body { font-size:10px; } /*very bad*/ for example, when they have bad sight and cannot see so good, then some people actually increase the default font size of their browser. The problem is that by doing so we actually override the browser font size setting that the user can manually change in the settings, and many people actually do that. Now if we s..

Every CSS property must have a value. Is there a cascaded value? -if yes, Specified value == Cascaded value -if not, Is the property inherited?(specific to each property) and if yes, Specified value == Computed value of parent element ∴ This is Inheritance! if not, Specified value == Initial value(specific to each property) like padding and margin -> not inherited. be extremely impracticable. In..

#1 Declaration ① Declared value ② Cascaded value ③ Specified value ④ Computed value ⑤ Used value (final calculation) ⑥ Actual value root font-size -> 16px(Browser default) section font-size -> 1.5rem -> computed: 16px * 1.5 = 24px(Inheritance) #2 Inheritance Example(x) How to convert to pixels Result on pixels % (font) 150% x% * parent's computed font-size(16px) 24px % (length) 10% x% * parent's..

This is so extremely important because getting started with CSS is actually very easy but really knowing what's going on behind scenes is completely different, and it's really not as easy as getting started. [Specificity] 1. inline styles 2. IDs 3. classes, pseudo-classes, attribute 4. Elements, pseudo-elements (Inline, IDs, Classes, Elements) CSS declarations marked with !important have the hig..

그동안 헷갈렸던 px, %, rem, em에 대해, 각 단위들이 어떻게 픽셀(px)로 변환되는지 살펴본다. See the Pen px, %, em, rem by shinhyejin (@clara-shin) on CodePen. # 단위변환 (단, x(%)는 px로 변환하려는 현재 값) font(%) = 부모의 font-size(px) * x(%) lengths(%) = 부모의 lengths(width or height)(px) * x(%) font(em) = 부모의 font-size(px) * x(em) lengths(em) = 스타일을 지정한 해당요소의 font-size(px)[각주:1] * x(em) rem = root(html)의 font-size(px) * x(rem) font(em), lengt..