그리고 헤더 영역에서 메뉴를 가로 한 줄로 배치하기 위해 display 속성값을 flex로 지정합니다. 추가로 내부 여백과 글꼴 크기도 지정합니다.
header nav ul{
display:flex;
}
header nav ul li{
padding:10px;
}
header button{
background:transparent;
border:0;
cursor:pointer;
}
header h1 button{
font-size:2rem;
font-weight:bold;
}
header nav ul li button{
font-size:1.2rem;
}
여기까지 작성한 코드를 웹 브라우저로 실행하면 그림처럼 보입니다.
그림 13-3 헤더 영역 CSS 코드 작성 결과