0. Box Model 박스 모델

모든 HTML 요소는 Box(사각형) 형태의 영역을 가지고 있으며,

이 Box는 안쪽부터 Content, Padding, Border, Margin 으로 구성된다는 CSS의 디자인 모델을 박스 모델이라고 한다.

박스 모델의 관점에서 웹디자인은 콘텐츠를 담을 박스 모델을 정의하고, CSS프로퍼티를 통해 스타일과 위치 및 정렬을 지정하는 것이라고 정의할 수 있다.

1. width/height 프로퍼티

• 요소의 너비와 높이를 지정하기 위해 사용된다.

  • 값을 지정할때는 보통 앞서 배운 크기 단위 값을 사용해준다.

• box-sizing 프로퍼티의 기본값이 content-box이기 때문에 width와 height로 지정되는 기본 너비와 높이는 content 영역만을(padding도 제외) 대상으로 한다.

  • 전체 박스를 대상으로 하려면 box-sizing: border-box;를 해주면 된다.

    ⇒ 그렇게 하면 padding과 border까지 포함된 크기를 기준으로 너비와 높이를 정할 수 있다. (margin은 제외)

• 만약 width와 height로 지정된 content영역보다 실제 content가 크면 넘치게 된다.

  • overflow:hidden; 등으로 넘친부분을 감출 수 있다.

• width와 height 프로퍼티의 default value는 auto이다.

2. margin/padding 프로퍼티

• margin / padding 프로퍼티는 content의 4개 방향(top, right, bottom, left)에 대하여 지정이 가능하다.
  • 위쪽부터 시작해서 시계방향.
  • margin-top 같은 식으로 각각 지정할 수도 있지만,
  • margin이나 padding 1개 프로퍼티만으로도 네방향을 모두 한번에 지정할 수 있다.

• margin: 0 auto;

  ⇒ 상하는 0, 좌우는 자동, 즉 가로로 중앙에 위치시켜주는 코드다.

• max-width, min-width 프로퍼티도 있다.

3. border 프로퍼티

3.1 border-style