여기까지 작성한 코드를 실행하면 텍스트가 다음처럼 바뀝니다.

그림 13-10 섹션 영역 제목 설정 결과

이제 About Me 영역의 본문을 작성할 차례입니다. 본문은 텍스트와 이미지를 왼쪽과 오른쪽으로 나눕니다. 이를 about-self 클래스 하위에 left 클래스와 right 클래스로 구분합니다. 이 부분은 float 속성으로 레이아웃을 분할하고 각각 너비의 절반씩 차지하도록 지정합니다. 그런데 float 속성은 적용 대상의 원래 위치를 보장하지 않습니다. 그래서 먼저 clear 속성으로 float 속성을 해제해야 합니다.

그리고 이미지는 항상 원래 크기를 그대로 표시하려는 특징이 있습니다. 자신을 감싸고 있는 부모 요소의 크기를 넘더라도 말이죠. 그래서 이 코드에서는 img 태그에 max-width 속성을 줘서 이미지가 부모 요소의 너비보다 커지지 못하게 제한합니다.

/* float 속성 해제 */
section .about-self::after{
  content:"";
  clear:both;
  display:block;
}
/* 본문 너비 절반 지정 & 왼쪽 배치 */
section .about-self .left{
  width:50%;
  float:left;
}
/* 이미지 크기가 부모 영역을 넘지 않도록 부모 영역의 최대 크기로 지정 */
section .about-self .left img{
  max-width:100%;
}
/* 본문 너비 절반 지정 & 오른쪽 배치 */
section .about-self .right{
  width:50%;
  float:left;
  padding:0 2rem;
}