13.5.2 CSS 코드 작성하기
다음으로 What I Do 영역의 CSS 코드를 작성하겠습니다. About Me 영역을 작성할 때 제목은 전체 스타일에 적용하게 작성했으므로 What I Do 영역의 제목에도 같은 디자인이 적용되어서 표시됩니다. 따라서 do-inner 클래스로 그룹 지은 본문만 스타일을 작성하면 됩니다.
먼저 do-inner 클래스를 가지는 div 태그로 그룹화한 사각형을 수평으로 배치하기 위해 float 속성값을 left로 설정합니다. 단, 이렇게 설정하면 부모 요소에서 자식 요소의 높이를 제대로 파악할 수 없으니 clear 속성도 꼭 설정합니다.
13/end/css/what_i_do.css - What I Do 영역 본문 레이아웃
/* float 속성 해제 */
section .do-me::after{
content:"";
display:block;
clear:both;
}
/* 사각형 크기와 간격, 내부 여백 설정 */
section .do-me .do-inner{
background-color:#fff;
width:30%;
padding:2rem;
float:left;
margin-right:5%;
cursor:pointer;
}
/* 마지막 사각형의 외부 여백 설정 */
section .do-me .do-inner:last-child{
margin-right:0;
}