본문 바로가기

CSS

[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 를 가지고 크기를 지정하고 제어 할 수 .. 더보기
[CSS] display - block과 inline 그리고 inline-block 안녕하세요. 오늘은 display porperty에 대해서 알아 보겠습니다. 그 중에서 inline과 block 그리고 inline-block에 대해서 알아보겠습니다. 먼저 display property에서 간단히 설명하면 display는 화면이 렌더링 되었을때 어떠한 특정 영역이 표시 되는데 성질을 부여하는 property입니다. 그 중 가장 많이 사용 되는 inline과 block 성질(display property의 값)입니다. 우선, html의 태그들은 크게 block 요소와 inline 요소로 나눌 수 있다. block 요소, , , , , , , , , , ,, , , , , , , , , , , block 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다... 더보기