[개요] CSS에서 width와 height를 계산하는 방법은 꽤 독특합니다. width:200px 이고 height:100px, padding:20px, border:5px solid black 인 요소는 화면상에 어떻게 나타날까요? 아래 사진 중에 왼쪽처럼 계산 될까요? 아니면 오른쪽처럼 계산될까요? [content-box] 결론부터 이야기하자면 기본적으로 오른쪽처럼 그려지게 됩니다. width를 200px로 설정했다고 할지라도 전체 너비가 200px이 되는 것이 아닌, 여기에 padding과 border-width가 더해져서 그려지게 됩니다. 이는 계산 방법을 content-box라고 하며, box-sizing 속성을 content-box로 주게 되면 이와 같이 계산하게 됩니다. 기본적으로 CSS에..