반응형

MARGIN 2

html/css box-sizing 속성과 마진(margin) 겹침 현상

저번 시간에 박스모델에 대한 공부를 하면서 HTML 태그 요소들이 문서내에서 어떻게 배치되는지에 대해서 살펴보았다. 이를 결정하는 속성 다섯가지(width, height, padding, border, margin)에 대해 살펴보았었는데 오늘은 이 규칙의 기준을 바꿀 수 있는 box-sizing이라는 속성을 살펴보고, 더 나아가 태그 요소들 간에 margin이 어떻게 적용되는지에 대해서도 살펴보겠다.저번 시간에 이어서 매우 중요한 내용이므로 반드시 이해하고 넘어가야 한다.box-sizing 속성박스모델에서 태그 요소들을 둘러싼 4개의 층으로 된 박스들은 앞에서 언급한 5가지 속성에 의해서 결정된다. 그 중 width와 height 속성은 가장 안쪽에 있는 내용(content)의 가로와 세로 사이즈를 결정..

[html/css] 박스모델 (width, height, padding, border, margin 속성)

박스모델은 웹 페이지를 만드는데 있어 기본 중에 기본이라고 할만큼 중요한 내용이다. 그럼에도 소홀해지기 쉬운 내용인데 제대로 이해하고 있지 못하면 웹페이지의 레이아웃을 설계하다 문제가 발생했을 시에 원인 파악이 힘들어질 수 있다.박스모델은 html 요소(element)들이 문서 내의 공간을 차지하는 부피에 관한 규칙이다. 차지하는 모양이 네모 박스(box) 모양이라서 박스모델이라고 한다.태그(tag)들은 내용(content)를 감싸고 있고 내용은 문자 또는 이미지 등이 있으며 문서에서 일정한 부피를 박스모양으로 차지한다. 그리고 내용들 간에 간격이 정해지는지는 방식도 존재한다. 이제부터 하나씩 알아가보자.박스모델그림은 html 코드와 브라우저에서 코드를 실행한 모습이다. div 태그에 css 스타일로 5..

반응형