박스(보더)주변을 디자인할 수 있다.

1. 영역

: 콘텐트에 박스형 영역을 부여하여 디자인을 입힐 수 있다.

• Width and height : 콘텐트 영역의 너비와 높이를 지정
• min, max : 최대 높이 최대 너비를 설정할 수 있다.(ex: min-width)

2. border

: 테두리를 꾸며주는 속성이다.

p {
  border: 3px solid coral;
}

<!--테두리 두께가 3픽셀, 스타일은 solid, 색상은 coral이 된다. 모두 한줄에 표현 가능-->

• width : thin, medium, thick 또는 픽셀 단위로 설정할 수 있다.
• style : none, solid, dotted, hidden, dashed, solid, double, groove, ridge, inset, outset
• color : 색깔을 넣을 수 있다. rgb코드로도 가능하다.

p {
  border: 3px solid coral;
  border-radius: 15px
}
<!--테두리 라운딩 처리-->

• radius : 네모난 테두리를 둥글게 만들 수 있다.
• radius 크기는 픽셀 또는 퍼센트로 조절할 수 있다.

3. padding

: 패딩은 내가 만든 콘테이너 라인 안쪽에 여백을 줄 수 있다.

.border {
  padding: 6px 11px 4px 9px;
}

• 위의 4개의 픽셀 값은 위부터 시계방향으로의 패딩 값이다.

.border {
  padding: 10px 20px
}

• 위의 2개의 픽셀 값은 위와 아래는 10px, 왼쪽 오른쪽은 20px이 된다.
• padding-top, padding-left 등의 한방향에도 값을 줄 수 있다.
• 물론 퍼센트나vh 등의 값으로 표현해줄 수도 있다.

4. margin

: 마진은 내가 만든 콘테이너 라인의 바깥쪽에 여백을 줄 수 있다.
사용방법은 패딩과 동일하다.

1) margin Auto

div.headline {
  width: 400px;
  margin: 0 auto;
}

• 0픽셀을 제외하고 나머지를 중앙으로 정렬한다.
• 중앙 정렬을 위해 주로 사용된다.

5. overflow

: 박스의 크기보다 더 큰 컨텐츠가 들어올 경우 처리할 방법을 설정한다.

p {
  overflow: scroll; 
}

• hidden : 넘친 부분을 보이지 않게 숨긴다.(기본 설정일 경우 오른쪽과 아랫 부분이 잘린다.)
• scroll : 스크롤바가 생긴다.
• visible : 이것이 기본값이고, 이것으로 설정하면 외부에 표시된다.

6. visibility

: 대상을 보기에서 숨길 수 있다.

.future {
  visibility: hidden;
}

• hidden : 숨긴다.
• visivle : 표시한다.

display: none과의 차이점은 디스플레이 none은 완전히 페이지에서 없애는 것이고 visibility hidden은 공간은 표시된다.

7. box-sizing

: 기본적으로 html은 컨텐트 사이즈를 기준으로 크기를 정한다.
그런데 보더값이 달라짐에 따라 크기를 확인하기가 어려워졌다.
그래서 사용하는 것이 박스 사이징이다.

• box-sizing: border-box; <--보더값을 더한 사이즈를 기준으로 한다.
• box-sizing: content-box; <--기본 값.... 컨텐트 사이즈를 기준으로 한다.