두 단 분할

본문과 딸린 정보를 나란히 놓되, 좁은 화면에서는 한 줄로 쌓아야 하는 조각.

실제 미리보기

출처

HTML CSS

<div class="dc-split">
  <main class="dc-split__main">
    <h2 class="dc-split__title">용접 보조 — 경기 화성</h2>
    <p class="dc-split__text">주 5일, 오전 8시부터 오후 5시까지 일합니다. 기숙사와 점심이 나오고, 출입국 서류는 회사가 함께 준비합니다.</p>
    <p class="dc-split__text">경력이 없어도 2주 교육을 받고 시작합니다. 교육 기간에도 일당이 나옵니다.</p>
  </main>
  <aside class="dc-split__side" aria-label="지원 요약">
    <div class="dc-split__card">
      <p class="dc-split__row"><span class="dc-split__k">월급</span><span class="dc-split__v">280만원</span></p>
      <p class="dc-split__row"><span class="dc-split__k">비자</span><span class="dc-split__v">E-9</span></p>
      <p class="dc-split__row"><span class="dc-split__k">마감</span><span class="dc-split__v">10월 2일</span></p>
      <button type="button" class="dc-split__btn">지원하기</button>
    </div>
  </aside>
</div>

.dc-split { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--dc-6); align-items:start; font-family:var(--dc-font); }
.dc-split--left { grid-template-columns:300px minmax(0,1fr); }
.dc-split--even { grid-template-columns:repeat(2, minmax(0,1fr)); }
.dc-split__main { min-width:0; }
.dc-split__side { min-width:0; }
.dc-split__title { margin:0 0 var(--dc-3); font-size:20px; font-weight:700; line-height:1.35; color:var(--dc-text); }
.dc-split__text { margin:0 0 var(--dc-3); font-size:14px; line-height:1.7; color:var(--dc-text-sub); }
.dc-split__card { padding:var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-split__row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--dc-3); margin:0 0 var(--dc-2); font-size:14px; }
.dc-split__k { color:var(--dc-text-mute); }
.dc-split__v { font-weight:700; color:var(--dc-text); }
.dc-split__btn { width:100%; min-height:44px; margin-top:var(--dc-3); border:0; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:15px; font-weight:600; transition:background var(--dc-fast); }
.dc-split__btn:hover { background:var(--dc-brand-hi); }
@media (max-width:760px) {
  .dc-split, .dc-split--left, .dc-split--even { grid-template-columns:minmax(0,1fr); gap:var(--dc-5); }
}

이렇게 씁니다

딸린 단은 고정 너비로, 본문 단은 남는 너비로 둔다 — 본문이 먼저 줄어야 한다
쌓일 때 먼저 읽혀야 하는 쪽을 HTML 에서도 먼저 쓴다
좁은 화면에서 두 단을 억지로 유지하지 않는다. 760px 쯤에서 한 줄로 바꾼다

주의할 점

CSS 의 order 로 좌우를 바꾸지 않는다 — 눈에 보이는 차례와 탭 순서가 어긋난다
본문 단에 min-width:0 을 준다. 긴 표나 코드가 들어오면 단이 밀려 나간다

다음에 볼 것