반응형
margin auto
-
[CSS] 박스모델(1) - width,height,line-height,calc, margin, padding, margin auto웹/CSS 2023. 1. 7. 11:14
요소의 크기 inline이 아닌 요소는 width와 height로 크기를 조절할 수 있습니다. 단위로는 부모의 길이에 상대적인 %를 사용할 수도 있고 뷰포트(viewport) 너비와 높이의 1/100 단위인 vw와 vh, 이들 중 큰 것과 작은 것의 1/100 단위인 vmax와 vmin도 유용하게 사용됩니다. 텍스트가 한 줄일 경우 height과 line-height을 똑같이 맞춰주면 세로 방향에서 가운데로 정렬한 것과 같은 모습이 됩니다. calc(100% - 50px)과 같은 형식으로 연산자를 사용하여 필요에 맞는 길이로 조절할 수도 있습니다. 예시) width를 꽉채우려면 100vw, height를 꽉 채우려면 100vh를 넣으면 된다. 단, html(최상의 부모요소)에 padding이나 margi..