4.3.4. styling

보유한 서비스 수에 따라 생성된 마크업에 몇 가지 최종 해상도를 추가합니다. 이 예제의 경우 두 개이므로 service-column div의 CSS 코드는 다음과 같습니다.

.service-column {
    float: left;
    margin-left: 10%;
    width: 45%;
}
.service-column:first-child {
  margin-left: 0;
}

이 예제에서는 백분율 기반 레이아웃을 사용하여 div의 차원을 포함하는 기본 열의 너비를 동적으로 할당합니다.

이제 적절하고 효율적으로 작동하는 여러 서비스 하위 페이지가 있어야 합니다. 축하합니다!

열을 특정 순서로 표시하려면 서비스 이름 또는 다른 값에 해당하는 조건문(if/else/case)을 사용하십시오.