CSS3 가로정렬 및 중앙정렬 / 배경이미지넣기

[r00t]

1. 메인메뉴 가로 정렬

  .page-header {

            display: flex;

            justify-content: space-between

     }

 .main-nav {

           display: flex;

           font-size: 1.25rem;

           text-transform: uppercase;

           margin-top: 34px;

           list-style: none;   

  }  

2.  전체 중앙정렬

  .wrapper {

           max-width: 1100px;   (화면 짤리지 않는다/ 전체적으로 적어짐)

           margin: 0 auto;

           padding: 0 4%           (화면 줄어들면 끝에 공간이 보이게함)

   }

3. 배경 이미지 넣기

#home {

           background-image: url(./images/main-bg.jpg);

           min-height: 100vh;     (사진크기 다 나오게)

}

.big-bg {

          background-size: cover;    (전체 나오게)

          background-position: center top;  (커피가 맨중앙에 나오게)

          background-repeat: no-repeat;    (화면이 커서 사진 반복되지 않게)

}