BIZINFO 레이블-값 페어에 grid 레이아웃 적용

Post.astro 레이아웃에 BIZINFO 영역 스타일 작업을 했다. .view_cont > ul/li 페어에 grid를 적용하는 단순해 보이는 한 줄짜리 작업이었는데, 생각보다 짚어볼 게 있어서 남겨둔다.

왜 이 타이밍에 grid였나

기존 .view_cont 내부의 ul/li 구조는 아마도 별도 레이아웃 지정 없이 기본 block 흐름을 타고 있었을 거다. BIZINFO 같은 비즈니스 정보 섹션은 보통 레이블-값 페어를 나열하는 구조가 많다. 예를 들면 이런 식:

<ul>
  <li>
    <span class="label">대표자</span>
    <span class="value">홍길동</span>
  </li>
  <li>
    <span class="label">사업자번호</span>
    <span class="value">000-00-00000</span>
  </li>
</ul>

이걸 그냥 block으로 두면 레이블 길이가 제각각일 때 값 시작 위치가 들쭉날쭉해진다. float나 flex로 처리하던 시절도 있었지만, 이런 페어 구조에서 grid가 가장 깔끔하다. 특히 grid-template-columns: max-content 1fr 조합을 쓰면 레이블 너비를 내용 기준으로 자동 맞추면서 값은 나머지 공간을 채우는 구조를 최소한의 코드로 만들 수 있다.

.view_cont > ul {
  display: grid;
}

.view_cont > ul > li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 1rem;
}

물론 실제 적용 값은 디자인 스펙에 따라 다르겠지만, 페어 레이아웃에서 grid를 쓰는 패턴 자체는 거의 정석에 가깝다.

Post.astro 한 파일에 스타일이 들어가는 구조

변경 파일이 src/layouts/Post.astro 하나다. Astro 환경에서 레이아웃 컴포넌트에 직접 scoped style을 넣는 방식은 빠르고 직관적이다. 별도 CSS 파일로 분리하면 import 경로 관리가 필요하고, 전역 스타일시트에 넣으면 다른 레이아웃에 영향 줄 수 있으니까.

BIZINFO처럼 Post 레이아웃에서만 쓰이는 특정 섹션 스타일이라면 Post.astro 안에 두는 게 맞다. 스코프를 좁게 가져가는 게 나중에 다른 레이아웃 건드릴 때 두려움 없이 작업할 수 있는 기반이 된다.

스타일 작업에서 자주 놓치는 것

이런 류의 스타일 fix는 커밋 메시지만 보면 작아 보이지만, 사실 영향 범위를 확인하는 게 핵심이다.

• .view_cont가 BIZINFO 말고 다른 섹션에도 쓰이고 있지 않은지
• ul/li 셀렉터가 하위 중첩 구조에 의도치 않게 적용되지 않는지 (> 직접 자식 선택자를 쓴 게 의도적일 것)
• 모바일 breakpoint에서 grid column이 깨지는 경우는 없는지

> 선택자를 명시적으로 쓴 건 잘한 거다. 직접 자식만 잡으면 중첩된 하위 ul/li에 스타일이 튀는 걸 방지할 수 있다. 이 판단을 커밋 메시지에 .view_cont > ul/li 페어라고 명시한 것도 좋았다. 읽는 사람이 "아, 직접 자식 페어에만 grid 준 거구나"를 바로 알 수 있으니까.

스타일 작업은 "기능" 변경보다 덜 중요하게 취급받기 쉬운데, 이런 핀포인트 수정을 style(post): 접두사로 명확하게 분리해서 커밋한 게 맞는 방향이다. 기능 커밋과 스타일 커밋이 섞이면 리뷰할 때 맥락 파악이 훨씬 힘들어진다.

끝.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.