2. CSS [bordering && Layout]

CSS layout model

---

이번 chapter에서는 html element에 boxing(테두리)을 하는 방법과 html layout을 다루는 CSS 속성들에 대해 배워 볼것이다.

1. CSS Box model

---

위 사진은 box model 의 예시인데 p태그안에 "Hello World" 라는 text를 넣고 CSS로  border(테두리)를 생성하고 처음보는 margin과 padding이 보인다.
margin이란 border를 기준으로 외부의 여백 , padding이란 border기준으로 내부의 여백이라고 할수 있다. (기준은 왼쪽 상단임)

if (  p { margin: 5px; } ) , 

와 같이 나타난다.






margin과 border 속성은 상->우->하->좌 순으로 값을 줄수 있다.
예를 들어  (margin: 1px 2px 3px 4px ) 이면 상-1px 우-2px 하-3px 좌-4px이다
그리고 margin과 border는 margin-top(padding-top) , margin-bottom , margin-left , margin-right와 같은 속성에 직접 값을 줄수 있다. (즉, margin-top은 하나의 property 이라고 보면된다. )
그래서 총 너비와 높이는 다음과 같다.
width = content width + L/R padding + L/R border + L/R margin
height = content height + T/B padding + T/B border + T/B margin

CSS property for border

---

selector { border : 5px dotted red;} 와 같이 선언 가능하다.
즉, border에 대한 색,크기,스타일을 정할수 있다.

위에서 margin(padding)과 같이 border도 상,하,좌,우로 정해서 값을 지정해줄수 있고 다음과 같이 여러가지 method가 있다.
만약 margin의 값이 2인 사각형 2개가 있는데 브라우저를 넘어가버리면 예를 들어 자동으로 margin값을 0.5씩 줄여 브라우저를 넘지못하도록 해서 (1.5+1.5)=3이 총 margin값이 된다.

CSS property for dimensions

---

위 와 같이 html element의 브라우저
내의 나타나는 너비와 높이를 설정가능하다.

예시는 다음과 같다.