CSS 박스모델 개념

Box Model

CSS의 박스 모델은 HTML 요소를 테두리, 패딩, 마진, 그리고 콘텐츠 영역으로 나누어 설명합니다. 이 네 가지 요소는 함께 화면에서 해당 요소의 크기와 배치를 결정합니다.

• Content : 요소의 실제 내용이 들어가는 영역
• Padding : 콘텐츠와 테두리 사이의 공간
• border : 요소의 경계선
• margin : 요소와 다른 요소들 사이의 외부 공간

파란색 영역은 Content 영역으로 내용의 영역이 들어간다.초록색 영역은  padding 영역으로 콘텐츠와 테두리 사이에 있는 공간을 의미한다.border는 padding 밖에 위치하며 해당 영역의 경계선이다.마지막 영역인 margin은 해당 태그의 외부 공간을 의미한다.

---

div 와 span 의 차이점

divd 와 span 은 HTML 에서 가장 많이 사용되는 태그이다. 

화면에 표시되는 차이를 살펴보자

div

• block : 화면에 블록 단위로 표시되며, 항상 새로운 줄에서 시작한다.
• 크기 : 기본적으로 부모 요소의 너비에 맞춰 확장되며, 컨텐츠가 많아지면 자동으로 높이도 조절한다.
• 박스 모델 적용 : 패딩,마진,테두리 모두 직관적으로 작용하며,공간을 차지한다.

span

• inline 요소 : 텍스트와 같은 라인에서 이어서 표시되며, 새 줄에서 시작하지 않는다.
• 크기 : 콘텐츠의 크기만큼만 공간을 차지한다.
• 박스 모델 적용 : 패딩과 테두리는 요소 주변에 적용되지만, 마진은 인라인 요소에서 특이하게 작동한다. 마진은 영향을 미치지 않는 경우가 많다.

박스 모델 div 와 span 예시

• div는 블록 요소로 패딩,마진,테두리가 모두 명확하게 적용되어 현재 페이지 레이아웃에 영향을 준다.
• span 은 인라인 요소로, 콘텐츠의 크기만큼만 공간을 차지하고 패딩과 테두리라는 텍스트 주위에만 적용한다.

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

div 와 span 사용시 주의사항

<span><div><div></span> 
// 1. HTML 문법의 규칙위반 : 인라인 요소 안에 블록 레벨 요소를 포함할 수 없다.
// 2. 브라우저 렌더링 문제 : 브라우저가 이를 해석하려고 하지만 예상치 못한 레이아웃으로 처리할 수 있다.
// 3. 접근정 문제 : HTML 태그의 잘못된 사용은 접근성에 영향을 미칠 수 있다.


<span><span></span></span> : // 인라인 요소 안에 인라인 요소를 사용할 수있다.

<div><div></div></div> // 블럭 안에 블럭도 사용이 가능하다.
<div><span></span></div> // 블럭 안에 인라인 요소도 사용이 가능하다.