Box Model

모든 html 요소는 웹 페이지에서 일정 공간을 차지합니다. 이러한 공간을 css 에서는 박스 모델로 정의하고 있습니다.
박스 모델은 content, padding, border, margin으로 구성되어 있다.

• content : 텍스트나 이미지가 들어있는 html 요소의 실제 내용을 말합니다.
• padding : content와 border 사이의 영역으로 쉽게 말해서 안쪽 여백을 말합니다.
• border : content 를 감싸는 테두리를 말합니다.
• margin : 요소의 바깥쪽 여백을 말합니다. 요소와 요소 사이의 공백이기도 합니다.

content

content영역의 가로와 세로의 크기를 변경할때는 width, height로 변경할수 있습니다.

• 인라인 레벨 요소에서는 width, height가 적용되지 않습니다 인라인 요소는 콘텐츠 만큼의 영역을 갖기 때문 입니다.
• 만약 인라인 레벨 요소에서 width, height 을 지정하고 싶다면 display의 값을 inline-block으로 변경하는 방법이 있다. inline-block은 요소는 line인데 내부는 block처럼 표현 됩니다.

padding

• html 요소의 안쪽 여백을 말합니다.
• padding-top, padding-bottom, padding-left, padding-right 속성을 사용하여 각각 지정할수도 있고 padding 속성으로 모든 방향을 지정할수도 있습니다.
• padding : 모든 면의 값
• padding : 위아래값, 좌우 값;
• padding : 위 값,좌우 값, 아래 값;
• padding : 위, 우, 아래, 좌 값;

margin

• html 요소의 바깥쪽 여백을 말한다.
• margin-top, margin-bottom, margin-left, margin-right 속성을 사용하여 각각 지정할수도 있고 margin 속성으로 모든 방향을 지정할수도 있습니다.
• padding 과 마찬가지로 값의 개수로 각 방향을 지정 할 수 있습니다.

border

• border, border-width, border-style, border-color 속성으로 요소의 테두리를 설정합니다.
• border-style : 테두리의 스타일을 지정 합니다.
  • 4개의 방향을 각각의 스타일로 지정할때는 top, right, bottom, left 순서로 시계방향으로 스타일을 지정 합니다.
  • border-style : 방향값;
  • border-style : top값, right값, bottom값, left값;
  • border-left-style : 방향값; 이렇게 하나의 방향 테두리만 설정하는것도 가능 합니다.
• border-width : 테두리 두께를 설정합니다.
  • 값으로는 실제 값 또는 thin, medium, thick를 사용할수 있습니다.
  • border-width : 전체 면의 두께 값;
  • border-width : 위아래, 좌우 두께 값;
  • border-width : 위, 우, 아래, 좌 두께 값;
  • border-left-width : 크기; 이렇게 하나의 방향의 테두리만 지정하는것도 가능 합니다.
• border-color : 테두리의 색을 지정 합니다.
• 사용 방식은 위의 style, width와 같습니다. 값으로만 색을 넣어주면 됩니다.
• border : width, style, color 를 한번에 지정 합니다.
  • border : width, style, color;
  • border-top, border-right, border-bottom, border-left을 사용하여 스타일을 각각 지정하는 것도 가능 합니다.
• border-radius : 테두리 꼭짓점을 둥글게 만들 때 사용합니다. 완전히 둥글게 만들고 싶으면 50% 를 값으로 지정하면 됩니다.

box sizing

box sizing 속성은 html 요소의 너비와 높이를 계산하는 방법을 지정합니다.
요소에 너비(width)와 높이(height)를 지정해주면 요소의 컨텐츠의 크기에 적용된다. padding , border 의 값은 요소의 width,height 의 값에 더해져 화면에 그려집니다.결론적으로 화면에 원하는 크기를 표현할려면 테두리리와 여백의 크기도 고려해야 합니다.
이떄 box-sizing 속성을 사용하면 크기를 설정하는 방식을 변경해 좀더 쉽게 화면에 원하는 크기를 표현할수 있습니다.

• content-box : 기본 값 입니다. 요소의 너비를 100px로 설정하면 콘텐츠 영역이 100px 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
• border-box : 테두리와 안쪽 여백도 요소의 크기로 고려하는 방법입니다. 너비를 100px로 설정하고 테두리와 안쪽 여백을 추가하면 콘텐츠의 영역이 줄어들고 요소의 전체 크기는 변경되지 않습니다. 이 방법을 사용하면 화면에 원하는 크기의 요소를 그리는데 어려움이 없습니다.