도서 생활코딩 HTML+CSS+자바스크립트 - <border, padding, margin>

CSS를 하며 항상 헷갈렸던 것 중 하나가 border, padding, margin 3가지다. 사실 차분히 읽고 따라해보면 아무것도 아닌데 대충하고 넘어가는 습관이 문제가 되었던 것 같다. 아마 앞으로도 헷갈리겠지만 그래도 정리를 해보픈 마음에 여기에 적어 본다.
티스토리지만 네이버에서 사전을 찾아 보니 border는 경계, padding은.. 충전재..그 고딩들의 패딩?? 직딩들의 패딩조끼의 패딩?? 이 나왔고 margin은 여백이 나왔다. 호 뭔가 뜻을 찾아보니 모든 것이 이해되는 느낌적인 느낌이지만, 한 번 확인해보자.

<border>
우선 border다. border의 경우 태그를 적용 시 해당 태그가 차지하는 범위의 테두리라고 보면 된다. 책에서는 border의 예시로 h1을 들고 있다. 위와 같이 입력 시 화면에는 다음과 같이 표시가 된다. 

자. 룰루와 랄라를 둘러싸고 있는 빨간색 테두리다 있다. 저게 border다. <h1>룰루</h1>, <h2>룰루</h2>를 둘러싸고 있는 각각의 border가 있다고 보면 된다. border를 red에서 blue로 바꿔주면 다음과 같이 된다.

 

<padding>
다음은 padding이다. padding은 룰루와 랄라 글자와 테두리의 거리라고 생각하면 된다. 만약 padding: 20px;를 0px;로 바꿔주면 다음과 같이 화면에 나타난다.

테두리와 글자 사이의 거리가 사라졌다. 20px에서 0px로 바뀐 것이다. 난 테두리 안쪽에 있는 내용과 테두리의 관계 정도로 padding을 이해했다.

<margin>
생각해보면 난 padding하고 margin을 헷갈려했던 것 같다.  padding이 테두리와 내용 간의 관계라면 margin은 테두리 바깥의 문제다. 테두리 바깥으로 어느정도 영역을 차지할지. 위에서 margin을 20px에서 0px로 바꾸면 다음과 같이 된다. 

<h1>룰루</h1>, <h2>룰루</h2>의 테두리 바깥 공간이 사라져서 두 개가 붙어버렸다. 그렇다면 여기에서 추가로 궁금해지는 것이 있다. 기본형에서는 border가 5px, 나머지 padding, margin이 20px로 설정이 되어 있다. border의 두께가 20px를 초과하면 어떻게 될까. 즉, padding과 margin의 설정 20px보다 크면 어떻게 될지 보고싶다. 한 번 해보자. boder: 5px를 100px로 변경해보자.

<border: 100px>

룰2는 오타다. 아무튼 border두께를 먼저 적용하고 그 후 padding과 margin의 각자 공간을 확보해주는 것을 알 수 있다. 이제 헷갈리지 말자. 끗.