배경 전체 채우기 / 박스 조절

▼전체 높이 채우기

▷vw = View Width

▷vh = View Height
-보이는 홈페이지 높이를 모두 채우기
  ㄴex)
    .element{width:100%; height:100vh;}


▼header에 margin
▷header에 margin을 주면 배경 이미지도 같이 내려온다
  -배경이미지(부모)의 높이는 자식의 높이에 영향을 받는다
  -header(자식)이 내려오면 배경이미지(부모)도 같이 내려온다
  -거리를 두고 싶다면 margin이 아닌 padding으로 벌리기

▼글자 정렬
▷홈페이지 전체적으로 중앙에 위치하고 정렬을 하고 싶을 때
-정렬하고자 하는 태그에 같은 width 값을 주고
-margin:0px auto; 적용


▼박스크기 조절
▷boder는 크기에 영향을 줌
-외곽선이 생겨 선굵기 만큼 늘어남
  ㄴex)
      5px solid ..; > +10px이 늘어남
▷padding는 크기에 영향을 줌
-padding값 만큼 부피 크기가 늘어남
  ㄴex)
    5px > +10px이 늘어남
▷margin는 크기에 영향을 주지 않음
-겉에 여백이 생길 뿐 크기는 변하지 않음


▼박스 크기 맞추기
▷box-sizing:border-box;
-width, height 값 안에 border, padding 값을 포함시킨다
  ㄴex)
    {
     border: 5px solid ..;
     padding:5px;
     box-sizing:border-box;
    }
    =>크기 자체는 변하지 않음. 단, 내부 글씨 공간이 줄어듦