더북(TheBook)

이어서 헤더 영역의 CSS 코드를 작성합니다.

.container{ /* ① */
  width:1140px;
  margin:0 auto;
}
header{ /* ② */
  position:absolute;
  color:black; 
  top:0;
  z-index:1;
  width:100%;
  padding:1rem;
}

container 클래스는 프로젝트 전반에 걸쳐 사용되는 중요한 클래스입니다. HTML 코드를 작성할 때도 언급했지만, container 클래스가 있는 div 태그는 기준 너비를 유지하는 역할을 합니다. 최종 프로젝트는 기준 너비를 1140px로 설정합니다. 여기에 margin 속성값을 위쪽과 아래쪽은 0, 왼쪽과 오른쪽은 auto로 지정하면 수평 방향에서 중앙에 위치하게 됩니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.