레이아웃을 분리했으니 본문 오른쪽 부분을 꾸며 보겠습니다. 각 텍스트의 크기와 여백, 색을 지정합니다. HTML 코드를 보면 아이콘 폰트는 social 클래스를 가지고 있는 div 태그 하위에 a 태그로 감싼 형태입니다. 이렇게 작성하면 아이콘 폰트가 텍스트처럼 취급되어 크기와 여백을 지정할 수 있습니다.
13/end/css/about_me.css - About Me 영역 본문 세부
/* 본문 오른쪽 h3 태그의 글자 크기와 여백 지정 */
section .about-self .right h3{
font-size:2.25rem;
margin-bottom:1rem;
}
/* 본문 오른쪽 h3 태그의 strong 태그 색상 강조 */
section .about-self .right h3 strong{
color:#ed4848;
}
/* 본문 오른쪽 p 태그의 크기와 여백 지정 */
section .about-self .right p{
font-size:1.15rem;
margin:1rem 0;
}
/* 본문 오른쪽의 아이콘 폰트 크기와 여백 지정 */
section .about-self .right .social a{
font-size:2.5rem;
margin-right:0.2rem;
}
코드를 실행해 보면 About Me 영역이 그림 13-8처럼 보입니다.