인라인과 블럭레벨

• 화면 한 라인 전체를 모두 차지하는 태그를 블럭 레벨 엘리먼트

화면 라인 일부분을 차지하는 태그를 인라인 태그라고 한다.

css속성 display로 inline과 block을 임의로 설정할 수 있다.

박스 모델

• border 태두리를 기준으로 안쪽 간격은 padding 속성으로 조절하고 밖 간격은 margin 속성으로 조절한다.
• 블럭레벨에서 화면 전체를 사용하고 싶지 않으면 width값을 사용할 수 있다.
• 인라인레벨에서는 마진과 패딩이 적용됐지만 width와 height값은 적용되지 않는다.

박스 사이징

• width , height 값은 border 내부의 크기다.

border포함 전체크기를 예측하기 어렵다

• 대안: box-sizing:content-box → box-sizing:border-box