왜 필요한가

도서 검색에서 독자는 제목·저자·대출 상태를 비교합니다. 카드마다 정보가 흩어지면 찾기 어렵습니다. 표지를 크게 보여주기보다 같은 항목을 빠르게 비교하는 일이 중요합니다.

어떻게 해결하는가

행마다 제목·저자·상태를 같은 위치에 둡니다. Austen을 검색하면 한 권이 남고 대출 가능을 고르면 대출 중인 책이 빠집니다. 없는 검색어는 복구 방법을 알립니다. 초기화하면 네 권이 돌아옵니다.

실제 책 검색과 가상 대출 상태 비교
작은 도서관

다음에 읽을 책

검색 결과: 4

  • Pride and Prejudice

    Jane Austen

    대출 가능

  • Frankenstein

    Mary Shelley

    대출 중

  • Alice’s Adventures in Wonderland

    Lewis Carroll

    대출 가능

  • A Room of One’s Own

    Virginia Woolf

    대출 가능
실제 책 제목이며 대출 상태는 가상입니다.

본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.

무엇이라 부르는가

리스트는 비교할 내용을 반복 행에 놓습니다. 글자 훑기에 적합하며 이미지 중심 선택에는 균등 그리드가 맞을 수 있습니다. 긴 제목은 저자·상태를 밀어내지 않게 줄바꿈합니다. 책은 실재하며 대출 상태는 가상입니다.

W3C: CSS Grid Level 1