Tailwind CSS tracking pattern css 예시 / 조건 역정렬

 

<!-- polygons on mobile, tablet -->
<!-- length : integer -->
    <div class="flex flex-col gap-16 sm:hidden">
      <ng-container *ngFor="let item of [].constructor(length / 2); index as i">
        <div
          class="flex items-center gap-8"
          [class.flex-row-reverse]="i % 2 === 1"
        >
          <div class="relative flex items-center justify-center w-28 h-2w-28">
            <div class="z-10 flex flex-col items-center justify-center">
              <small class="text-red-800 SEBANG_Gothic_Bold"
                >STEP {{(i * 2) + 1 < 10 ? '0' : ''}}{{(i * 2) + 1}}</small
              >
              <p class="font-bold text-white">글씨</p>
              <p class="text-xs font-medium text-white/70">내용</p>
            </div>
            <img class="absolute z-0" src="assets/icon/polygon.svg" />
          </div>
          <app-icon
            src="assets/icon/arrow_right_2.svg"
            class="w-8 h-5"
            [ngClass]="{'rotate-180': i % 2 === 1}"
          />
          <div class="relative flex items-center justify-center w-28 h-2w-28">
            <div class="z-10 flex flex-col items-center justify-center">
              <small class="text-red-800 SEBANG_Gothic_Bold"
                >STEP {{(i * 2) + 2 < 10 ? '0' : ''}}{{(i * 2) + 2}}</small
              >
              <p class="font-bold text-white">글씨</p>
              <p class="text-xs font-medium text-white/70">내용</p>
            </div>
            <img class="absolute z-0" src="assets/icon/polygon.svg" />
          </div>
        </div>
        <div
          class="flex items-center gap-8 arrows"
          *ngIf="i !== length / 2 - 1"
        >
          <div class="w-28" [class.invisible]="i % 2 === 0">
            <app-icon
              src="assets/icon/arrow_right_2.svg"
              class="w-8 h-5 mx-auto rotate-45"
            />
          </div>
          <div class="flex-1 min-h-[1px]"></div>
          <div class="w-28" [class.invisible]="i % 2 === 1">
            <app-icon
              src="assets/icon/arrow_right_2.svg"
              class="w-8 h-5 mx-auto rotate-45"
            />
          </div>
        </div>
      </ng-container>
    </div>

1. [class.flex-row-reserse] 역정렬 사용

 

 

 

 

 

 <!-- polygons on desktop -->
    <div class="flex-col hidden gap-24 sm:flex">
      <ng-container *ngFor="let item of [].constructor(length/3); index as i">
        <div
          [class.flex-row-reverse]="i % 2 === 1"
          class="flex items-center gap-10"
        >
          <div class="relative flex items-center justify-center w-28 h-2w-28">
            <div class="z-10 flex flex-col">
              <div class="z-10 flex flex-col items-center justify-center">
                <small class="text-red-800 SEBANG_Gothic_Bold"
                  >STEP {{(i * 3) + 1 < 10 ? '0' : ''}}{{(i * 3) + 1}}</small
                >
                <p class="text-2xl font-bold text-white">글씨</p>
                <p class="font-medium text-white/70">내용</p>
              </div>
            </div>
            <img class="absolute z-0" src="assets/icon/polygon.svg" />
          </div>

          <app-icon
            src="assets/icon/arrow_right_2.svg"
            class="w-8 h-5"
            [ngClass]="{'rotate-180': i % 2 === 1}"
          />
          <div class="relative flex items-center justify-center w-28 h-2w-28">
            <div class="z-10 flex flex-col">
              <div class="z-10 flex flex-col items-center justify-center">
                <small class="text-red-800 SEBANG_Gothic_Bold"
                  >STEP {{(i * 3) + 2 < 10 ? '0' : ''}}{{(i * 3) + 2}}</small
                >
                <p class="text-2xl font-bold text-white">글씨</p>
                <p class="font-medium text-white/70">내용</p>
              </div>
            </div>
            <img class="absolute z-0" src="assets/icon/polygon.svg" />
          </div>
          <app-icon
            src="assets/icon/arrow_right_2.svg"
            class="w-8 h-5"
            [ngClass]="{'rotate-180': i % 2 === 1}"
          />
          <div class="relative flex items-center justify-center w-28 h-2w-28">
            <div class="z-10 flex flex-col">
              <div class="z-10 flex flex-col items-center justify-center">
                <small class="text-red-800 SEBANG_Gothic_Bold"
                  >STEP {{(i * 3) + 3 < 10 ? '0' : ''}}{{(i * 3) + 3}}</small
                >
                <p class="text-2xl font-bold text-white">글씨</p>
                <p class="font-medium text-white/70">내용</p>
              </div>
            </div>
            <img class="absolute z-0" src="assets/icon/polygon.svg" />
          </div>
        </div>
        <!-- 마지막 줄 화살표 제거-->
        <div *ngIf="i !== length / 3 - 1" class="flex items-center gap-10">
          <div class="w-28" [class.invisible]="i % 3 !== 1">
            <app-icon
              src="assets/icon/arrow_right_2.svg"
              class="w-8 h-5 mx-auto rotate-45"
            />
          </div>
          <div class="flex-1 min-h-px"></div>

          <div class="flex-1 min-h-px"></div>
          <div class="w-28" [class.invisible]="i % 3 === 1">
            <app-icon
              src="assets/icon/arrow_right_2.svg"
              class="w-8 h-5 mx-auto rotate-45"
            />
          </div>
        </div>
      </ng-container>
    </div>