[CSS] 박스 모델
HTML/CSS에서 요소는 기본적으로 박스 형태이다. margin(바깥여백)-border(테두리)-padding(안쪽여백)-content(내용)으로 이루어져 있다.
#test{
margin: 30px;
padding: 50px;
width: 150px;
}test의 너비는 어떻게 될까? 우리는 150px이라 생각하고 만들었을 것이다. 하지만 width는 content의 width로 취급되어 박스 너비는 50 + 50 + 150 = 250px이 된다. 이 경우 우리는 박스 크기를 하나하나 생각하기 힘들 것이다. 해결하기 위해서는 아래 요소를 넣으면 된다.
box-sizing: border-box;다음 요소를 넣으면 content 기준으로 width를 잡는 게 아닌 border-box 기준으로 잡아준다.
overflow: 기능;
white-space: nowrap;overflow는 content가 박스를 초과할 때 어떻게 할 지 정하는 태그이다.
기능 : hidden(넘치는 content를 보이지 않게 한다.) , auto(넘치면 스크롤하게 만든다.), scroll(항상 스크롤하게 만든다.)
white-space: nowrap;은 가로로 스크롤할 수 있게 만들어 준다.
CSS를 쓸 때 margin은 생각을 잘해야한다. 왜냐하면 margin은 margin 상쇄라는 것이 있기 때문이다.
다음과 같이 박스가 있을 때 붙이면 어떻게 될까? 그냥 붙을 거라 생각하지만 실제로는 마진 상쇄가 일어나 아래와 같게 된다.
마진상쇄가 일어나서 두 박스 중 큰 값만 적용이 된다. 이는 부모 박스와 자식 박스에도 일어난다. 하지만 부모태그가 padding이나 border가 있을 경우에는 일어나지 않는다.