- slide 1 of 23, currently active
- slide 2 of 23
- slide 3 of 23
- slide 4 of 23
- slide 5 of 23
- slide 6 of 23
- slide 7 of 23
- slide 8 of 23
- slide 9 of 23
- slide 10 of 23
- slide 11 of 23
- slide 12 of 23
- slide 13 of 23
- slide 14 of 23
- slide 15 of 23
- slide 16 of 23
- slide 17 of 23
- slide 18 of 23
- slide 19 of 23
- slide 20 of 23
- slide 21 of 23
- slide 22 of 23
- slide 23 of 23
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;
}