본문 바로가기

BOX

[CSS] margin collapsing (마진 상쇄) 안녕하세요.이번 포스팅은 margin collapsing (마진 상쇄) 현상에 대해서 알아 보도록 하겠습니다. 또는 마진 겹침 현상이라고도 합니다. 박스 모델을 구현할 때 마진겹침현상 때문에 애먹으신적이 종종 있으실 겁니다.그런데 이 현상이 어떤 경우에 일어나는지 아시면 적어도 답답함은 조금 줄어들지 않을까 생각 됩니다.그래서 어떤 경우에 마진겹침현상이 일어나는지 알아 보도록 하겠습니다. 인접한 두 박스의 마진 방향이 겹칠 경우 .box1 { border: orangered solid 1px; } .box2 { border: purple solid 1px; } div { margin: 20px; } 안녕하세요 margin collapsing test 위 이미지를 보면 뭔가이상한 점이 느껴지시지 않습니까?.. 더보기
[CSS] box model과 box-sizing 안녕하세요. 이번 포스팅은 css의 Box model 개념에 대해서 알아 보도록 하겠습니다. HTML의 모든 요소(element)들은 사각형의 박스 형태로 표시되는데 이 박스는 margin, padding, border, content로 구성 되며 이것들이 합쳐져 너비(width), 높이(height)를 결정한다. 즉, 박스의 크기를 결정하고 박스 모델을 만들게 됩니다. 위에 보이는 것과 같이 구성 됩니다. 그럼 박스를 구성하는 구성요소에 대해서 하나씩 알아보죠. contentcontent는 말 그대로 실제 내용을 포함하는 영역입니다. 그리고 content는 width, height, min-width, max-width, min-height, max-height 를 가지고 크기를 지정하고 제어 할 수 .. 더보기