13.4.2 CSS 코드 작성하기
다음으로 About Me 영역의 CSS 코드를 작성하겠습니다. 모든 섹션 영역은 다음과 같이 기본으로 Poppins 글꼴을 적용하고, 위아래 여백도 5rem으로 동일하게 지정합니다. 여기에 추가로 :nth-child 가상 클래스 선택자를 사용해 짝수 번째 섹션 영역의 배경색을 회색 계열(f8f8f8)로 설정합니다.
13/end/css/about_me.css - 섹션 영역 전체 글꼴과 배경색 설정
section{
font-family:"oppins", sans-serif;
padding:5rem 0;
}
section:nth-child(2n){
background-color:#f8f8f8;
}
그리고 제목도 모든 섹션 영역의 디자인이 같습니다. 따라서 다음처럼 텍스트 크기와 색상, 여백 등을 지정하는 CSS 코드를 작성하면 동일하게 적용됩니다.
13/end/css/about_me.css - 섹션 영역 전체 제목 설정
section .title{
margin-bottom:3rem;
}
section .title h4{
font-size:1.35rem;
color:#ed4848;
position:relative;
}
section .title h2{
font-size:3.5rem;
}
section .title p{
font-size:1.15rem;
}