jadehan

많은 분들이 CSS를 처음 시작하실 때 겪는 어려움은 바로 div 영역에 대한 이해 때문이라고 생각합니다!

이번 포스팅에는 div에 존재하는 margin / border/ padding에 대해서 써보도록 하겠습니다.

div속성을 이해하는데에는 이만한 그림이 없는 것 같습니다.

margin과 border 사이에 존재하는 실선이 실질적으로

div와 외부를 나누는 경계를 의미하고

그 속으로 border, padding 그리고 컨텐츠가 존재합니다.

우선 margin부터 설명드리자면 div 겉에 있는 영역의 크기를 말합니다.

쉽게 말해 div와 div 사이의 간격을 나타낸다고 볼 수 있겠네요 ^^

위의 그림에서 볼 수 있듯이 margin 값은 div와 div간의 간격을 주고 싶을 때

쓴다고 볼 수 있습니다. 

그렇다면!

border 값은 도데체 언제 쓰는 것이란 말인가?!

border값은 쉽게 말해서 div 영역을 표현하는 선의 두께를 말합니다.

차이가 확연히 드러나죠?

이처럼 border 값은 div하나를 감싸는 선의 두께를 나타낼때 씁니다.

물론 0을 줄 경우 선이 없어지겠죠? ^^

그럼 이제 마지막으로!!!

padding에 대해서 알려드리겠습니다!

padding은 div속의 컨텐츠가 div 경계에서 얼마나 떨어져서 노출되는지를

설정할때 씁니다.

설명이 좀 어렵죠;? 죄송합니다 ㅠㅠ

차이가 좀 보이시나요? 여기서 주의하셔야 할 점은 

 padding의 값은 div틀 안에서 문자를 padding값 만큼 밀어내는게 아니라 

 본래 div값에서 padding 값만큼 div경계를 밀어낸다는 사실!!

잊지말아야 할 사실입니다!!

여기까지 margin, border, padding의 차이를

알려드렸습니다.

paphopu였습니다

감사합니다 ^^