[CSS] 박스 모델(box model) 그리고 박스 사이징(box-sizing)
HTML을 구성하는 모든 요소들은 사각형의 형태로 되어있다. 마치 박스 모양같은 형태인데, 때문에 '박스 모델' 또는 '상자 모델'이라고 불린다. 웹 디자인에서도 박스 모델은 정말 중요하고도 기본적인 개념인데 이 박스 모델은 어떤 구조로 이루어져 있는지 알아보려고 한다. 목차 Box Model box-sizing Box Model 우리가 개발자 모드에서 자주 보는 이 이미지가 바로 박스 모델의 전부다. 박스 모델은 실제 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 이루어져 있다. 브라우저에서 렌더링을 할 때, 이 박스 모델의 크기, 위치, 속성을 인지하고 반영한다. 요소 설명 콘텐트(Content Area) 이미지, 글, 영상 등의 실질적 요소들이 나타나..
CSS
2021. 7. 2. 22:19