CSS 박스 모델에 대한 얼마나 알고 있고 다른 박스 모델로 레이아웃을 렌더링하는 방법을 설명해보세요
모든 HTML 요소는 box로 이루어져 있고, document의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS Box Model을 참고로 합니다.
여기서 박스 모델이란 각각의 요소들을 각각의 요소들을 박스 형태로 나타내어 브라우저에 배치하기 위한 규칙이라고 할 수 있는데, 다르게 표현하자면 HTML 요소들을 감싸는 상자라고 할 수 있습니다.
브라우저는 이 박스 모델의 크기나 프로퍼티(색, 배경, 모양 등), 위치를 근거로 렌더링하여 실행하게 됩니다.
box model은 content(콘텐츠), padding(안쪽 여백), border(테두리), margin(바깥 여백) 으로 이루어져 있고,
box model의 종류로는 한줄에 하나의 엘리먼트만 표시되는 엘리먼트인 블록레벨 엘리먼트와, 한줄에 여러개의 엘리먼트가 표시되는 인라인 엘리먼트가 있습니다.
이 때, box model의 타입은 고정적이지 않고 가변적인데, 즉 display 속성이 각각의 기본값으로 부여되어 있고 이를 변경할 수 있습니다. 따라서 display 속성값을 이용해서 블록레벨 엘리먼트를 인라인 엘리먼트로 바꿀 수 있고, 반대경우도 가능합니다.
Box model
문서(document)의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS Box Model을 참고로 한다.
모든 HTML 요소는 box로 이루어져 있으며, CSS에서 이것으로 요소의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정할 수 있다. 이것을 CSS Box Model 이라고 한다.
박스모델은 요소와 요소 간의 레이아웃을 짜거나 크기와 위치 등을 정할 때 중요하게 작용하며,
content(콘텐츠), padding(안쪽 여백), border(테두리), margin(바깥 여백) 으로 이루어져 있다.
개발자도구 Computed(스타일 계산 결과) 탭에서 확인이 가능하고, Elements 탭에서 아무 태그나 눌러 Styles 탭 하단으로 가서도 확인할 수 있다.
Box model 영역
contnet(내용)
- 보통 태그가 차지하는 공간으로 텍스트나 이미지 등의 실질적인 콘텐츠가 표시되는 영역이다.
- 예를들어 test라고 태그를 기술했을 때 div앨리먼트의 content는 test
- 콘텐츠 영역의 크기는 콘텐츠 너비(콘텐츠 박스 너비)와 콘텐츠 높이(콘텐츠 박스 높이)
- 배경색과 배경 이미지를 가지고 있기도 한다.
- box-sizing 속성의 값이 기본값인 content-box
- 요소가 블록 레벨 요소인 경우, 콘텐츠 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용해 사용해 명시적으로 설정할 수 있다.
border(테두리)
- 요소의 테두리
- 테두리는 margin과 padding의 경계
- 테두리의 굵기와 색상과 스타일을 지정할 수 있다.
- 테두리의 두께는 border-width와 단축 속성인 border가 결정
- box-sizing 속성의 값이 border-box라면 테두리 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용해 명시적으로 설정
- 박스의 배경(background-color 또는 background-image)은 테두리의 바깥 경계까지 늘어나고, 그릴 땐 테두리에 가려진다. (이 동작 방식은 background-clip 속성으로 바꿀 수 있다)
padding(안쪽여백)
- 테두리와 컨텐츠 간의 여백
- 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장한다
- 안쪽 여백의 두께는 padding-top, padding-right, padding-bottom, padding-left와 단축 속성인 padding이 결정
margin(바깥여백)
- 요소와 요소 간의 여백
- 위 아래에 인접한 엘리먼트 간에는 margin의 값이 더 큰 쪽의 margin이 적용됨(좌우는 아님)
- 바깥 여백 영역의 크기는 margin-top, margin-right, margin-bottom, margin-left와 단축 속성인 margin이 결정
box-sizing 속성
box-sizing 프로퍼티는 width, height 프로퍼티의 대상 영역을 변경할 수 있다.
box-sizing 프로퍼티의 기본값은 content-box이다. 이는 width, height 프로퍼티의 대상 영역이 content 영역을 의미한다. box-sizing 프로퍼티의 값을 border-box
로 지정하면 마진을 제외한 박스 모델 전체를 width, height 프로퍼티의 대상 영역으로 지정할 수 있어서 CSS Layout을 직관적으로 사용할 수 있게 한다.
Box model 종류
블록 레벨 엘리먼트(block-level element)
- 한줄에 하나의 엘리먼트만 표시되는 종류의 엘리먼트
- 다른 인라인 엘리먼트 뿐 아니라 블록 레벨 엘리먼트도 컨텐츠로 포함할 수 있다.
- DIV, H1~H6, P, FORM, UL, LI, ADDRESS, BLOCKQUOTE, FIELDSET, TABLE, HR 등
인라인 엘리먼트(inline element)
- 한줄에 여러개의 엘리먼트가 표시되는 종류의 엘리먼트
- 인라인 엘리먼트만 포함 할 수 있고, 블록레벨 엘리먼트의 자식이어야 한다.
- a, img, em, strong등
- 인라인 엘리먼트도 박스모델의 적용을 받지만, 마진과 패딩의 값은 좌, 우에만 적용이 되고 상하관계는 무시된다
- 컨텐츠의 크기를 사용자가 임의로 지정할 수 없고, 그 컨텐츠 자체의 크기에 자동으로 맞춰진다
display 속성
Box model의 style, type이란 것은 고정적이지 않고 가변적이다.
기본적으로 기본값이 부여되어있을 뿐이고 원한다면 박스모델의 속성을 바꿀 수 있다는 뜻으로,
# 블록 레벨 엘리먼트
# 인라인 엘리먼트
위의 사진을 보면 따로 설정을 안해도, 요소가 기본적으로 가지고 있는 display 속성이 각각 block과 inline으로 되어있는것을 확인할 수 있다.
div 요소는 블록 레벨 엘리먼트의 기본값이, span태그는 inline 엘리먼트라고 하는 기본 display 속성값이 지정된것!
따라서, display 속성값을 통해 필요에 따라 블럭 레벨 엘리먼트인 div 태그를 인라인 엘리먼트로 바꿀수도 있고, span 태그를 블록 레벨 엘리먼트로 바꿀 수 있다.
# display: inline-block
inline과 block의 특성을 합쳐놓은 속성으로, 기본적으로는 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있다.
display: none
display 속성의 값을 none으로 하면 엘리먼트를 화면에서 보이지 않게 할 수 있다
이 속성값을 적용하면, 해당 코드를 아예 작성하지 않은 것과 같은 동일한 효과가 난다.
비슷한 효과를 주는 것으로 visibility: hidden가 있는데,
이것은 요소를 화면상에서 시각적으로 보이지 않게는 하지만 컨텐츠의 영역은 살아있다.
마치 투명인간 처럼!
참고
