- box-sizing : border-box, padding-box, content-box, margin-box
- margin, padding, border + margin collapsing,
- display : block, inline,inline-block
1. box-sizing
box-sizing 속성은 박스의 크기에 대한 기준을 정합니다.box-sizing이 content-box일 때,
.box { box-sizing: content-box; width: 300px; height: 200px; padding: 20px; border: 5px solid black; margin: 15px; }
box-sizing: content-box (기본값). 박스의 크기를 컨텐츠의 크기만큼 설정합니다.
width: 300px; height: 200px; padding: 20px; border: 5px; soild black; margin: 15px;
box-sizing이 border-box일 때,
.box { box-sizing: border-box /* border까지 width에 포함 */ width: 300px; height: 200px; padding: 20px; border: 5px solid black; margin: 15px; }
box-sizing: border-box. 박스의 크기를 컨텐츠의 border 값 만큼 설정합니다.
width: 300px; height: 200px; padding: 20px; border: 5px; soild black; margin: 15px;
<!DOCTYPE html> <html> <head> <title>Document</title> <style> h1{ border: 1px solid black; padding: 2px 10px 20px 40px; margin:20px } </style> </head> <body> <h1>hello world</h1> </body> </html>
2. display
display 속성은 박스의 성질을 지정하여 요소를 어떻게 보여줄지 결정합니다.- inline : 줄바꿈이 되지 않고, width와 height, margin-top, margin-bottom 값을 지정할 수 없습니다.
- block : width, height, margin, padding 등 모든 값을 지정할 수 있으며, 항상 줄바꿈이 일어납니다.
- inline-block : inline 처럼 한 줄에 여러 요소가 존재할수 있습니다. block 처럼 width, height, margin, padding 등 모든 값을 지정할 수 있습니다. inline 속성의 특징과 block 속성의 특징이 함께 존재합니다.
- contents : 선택한 요소의 내용 앞이나 뒤에 콘텐츠를 붙입니다.
- flex : 레이아웃을 다룰 때 하나의 행 또는 열을 다룹니다. (1차원 레이아웃)
- grid : 2차원 레이아웃을 설정하는데 사용합니다.
