더북(TheBook)

적용한 CSS 속성을 보면, do-inner 클래스를 가지고 있는 div 태그는 각각 전체 너비의 30%를 차지합니다. 사각형이 3개이므로 전체 너비의 90%가 됩니다. 그리고 첫 번째 사각형과 두 번째 사각형은 오른쪽에 너비의 5%씩 외부 여백을 주도록 margin-right 속성을 적용합니다. 이렇게 하면 총 100%가 되어 전체 너비를 사용하게 됩니다.

이때 첫 번째와 두 번째 사각형에 각각 margin-right 속성을 지정하지 않아도 됩니다. do-inner 클래스를 가지고 있는 div 태그에 모두 margin-right 속성을 적용하고 :last-child 가상 클래스 선택자로 마지막 사각형의 margin-right 속성만 0으로 설정하면 됩니다.

다음으로 아이콘 폰트를 비롯한 텍스트들의 크기를 세부 조정합니다.

13/end/css/what_i_do.css - What I Do 영역 텍스트 세부 조정

/* 아이콘 폰트 크기와 색상 */
section .do-me .do-inner .icon i{
  font-size:2.5rem;
  color:#ff6a6a;
}
/* HTML5, CSS3, BootStrap v5.0 텍스트 크기와 간격 */
section .do-me .do-inner .content h3{
  font-size:2rem;
  margin:1rem 0;
}
/* 사각형 텍스트 크기 */
section .do-me .do-inner .content p{
  font-size:1.15rem;
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.