CSS Box Model

<종류>
width, height
padding-콘텐츠 영역과 테두리 사이의 간격
border-콘텐츠 영역과 패딩을 둘러싼 테두리의 두께와 스타일
margin-테두리와 외부 가장자리 사이의 간격

-width, height-
 px로 설정
 최소 및 최대값
  최소, 최대 너비 :
  min-width, max-width
  최소, 최대 높이 :
  min-height, min-width
  
  ~overflow~박스 외부로 콘텐츠가 넘치는 일 제어!
    @hidden:오버플로되는 콘텐츠가 보이지 않게 숨겨짐
    @scroll:박스에 스크롤바 추가되어 콘텐츠를 스크롤하여 볼 수 있음
    @visible:오버플로 콘텐츠가 포함된 요소 외부에 표시됨
     (overflow: scroll;이 기본값)
     
  ~visibility~보기에서 숨기기 가능!
    @hidden:숨기기
    @visible:표시하기
     ex) <ul>
          <li>Explore</li>
          <li>Connect</li>
          <li class="future">Donate</li>
         </ul>
          .future {
           visibility: hidden;
          } --future클래스는 브라우저에서 안 보이지만
              목록 항목의 내용은 볼 수 있음, 빈 공간이 여전히 남아있음
         (display: none / visibility: hidden 차이!
          웹페이지에서 제거 / 웹페이지에서 표시 안되지만 빈 공간 표시)

-borders-
 @width:테두리 두께 (thin/medium/thick)
 @style:테두리 디자인 (none/dotted/solid...)
 @color:테두리 색상
  ex) p {
        border: 3px solid coral;
      } - 차례로 두께, 스타일, 색상
      
-border radius-
 !테두리 상자 모서리 수정!
 {50% 하면 원형 테두리 만들 수 있음(높이, 너비 같은 값 주고)}
 
-padding-
 박스 컨텐츠와 박스 테두리 사이의 공간
 (배경색 확장하고 콘텐츠가 덜 좁아보이게)
  padding-top / padding-right / padding-bottom / padding-left
    padding: 6px 11px 4px 9px; 차례로 (위 오른 아래 왼)
      위 아래 값 같고, 왼 오른 값 같으면
    padding: 5px 10px; 이렇게 단축해서 작성
 
-margin-
 박스 밖에 있는 공간(여백)-여백의 크기 지정
  margin-top / margin-right / margin-bottom / margin-left
    margin: 6px 10px 5px 12px; 차례로 (위 오른 아래 왼)
      위 아래 값 같고, 왼 오른 값 같으면
    margin: 6px 12px; 이렇게 단축해서 작성
   //
   세로(위 아래)여백이 0이고, 가로(왼 오른)여백 자동 설정하면 :
    margin: 0 auto; 로 작성!!
   //
    가로 여백(왼 오른)은 합해서 생각할 수 있지만
    세로 여백(위 아래) 사이에는 합 적용x 아래 위쪽 여백만큼의 공간이 있다고 생각!