CSSBattle Apr 8, 2025

문제

해결

HTML

<div class="container">
  <!-- 위 2개 bar -->
  <div class="horizontal-bars">
    <div class="bar short horizontal"></div>
    <div class="bar tall horizontal"></div>
  </div>
  <!-- 가운데 4개 bar와 정사각형 bar -->
  <div class="center">
    <!-- 왼쪽 두 개 bar -->
    <div class="vertical-bars">
      <div class="bar short vertical"></div>
      <div class="bar tall vertical"></div>
    </div>
    <!-- 가운데 정사각형 -->
    <div class="bar core"></div>
    <!-- 오른쪽 두 개 bar -->
    <div class="vertical-bars">
      <div class="bar tall vertical"></div>
      <div class="bar short vertical"></div>
    </div>
  </div>
  <!-- 아래 두 개 bar -->
  <div class="horizontal-bars">
    <div class="bar tall horizontal"></div>
    <div class="bar short horizontal"></div>
  </div>
</div>

CSS

  * {
    margin: 0;
    box-sizing: border-box;
  }

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: #14576B;
    gap: 14px;
  }

  .horizontal-bars {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }

  .vertical-bars {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  .bar {
    background: #5A9F48;
  }

  .core {
    height: 140px;
    width: 140px;
    flex-shrink: 0;
  }

  .short {
    --length: 60px;
  }

  .tall {
    --length: 100px;
  }

  .horizontal {
    width: var(--length);
    height: 20px;
  }

  .vertical {
    width: 20px;
    height: var(--length);
  }