[CSS] Box

Box Model

html의 모든 요소는 box로 표현됩니다.

 

box는

margin, border, padding, content (파란색)로 이루어져 있습니다.

 

 

margin: 바깥 여백, 요소와 요소 사이의 간격

border: 테두리

• 굵기, 색, 스타일을 명시해줘야 만들어집니다.
• border: 1px solid  #000;
• border: none;
• border-radius: 4px  => 모서리가 둥글어집니다. 50%와 같이 쓸 수도 있습니다.

padding: 안쪽 여백, content와 border 사이의 공간

content: 내용이 들어가는 공간, 가로는 width, 세로는 height

 

속기형: 위쪽부터 시계방향으로. top right bottom left

 

 

 

Box Sizing

기본적으로 html의 모든 요소는 

box-sizing: content-box

로 설정되어 있습니다.

width와 height를 설정하면 content의 크기만 설정된다는 뜻인데, 이렇게 되면 우리가 원하는 크기의 box 전체 크기를 만들기 위해서 직접 픽셀을 계산하며 만들어줘야 합니다.

# ex) 높이 100px 넓이 100px의 box를 만들기
.box{
	width: 98px;
    height: 98px;
    padding: 1px;
    border: 1px solid #000;
}

 

이는 너무 불편하기 때문에 아래와 같이 선언해주면 border까지 포함된 크기로 계산이 됩니다.

* {
	box-sizing: border-box;
}

.box{
	height: 100px;
    width: 100px;
}

 

 

 

 

Box

박스의 타입에 따라 Box Model도 달라집니다.

크게 block, inline, inline box, flex 네 가지가 있습니다.

display: 박스타입

와 같이 적어줘서 박스의 타입을 정해줄 수 있습니다.

 

 

 

Block

.box{
	display: block;
}

블록은 '길막'의 특징을 갖고 있습니다.

남은 공간이 충분하더라도 '길막'을 하여 다음 block이 다음 줄로 밀려납니다.

 

 

 

따로 width를 선언하지 않은 경우, 부모 content-box width의 100%로 설정됩니다.

따로 width를 선언한 경우, 자동으로 남은 공간을 margin으로 채웁니다.

box model에서 사용한 모든 것들(width, height, padding, border, margin)이 사용 가능합니다.

 

따로 부모의 height를 선언하지 않은 경우, 자식 요소의 height 합이 부모의 height가 됩니다.

 

 

Inline

.box{
	display: inline;
}

inline은 흐르는 특성을 갖고 있습니다.

옆으로 쭉쭉 흐르는 특성이 있어 공간이 없으면 자동으로 줄바꿈을 합니다.

inline은 자동 줄바꿈을 합니다.

 

inline의 한 줄 흐름을 부수는 다음과 같은 친구들은 사용이 불가능합니다.

width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom

사용하더라도 다른 inline 요소에게 영향이 없는 것을 볼 수 있습니다.

 

 

 

Inline block

.box{
	display: inline-block;
}

block과 inline의 혼종입니다.

block처럼 영역을 잡을 수 있고

inline처럼 흐르는 성질도 갖고 있습니다.