(1) Box Model
Box Model 이란 ?
HTML의 모든 요소는 CSS로 표현될 때 하나의 박스로 취급된다.
이 박스는 일정한 구조를 가지며, 이를 Box Model이라고 한다.
Box Model의 구성 요소
① Content
content가 들어있는 상자이다.
가로 : width
세로 : height
② Padding
content와 border 사이의 공간이다.
padding: 10px 20px 30px 40px;- top → right → bottom → left
순서는 시계 방향이다.
padding: 10px 20px;- 첫 번째 값 : top / bottom
- 두 번째 값 : right / left
값을 생략하면 대칭 구조로 자동 적용된다.
③ Border
요소의 테두리이다.
border: 1px solid #000;border 는 반드시 굵기 / 스타일 / 색상을 함께 지정해야 한다.
- 테두리의 모서리 둥글게
border-radius: 4px;
<!-- 모서리별로 지정 가능 -->
border-top-left-radius: 8px;④ Margin
요소와 요소 사이의 간격을 조절하는 바깥 여백이다.
(2) Box Sizing
box-sizing 이란 ?
box-sizing 은 width / height를 "어느 영역까지의 크기"로 계산할지 정하는 속성이다.
즉, width: 300px; 을 줬을 때
가로 300px가 content만 300인지 / border까지 포함해서 300인지가 달라진다.
① 기본값: content-box
<!-- 기본값 설정 -->
box-sizing: content-box;width,height가 content 영역에만 적용된다는 뜻이다.padding과border가 추가되면 실제 박스 크기는 더 커진다.
예를 들어,
Hello CSS가 적혀 있는 크기가 300px인 정사각형을 만들어보자.
width: 300px, height: 300px을 줬을 때
padding-top: 40px, padding-left: 50px추가했을 때
→ padding 을 추가하니 실제 박스 크기는 더 커져
300x300 크기의 정사각형이 아닌 350x340 크기의 직사각형이 되었다.
② border-box
* {
box-sizing: border-box;
}이 설정을 하면
width 와 height 에 content + padding + border 까지 모두 포함된다.
즉, padding / border에 값을 넣어도
전체 박스 크기는 유지되고 content 영역이 줄어든다.
(3) Box Type
display 속성은
요소가 어떤 Box type으로 동작할지를 결정한다.
① block
display: block; 는 한 줄을 블록처럼 길막하는 요소이다.
width/height/padding/border/margin 을 자유롭게 사용할 수 있어 레이아웃을 잡는 기본 단위로 많이 쓰인다.
1000px 공간에 400px 박스가 2개 있다면
당연히 남은 공간에 들어갈 수 있다고 생각하겠지만..
block 은 한 줄을 혼자 쓰고, 다음 요소는 무조건 다음 줄로 내려간다.
- 따로 width를 선언하지 않은 경우
block 요소는 기본적으로 width: auto 상태인데,
block 에서는 보통 부모의 content-box 너비의 100% 로 계산된다.
- 따로 width를 선언한 경우
block 은 “한 줄 전체를 차지”하려는 성질이 있어서
남은 공간이 있더라도 다른 요소가 올라오지 못하게 한다.
★ margin: 0 auto;
margin-top/botton 은 0으로
margin-left/right는 auto로
→ width 가 있는 block 요소에서 좌우 여백을 자동으로 동일하게 분배해 가운데 정렬을 만든다.
★ 따로 부모의 height를 선언하지 않을 경우
부모에 height 를 안 주면 부모의 높이는 자식이 차지하는 높이에 맞춰 자동으로 늘어난다.
부모의 height = 자식 요소의 height의 합
② inline
display: inline; 은 문장처럼 같은 줄에서 옆으로 흐르게 만드는 요소이다.
만약 새로운 inline 요소가 들어오려고 하는데, 공간이 충분하지 않으면
줄바꿈을 하고 새로운 흐름을 만든다.
예시
span 에
padding-left: 50px;
padding-right: 100px;을 적용하면 흐름을 방해하지 않는다.
하지만 여기에
padding-top: 40px;을 적용하면 ?
위와 같이, 글자들을 밀어내는 것이 아니라 덮어버리게 된다.
또한 위아래 margin을 적용하면 아무런 변화가 생기지 않는다.
적용이 안되는 속성들
width / height / padding-top / padding-bottom / border-top / border-bottom / margin-top / margin-bottom
③ inline-block
display: inline-block; 은 block과 inline의 장점만 섞인 요소이다.
block 의 경우 길막의 성질 때문에 좌우로 다루기가 힘들고,
inline 의 경우 흐르는 성질 때문에 위/아래 적용을 할 수가 없었다.
하지만
inline-block 은 기본적으로 inline 처럼 옆으로 흐르면서,
block 처럼 박스 속성을 제대로 쓸 수 있다.
예시
padding-right: 100px;
padding-left: 50px;
padding-top: 40px;
padding-bottom: 20px;
display:inline-block;
