레이아웃, 여백의 비밀

값이 content-box인 경우 width, height 값을 적용할 때 padding과 border 값은 제외됨 (width, height 값을 설정하고 padding, border를 추가하면 그 값만큼 박스의 크기가 늘어남) 값이 bordder-box인 경우 width, height 값 안에 content 영역뿐만 아니라 padding, border 영역이 포함됨 뷰포트 기준으로 면적을...

aspect ratio수직마진병합marginpaddingCSS종횡비유지box-sizingvwCSS

가변크기단위 / em, %, rem, vw, vh, vmin, vmax

px 같은 고정크기 단위가 아닌 주변의 font-size를 기준으로 변하는 단위가 있다! 간혹 1em, 2em 보일 때가 있었다. ⭐ 기준 : 부모의 글자크기 (부모의 크기값 * 자식의 em 값) = 자식이 가지게 될 크기 값 em단위가 적용된 div와 p의 부모는 body다. body에 font-size가 적용되지 않아 기본사이즈인 16px을 기준으로 p는 16*2, div는 16*3이 적...

vmax&&remvminvhvwEXem&&

TIL 반응형 레이아웃을 위한 units : rem, em, v*, %

em : 부모의 폰트 사이즈에 의해 결정 rem : 루트의 폰트 사이즈에 의해 결정 vw : 뷰포트의 너비에 대한 1% vh: 뷰포트의 높이에 대한 1% vmin: 높이와 너비 중에 작은 값에 대한 상대 값 -> if desktop, vh 기준 vmax: 높이와 너비 중에 큰 값에 대한 상대 값 -> if mobile, vw 기준 📐 em과 rem em rem vw 스크린 너비 기준 -> 1...

unitrem&&vhemvw&&