CSS Box Model

이번에는 css 박스 모델에 대해 알아보자. 박스 모델이란게 도대체 무엇일까???

HTML의 대부분의 구성요소들은 모두 박스 형태이다.

저번 포스팅에서 배경색을 바꾸니 박스형태로 설정이 된거.. 봤죠?

이런식으로..

 

 

CSS는 이 박스에 대한 이해만 잘해도 반이상 먹고 가는거라고 한다.

위 예제는 아무 설정도 하지 않은 박스다.

CSS에서는 이 박스단위로 여러가지 스타일 지정을 한다. 그래서 중요하지.

사진을 담는 액자와 비슷한 개념이라고 생각하면 될 것이다.

그 액자는 크기가 조정도 되고 위치를 옮길 수 도 있다. 테두리를 칠 수도 있고

액자 안에 넣는 그림, 문자 등은 사용자 임의로 자유롭게 설정할 수 있다.

 

w3schools에서 따온 그림을 함 보자.

 

 

딱보면 뭔지 느낌이 오지 않는가.

Margin : 경계선 밖의 여백이다.

Border : 뜻 그대로 경계선. 테두리

Padding : 내용과 경계 사이의 여백이다. 

Content : 내용물임.

 

이녀석들을 원하는 값으로 설정함으로써 CSS 박스 모델을 사용자 임의로 설정이 가능한 것이다.

예제 소스를 한번 보겠음.

 

 

앞서 설명했던 속성들이 <style> 테그 속에 설정되어 있는 것을 볼 수 있다.

width는 폭, height는 높이이다. 가로 세로 길이를 나타냄.

코드를 실행시킨 html 화면을 보면 좀더 빠르게 이해할 수 있다.

 

margin, width, height 값을 보며 어떤식으로 박스 모델이 적용 되는지 알 수 있음.

참고로 margin은 가로세로 한번에 여백을 만들어 준다.

 

참고 URL : http://www.w3schools.com/css/css_boxmodel.asp