② 프로젝트의 헤더는 스크롤해서 화면을 내리더라도 항상 상단에 고정하려고 합니다. 그러려면 position 속성을 fixed 값으로 지정해야 합니다. 그런데 프로젝트 완성본처럼 부드럽게 보이려면 자바스크립트가 필요해서 일단 absolute 값으로 지정합니다. position 속성을 지정하면 모든 HTML 요소의 z-index 속성값은 기본으로 0이 됩니다. 그러나 스크롤했을 때 다른 요소 밑에 가려서 안 보이는 일이 없도록 헤더의 z-index 속성값을 0보다 크게 줍니다. 여기서는 1로 설정합니다. 그리고 padding 속성값은 1rem으로 지정합니다. 텍스트 색상은 나중에 흰색으로 바꾸지만, 지금은 검은색(black)으로 지정합니다. 상속되는 속성이라서 부모 태그에 적용하면 하위 태그에 자동으로 상속됩니다.

다음으로 헤더 영역의 메뉴 배치와 관련 있는 CSS 코드를 작성합니다. 그림 13-1을 보면 헤더 영역의 모든 구성 요소가 한 줄로 배치됩니다. 이러한 레이아웃 형태를 유지하기 쉽게 display 속성값을 flex로 지정하고 justify-content 속성값을 space-between으로 지정합니다. 그러면 하위에 자식 태그가 2개 있을 때 각각 왼쪽 끝과 오른쪽 끝에 붙게 됩니다. 그리고 수직 정렬을 위해 align-items 속성값을 center로 지정합니다.

header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}