13.3.2 CSS 코드 작성하기

메인 영역의 CSS 코드를 작성하겠습니다. 그림 13-4를 보면 메인 영역의 배경에 프로필 이미지가 있습니다. 웹 페이지의 메인 영역에 프로필 이미지만 넣어도 굉장히 현대적인 느낌을 주게 됩니다.

배경 이미지를 지정하려면 background 속성에서 url() 함수로 삽입하려는 이미지 경로를 지정해야 합니다. 이때 linear-gradient() 함수를 사용하면 배경색이 이미지를 덮는 효과를 줄 수 있습니다. 그리고 수직 방향에서 요소들이 중앙에 위치하도록 display 속성값을 flex로 지정합니다. 텍스트도 중앙 정렬하기 위해 text-align 속성값을 center로 지정합니다.

main{
  width:100%;
  height:100vh;
  color:white;
  background:linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('images/me.jpg') center center;
  background-size:cover;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}