13.7.2 CSS 코드 작성하기
PortFolio 영역에 디자인을 입혀 보겠습니다. 해당 영역의 레이아웃은 What I Do 영역과 비슷합니다. 따라서 다음 코드처럼 portfolio-inner 클래스를 선택자로 지정해 사각형 형태로 꾸며 줍니다. 이때 사각형의 너비와 여백을 지정하면 영역의 기준 너비와 사각형의 너비를 계산해 기준 너비를 초과할 경우 자동으로 줄 바꿈합니다. 그리고 사각형들이 수평으로 배치되도록 float 속성을 left로 지정합니다. float 속성과 항상 함께 사용해야 하는 clear 속성까지 적용합니다.
13/end/css/portfolio.css 영역 본문 레이아웃
/* clear 속성으로 float 속성값 해제 */
section.portfolio::after{
content:"";
display:block;
clear:both;
}
/* portfolio-inner 사각형 꾸미기 */
section.portfolio .portfolio-inner{
width:30%;
margin-right:5%;
padding:1rem 1rem 1.5rem 1rem;
float:left;
background-color:#f8f8f8;
border:1px solid #ccc;
margin-bottom:3rem;
}
/* 3번째마다 margin-right 0 적용 */
section.portfolio .portfolio-inner:nth-child(3n){
margin-right:0;
}