일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- pep8
- word
- js
- 인증서
- Callback
- wsgi란
- https
- gunicorn
- wsgi
- 만료
- letsencrypt
- padding
- javascript
- toolkit
- 2010 micro office
- Margin
- 갱신
- instance method
- 제품 키
- div
- jquery
- Micro
- uwsgi
- 해제
- microsoft office 2010 정품인증
- Python
- jjquery
- class method
- border
- disabled
- Today
- 52
- Total
- 125,231
jadehan
border, padding ,margin의 개념 정의 본문
많은 분들이 CSS를 처음 시작하실 때 겪는 어려움은 바로 div 영역에 대한 이해 때문이라고 생각합니다!
이번 포스팅에는 div에 존재하는 margin / border/ padding에 대해서 써보도록 하겠습니다.
div속성을 이해하는데에는 이만한 그림이 없는 것 같습니다.
margin과 border 사이에 존재하는 실선이 실질적으로
div와 외부를 나누는 경계를 의미하고
그 속으로 border, padding 그리고 컨텐츠가 존재합니다.
우선 margin부터 설명드리자면 div 겉에 있는 영역의 크기를 말합니다.
쉽게 말해 div와 div 사이의 간격을 나타낸다고 볼 수 있겠네요 ^^
1번 div 2번 div |
margin값이 0 일때 1번과 2번의 거리 |
1번 div 2번 div |
margin-right값이 5px 일때 1번과 2번의 거리 |
위의 그림에서 볼 수 있듯이 margin 값은 div와 div간의 간격을 주고 싶을 때
쓴다고 볼 수 있습니다.
그렇다면!
border 값은 도데체 언제 쓰는 것이란 말인가?!
border값은 쉽게 말해서 div 영역을 표현하는 선의 두께를 말합니다.
1번 div 2번 div |
border값이 1px 일때 |
1번 div 2번 div |
border값이 5px 일때 |
차이가 확연히 드러나죠?
이처럼 border 값은 div하나를 감싸는 선의 두께를 나타낼때 씁니다.
물론 0을 줄 경우 선이 없어지겠죠? ^^
그럼 이제 마지막으로!!!
padding에 대해서 알려드리겠습니다!
padding은 div속의 컨텐츠가 div 경계에서 얼마나 떨어져서 노출되는지를
설정할때 씁니다.
설명이 좀 어렵죠;? 죄송합니다 ㅠㅠ
1번 div 2번 div |
padding값이 0 일때 |
1번 div 2번 div |
padding값이 15px 일때 |
차이가 좀 보이시나요? 여기서 주의하셔야 할 점은
padding의 값은 div틀 안에서 문자를 padding값 만큼 밀어내는게 아니라
본래 div값에서 padding 값만큼 div경계를 밀어낸다는 사실!!
잊지말아야 할 사실입니다!!
여기까지 margin, border, padding의 차이를
알려드렸습니다.
paphopu였습니다
감사합니다 ^^
'IT > Front-end' 카테고리의 다른 글
Javascript, jQuery를 이용해 button에 disable 속성 해제, 적용 (0) | 2016.10.31 |
---|---|
for 문으로 받은 button을 js에서 기능구현하기 (0) | 2016.08.18 |
border, padding ,margin의 개념 정의 (0) | 2016.03.01 |