라벨이 박스모델인 게시물 표시

CSS 블록, 인라인 차이점 및 박스 모델 구성 요소 정리

이미지
블록(Block) 요소와 인라인(Inline) 요소의 정의와 차이점 블록 레벨 요소 는 콘텐츠 태그가 문서의 한 줄을 다 차지하는 것 을 말합니다. 별도의 너비를 지정하지 않을 경우 문서 너비의 100%를 다 차지하는 요소입니다. 블록 레벨 요소로 한 줄을 다 차지하는 HTML 태그로는 h1부터 시작하는 Heading 태그 들과 태그들을 구분 짓는 div 태그 문단을 구성하는 p 태그 등이 있습니다.  인라인 레벨 요소 는 블록 레벨 요소와 달리 한 줄을 차지하지 않고, 태그에 명시된 콘텐츠의 크기만큼만 자리를 차지하는 요소 입니다. 대표적인 인라인 레벨 요소 태그로는 span 태그와 img 태그 등이 있습니다. 블록레벨 요소는 한칸을 다 자치하고, 인라인 레벨 요소는 콘텐츠의 길이만큼만 차지합니다. 블록 레벨과 인라인 레벨 차이 예제 < body >       < h1 > 대표적인 블록레벨 헤딩 태그 </ h1 >   < p > 블록레벨 요소는 콘텐츠 길이와 상관없이 너비 100%를 차지합니다. </ p >   < div > 영역 구분 div태그도 블록레벨로 한줄을 다 차지합니다. </ div >   < br >< br >< br >   < span > 인라인 요소는 콘텐츠의 양만큼만 너비를 </ span >   < span > 차지합니다. 그러므로 태그가 여러개 여도 </ span >   < strong > 모두 한줄에 표시됩니다. </ strong > </ body > 박스 모델 구성요소 마진, 테두리, 패딩 CSS는 HTML 태그 요소들을 박스 단위로 구분하여 스타일을 지정하게 됩니다.  이것을 박스 모델이라고 하며, 박스 모델의 구성요소 에는 태그의 콘텐츠가 포함된 콘텐츠 영역, 콘텐츠 영역 과 박스 사이의 여백 패딩(padding) 그리고 박스 테두리(bo