박스모델 구성요소
- content: 텍스트와 이미지가 나타나는 내용의 부분으로
width, height 등의 속성을 통해 크기를 조절한다 - padding: content주위에 있는 빈 공간으로 content와 border 사이의 간격을 뜻한다
- border: content, padding을 감싼 테두리를 뜻하며 두께와 색을 조절 가능하다
- margin:가장 바깥쪽 영역으로 이 상자와 다른 요소 사이의 거리를 조절한다
예시)
.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}위와 같은 css코드에서 box가 실제로 차지하는 공간은
가로 (350+25+25+5+5) 410, 세로 (150+25+25+5+5) 210 이다
상자의 영역은 테두리까지만 적용되며
여백은 상자의 실제 크기에 포함되지 않는다.
Block, Inline
display 속성이란 요소를 어떻게 배치하고 보여줄지를 결정하는 것, display의 속성값으로는 대표적으로 none, block, inline, inline-block이 있다
그중에서 Block, Inline의 차이를 설명하겠습니다
-
Block 요소
: 전체 칸을 사용하는 태그로는 div, p, h1 등이 있다
: 부모요소의 전체 공간을 차지하여 블록을 만든다, 한줄을 전체 차지함
: 기본적으로 새로운 줄에서 실행을 한다
: 너비, 높이, 상하 margin이나 padding의 크기를 지정할 수 있다 -
Inline 요소
: 글자 있는 부분만 공간을 차지하는 태그로는 a, span, em 등이 있다
: 요소를 구성하는 태그에 할당된 공간만을 차지한다
: 새로운 줄을 만들지 않는다
: margin, padding 속성은 좌우간격만 반영되며 상하간격은 반영되지 않는다
box-sizing
box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다
content-box:
1. 지정을 따로 해주지 않으면 기본값으로 content-box가 설정된다
2. 요소의 width, height 속성은 콘텐츠 영역의 크기를 나타낸다
3. 너비가 100px이라면 content영역이 100px을 가지고
padding, border가 요소의 겉에 더해져 요소의 총 크기를 정한다
예시
width: 100px;
padding: 10px;
border: 5px;
인 요소의 실제 너비는 100+10+10+5+5= 130px이다
border-box:
1. 요소의 width, height 속성이 padding, border의 크기를 포함한 전체 크기를 나타낸다
2. padding, border 속성을 추가하게 되면 콘텐츠의 크기는 작아지며 일정한 크기를 유지하게 된다
예시
width: 100px;
padding: 10px;
border: 5px;
인 콘텐츠 영역의 너비는 100-10-10-5-5=70px이다
