1. 박스의 기본 구성 요소
CSS 속성을 HTML 태그에 적용 할 때에는 그 태그의 컨텐츠가 가지고 있는 박스 모델의 너비 및 생성 여부를 생각하며 추가해야 합니다. 그렇지 않을 경우 CSS를 적용하기 전에 생각했던 이미지에 비해 생성된 후의 이미지를 보고 당황하는 일을 겪을 수 있을 겁니다.
기본적으로 박스 모델은 컨텐츠의
display속성이block(블록)일때 적용되며, 이때 영역은 크게contents,padding,border,margin으로 나뉘는데요.위의 예시에서 해당 컨텐츠를 개발자 도구(윈도우 기준 F12)를 이용하여 클릭할 경우 아래와 같은 정보를 Styles 탭에서 확인이 가능합니다.
이처럼 블록 컨텐츠를 생성하면 형성되는 박스의 각
padding,border,margin영역을 지정 할때에 하나의 수치만 기입할 경우 네 방향 전부 적용되고, 각각의 방향(top, right, bottom, left)에 맞추어서 개별적으로 지정하면 해당 방향에 대한 개별 수치를 적용할 수 있습니다.
2. 요소 별 특징
이처럼 블록 컨텐츠를 생성하면 padding, border, margin 영역이 생성되는데요. 각 영역의 특징은 다음과 같습니다.
Padding(패딩): 콘텐츠 영역과 테두리(Border) 사이의 여백으로, 배경색이나 이미지를 포함한 콘텐츠 영역 주변에 여백을 만듭니다.
Border(테두리): 콘텐츠와 패딩을 감싸는 선으로, 시각적으로 요소의 경계를 형성합니다. border-width, border-style, border-color 등의 속성을 사용하여 테두리의 두께, 스타일, 색상을 설정할 수 있습니다.
Margin(마진) : 요소의 외부 여백으로, 요소와 주변 요소 사이의 공백을 만듭니다. 일종의 보이지 않는 벽이라고 생각하시면 됩니다.
3. box-sizing의 역할
기본적으로 해당 컨텐츠의 박스의 크기는
width와height속성으로 설정이 가능합니다. 이때box-sizing의 속성 상태에 따라width와height의 범위를 벗어나는 박스를 생성하거나, 최대한 포함시키는 박스를 생성하는 것이 가능한데요.기본적으로
box-sizing의default값은content-box, 즉 컨텐츠의 크기와는 별개로padding과border의 영역까지 따로 생성되는 값입니다. 만약 이 상태값을 border-box로 설정한다면 컨텐츠의 크기 안에padding과border의 값이 포함되는 박스를 생성할 수 있습니다.가령
width와height가 100px인 컨텐츠를 생성했다고 칩시다. 이때 box-sizing을 따로 주지 않았다는 가정이라면padding이 20px,border가 5px인 상태로 생성을 하면 상하좌우 적용되는 속성 특성상 컨텐츠의 실제 크기는 100 + 40 + 10 = 150px이 됩니다.하지만
box-sizing을border-box로 설정해 주었다면 100px인 박스 안에padding과border까지 포함되도록 할 수 있다는 것이죠. 즉width와height의 영역 안에padding과border가 포함되어 있는 상태를 의미합니다.단 margin은 컨텐츠 끼리의 경계 영역을 의미하므로
box-sizing이 먹히지 않는다는걸 주의해야 합니다.
4. 컨텐츠의 겹침 여부에 대한 처리
또한 겹치는 콘텐츠 간에 특정 콘텐츠의 크기가 넘칠 경우 이 부분을 조절 할 수 있는
overflow속성또한 존재 하는데, 대표적으로 default 값인visible,hidden,scroll,auto가 존재합니다. 또한 이overflow에 x축과 y축을 네이밍(overflow-x,overflow-y) 하여 해당 방향으로 넘치는 자식 요소의 크기나 본인의 크기에 대한 속성들을 적용 할 수 있습니다.
visible: 자식 요소가 부모 요소보다 크기가 넘을 경우 그 보이는 크기에 대해서 숨기지 않는, 말 그대로 보이도록 하는 것을 의미합니다.
hidden:visible과 반대 개념으로 넘치는 영역을 숨깁니다.
scroll: 부모의 안쪽에 기본 크기값의 스크롤 바를 생성 후 해당 스크롤바를 조절 할시 자식 요소가 보이도록 합니다. 넘치는 자식 요소의 크기 방향과 반대 되는 방향에서도 스크롤바가 나타난다는 주의점이 있습니다.
auto:scroll을 자동적으로 생성하나 넘치는 자식 요소의 크기 방향에만 스크롤바가 생성 됩니다.
