CSS

CSS는 구조의 외부와 내부를 꾸미는 역할

박스

모든 컨텐츠는 각자의 영역이 있다.
CSS에서 박스란 하나의 컨텐츠로 묶이는 것을 의미한다.
(하나의 컨텐츠로 묶이는 엘리먼트 * n)

박스는 항상 직사각형이며 너비(width)와 높이(height)를 가진다.

박스의 종류

줄바꿈이 가능한 박스(block)

• block
  - 크기 지정이 가능하다. (width, height)
- 줄바꿈이 일어난다.
- 100%의 width가 기본값이다.

줄바꿈이 불가능한 박스(inline, inline-block)

• inline
  - 크기 지정이 가능하다. (width, height)
- 줄바꿈이 일어나지 않는다.
- 글자 분량만큼의 width를 갖는다.

• inline-block
  - 크기 지정이 불가능하다.
- 줄바꿈이 일어나지 않는다.
- 글자 분량만큼의 width를 갖는다.

Boder

border는 테두리에 위치한다.

• border의 값

border-width;
border-style;
border-color;
//등이 있다.
p {
  border: 1px solid red;
}
//*실선 코드
//개발과정에서 각 영역을 시각적으로 파악하기 위해 이용한다.

Margin

border를 기준으로 박스 외부의 여백을 지정한다.

p {
  margin: 10px;
}
//전체 크기 지정
p {
  margin: 10px 20px 30px 40px;
}
//크기 지정시 상, 하, 좌, 우 순으로 적용된다.
p {
  margin: 10px 20px;
}
//상하, 좌우 순서
p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
//각각 따로 지정도 가능하다.
//*음수 또한 지정할 수 있다.

Padding

border를 기준으로 박스 내부의 여백을 지정한다.

//지정 순서는 margin과 동일하다.
p {
  margin: 10px;
}
//전체 크기 지정
p {
  margin: 10px 20px 30px 40px;
}
//크기 지정시 상, 하, 좌, 우 순으로 적용된다.
p {
  margin: 10px 20px;
}
//상하, 좌우 순서
p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
//각각 따로 지정도 가능하다.
//*margin과 달리 음수는 지정 불가능

컨텐츠의 크기 > 박스의 크기

컨텐츠의 크기가 박스의 크기보다 큰 경우
컨텐츠가 박스 바깥으로 삐져 나온다.

p {
  height: 40px;
  overflow: auto;
}
//overflow 속성에 auto 값을 주면
//박스보다 컨텐츠가 큰 경우 스크롤이 생긴다.

• overflow의 값
  - hidden: 컨텐츠의 빠져 나가는 부분을 가려준다.
- auto: 박스보다 컨텐츠가 큰 경우 스크롤이 생긴다.

*overflow-x나 overflow-y를 지정해 가로, 세로 스크롤 지정도 가능하다.

박스의 크기 측정

박스의 크기를 측정할 때에는 여백까지 포함시킨다.

#container {
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

//  300px (콘텐츠 영역)
//+ 10px (padding-left)
//+ 10px (padding-right)
//+ 2px (border-left)
//+ 2px (border-right)
//  width = 324

*여백을 고려하지 않고 레이아웃을 디자인하면 혼란이 생길 수 있다.

* {
  box-sizing: border-box;
}
//문서 전체에 위 코드를 적용하면 여백과 테두리를 포함한 크기로 계산된다.

box-sizing: border-box;의 경우
일반적으로 모든 문서에 적용시킨다.
일부 요소만 적용할 경우 오히려 혼란을 가중시킨다.

• CSS 박스 모델을 이해할 수 있다
  box model
- width, height
- margin, padding, border
• 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.