Front_ CSS 박스 모델 개념, Display 속성

---

CSS 박스 모델

웹 문서에서 내용 배치 시 각 요소를 박스 형태로 구성하는 것 

각 박스 모델은 콘텐츠 영역과 테두리, 여백들로 구성 됨 

CSS를 사용한 레이아웃의 기본 

 

 

 

박스 모델 

실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding),

박스의 테두리(border), 박스 모델 사이의 여백인 마진(margin)등의 요소로 구성 됨

블록 레벨 요소

태그를 사용해 컨텐츠를 추가했을 때 한 줄을 통째로 차지하는 요소 

양 옆으로 다른 요소가 올 수 없음, 너비, 마진, 패딩 이용하여 크기나 위치 지정 가능 

예) div, p, hn, ul, ol, form, table, fieldset, address 

 

 

 

인라인 레벨 요소 

화면에 표시되는 컨텐츠만큼만 차지하고 한 줄을 차지하지 않는 요소

여러 개의 인라인 레벨 표현이 가능

예) img, strong, br, sub, span, input, textarea, label, button

 

 

 

display 속성 

필요에 따라 인라인 레벨과 블록 레벨을 변경할 수 있음

 

① display:block => 해당요소를 블록 레벨로 지정

img같은 인라인 레벨 요소도 블록 레벨 요소로 변경 가능

 

② display:inline => 블록 레벨 요소를 인라인 레벨로 변경

서로 다른 줄에 배치되는 요소들을 한 줄로 함께 표시 가능

 

③ display:inline-block => 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성 지정

두 가지 특성을 모두 가질 수 있음

 

④ display:none => 해당 요소를 화면에 전혀 표시하지 않음

공간 조차 차지 하지 않도록 처리. cf)visibility:hidden;

 

---