(CSS코딩일기) 박스모델 Box

박스 모델을 살펴보겠습니다.

쉬운 목차

1. 박스 모델

HTML/CSS의 요소는 기본적으로 boxed입니다. 외부에서 순서대로 외부 공간인 Margin, 테두리인 Border, 테두리와 실제 콘텐츠 사이의 공간인 Padding, 실제 콘텐츠를 포함하는 콘텐츠 상자가 있습니다.

주로 굵기, 테두리 종류, 색상 순으로 작성합니다. 예를 들어 다음 코드는 2픽셀 실선과 함께 밝은 회색 색상(#ededed)을 사용합니다.

테두리: 2px solid #ededed;

상자 모델의 모서리를 둥글게 만듭니다. Border 속성 없이도 사용할 수 있습니다. 아래 코드는 16px로 반올림합니다.

테두리 반경: 16px;

참고로 50% 반올림하면 타원이 되고 9999 픽셀 반올림하면 알약 모양이 됩니다.

요소에 크기를 할당할 때 해당 크기는 기본적으로 상자 모델의 콘텐츠 영역 크기입니다. 예를 들어 아래 #box 요소의 실제 너비는 100+30+30=160입니다.

#크레이트 {
테두리: 20px;
패딩: 30px;
너비: 100px;
}

보다 직관적으로 크기를 지정하고 싶다면 box-sizing 속성을 변경할 수 있습니다. 기본 콘텐츠 상자 대신 프레임 상자를 사용할 수 있습니다.

#크레이트 {
테두리: 20px;
패딩: 30px;
너비: 100px;
상자 크기: 테두리 상자;
}

이렇게 하면 테두리를 포함하여 영역이 100픽셀이 됩니다.

상자의 크기를 지정하면 안에 내용물이 많아서 가끔 튀어나와요. 이를 오버플로라고 하며 상자를 스크롤하거나 팝업을 숨길 수 있습니다.

오버플로 숨김;

오버플로: 자동;

오버플로: 스크롤;

겹치는 세로 테두리는 일반적으로 화면에 나타납니다. 테두리는 인접한 태그에 세로로 겹쳐 적용되며, 테두리는 부모 자식 관계가 있는 태그에 세로로 겹쳐서 적용됩니다. 이때 부모는 패딩이나 보더가 있으면 보더가 있다고 생각하고 보더를 세로로 겹치지 않는다.

#a와 #b의 여백을 추가하면 둘 사이의 여백은 30픽셀입니다.

ㅏ

비

#ㅏ {
테두리: 30px;
}
#B {
테두리: 20px;
}

#b 및 #c는 부모-자식 관계입니다. #b는 테두리가 없기 때문에 두 개의 테두리가 겹쳐져 위쪽 테두리가 40픽셀이 됩니다. 이 테두리 값을 인접한 #a와 겹치면 #a와 #b 사이의 테두리는 40픽셀입니다.

ㅏ

씨

비

#ㅏ {
테두리: 30px;
}
#B {
테두리: 20px;
}
#씨 {
테두리: 40px
;