HTML box model

위 그림이 html의 박스모델로 모든 html요소들에 적용된다. 주황색 부분이 margin 바로 안쪽 선이 border 그 안쪽 초록색 부분이 padding 그 안쪽 파란색부분, margin 배우기라는 텍스트가 있는 부분이 내가 넣는 내용이 들어가는 부분이다.

공부하면서 html파일을 작성하다보면 가끔 내가 넣는 내용들이 원하지 않는 부분에 배치되는 경우가 있던데 이 모델을 이용해 앞전에 올렸던 내용의 inline, block성질을 조정하고 margin과 padding 값을 조정하면 내가 원하는 위치에 내용을 배치시킬 수 있다.

margin과 padding을 css에 적용시키는 문법은

• margin: 50px;
• padding: 50px;

이렇게 넣으면 되는데 저렇게 그냥 넣으면 상하좌우 전부 50px의 마진값이 적용된다. 만약 특정 방향의 margin이나 padding값을 바꾸고 싶다면

• margin: 30px 40px 50px 60px;
• padding: 30px 40px 50px 60px;
• margin-top:, margin-bottom:,margin-left:,margin-right:
• padding-top:, padding-bottom:,padding-left:, padding-right:

왼쪽부터 위, 오른쪽, 아래, 왼쪽 값이 된다. 그냥 시계방향으로 값을 준다고 생각하면 될 듯 하다. 그 아래와 같이 top bottom left right들을 통해서 한 방향만 주는것도 가능하다. 참고로 (margin: 0 auto;) 이렇게 하면 컨텐츠 가운데로 보내기 가능.

border의 문법은 조금 다르다. 이렇게 만들면 되는데 예를 들어 써보면

• border: 1px solid black;
• border-top, border-bottom, border-right, border-left

이렇게 된다. border도 margin이나 padding과 같이 top bottom left right을 정해서 한쪽만 만드는 것도 가능하다. border는 underline에 비해 스타일 값을 줘서 선의 색깔, 형태, 두께 등이 적용된 다양한 스타일의 선을 만들 수 있기 때문에 border-bottom을 이용해 원하는 밑줄을 만들 때 쓰기도 하고 구역을 나눌 때 쓰기도 한다.