CSS 모델 박스 이해하기 (content, padding, border, margin)
CSS 모델 박스란? HTML 요소를 감싸는 박스의 구조를 말한다. 콘텐츠(content), 안쪽 여백(padding), 테두리(border), 바깥 여백(margin)으로 구성되어 있다. 위 이미지를 기준으로 가장 가운데부터 content, padding, border, margin 순서이다. content 박스의 내부에 표시되는 실제 내용이다. 텍스트, 이미지, 미디어 등이 여기에 포함된다. padding 콘텐츠와 테두리 사이의 공간이다. padding은 요소의 내부 공간을 조절하며, 내용과 테두리 사이의 간격을 제어한다. border 콘텐츠와 바깥 여백 사이에 위치하며, 요소의 가장자리를 감싸는 선이다. 테두리는 주로 요소의 외형을 강조하거나 시각적인 구분을 위해 사용된다. 바깥 여백 요소의 외부 ..
2024. 4. 22.
