씨앗뿌리는 개발자의 개발노트
article thumbnail
CSS의 box model
HTML, CSS 2023. 3. 11. 11:40

CSS의 box model은 웹 페이지에서 각 요소가 그려지는 방식을 정의하는 CSS의 핵심 개념입니다. 콘텐츠 영역, 패딩(padding), 테두리(border) 및 여백(margin)의 네 부분으로 구성됩니다. 콘텐츠 영역은 텍스트, 이미지 및 기타 콘텐츠가 표시되는 요소 내의 공간입니다. 패딩은 콘텐츠와 테두리 사이의 공간으로 콘텐츠 주위에 공간을 만드는 데 사용됩니다. 테두리(border)는 패딩 및 콘텐츠 영역을 둘러싸는 선이며 요소의 시각적 경계를 정의하는 데 사용됩니다. 여백(margin)은 페이지에서 테두리(border)와 인접한 요소 사이의 공간으로 요소 사이의 공간을 만드는 데 사용됩니다. 다음은 box model을 적용하는 샘플 코드입니다. This is an example of th..