bootstrap ReturnBook 스타일 설정

[주인장]

export const ReturnBook: React.FC<{}> = () => {

    return (

        <div className='col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-3'>

            <div className='text-center'>

                <img

                    src={require('./../../Images/BooksImages/book-luv2code-1000.png')}

                    width='151'

                    height='233'

                    alt="book"

                />

                <h6 className='mt-2'>Book</h6>

                <p>Kim Ki Tae</p>

                <a className='btn main-color text-white' href='#'>Reserve</a>

            </div>

        </div>

    );

};

<div className='col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-3'>

• col-xs-6:

  • 화면 크기가 **초소형 (extra small, xs)**인 경우, 12열 그리드 시스템 중 6열을 차지합니다.
  • xs는 기본적으로 모든 화면 크기를 포함하며, 'extra small' 장치(예: 휴대폰)에서 적용됩니다.

• col-sm-6:

  • 화면 크기가 **소형 (small, sm)**인 경우, 12열 그리드 시스템 중 6열을 차지합니다.
  • sm은 작은 장치(예: 태블릿)에서 적용됩니다. 부트스트랩 4 기준으로 최소 너비 576px 이상에서 적용됩니다.

• col-md-4:

  • 화면 크기가 **중형 (medium, md)**인 경우, 12열 그리드 시스템 중 4열을 차지합니다.
  • md는 중간 크기 장치(예: 작은 랩탑)에서 적용됩니다. 부트스트랩 4 기준으로 최소 너비 768px 이상에서 적용됩니다.

• col-lg-3:

  • 화면 크기가 **대형 (large, lg)**인 경우, 12열 그리드 시스템 중 3열을 차지합니다.
  • lg는 큰 장치(예: 데스크탑)에서 적용됩니다. 부트스트랩 4 기준으로 최소 너비 992px 이상에서 적용됩니다.

• mb-3:

  • 이 클래스는 마진(margin)과 관련이 있습니다.
  • **mb-3**는 아래쪽 여백(margin-bottom)을 설정합니다. 부트스트랩의 여백 유틸리티 클래스로, 일반적으로 각 여백 크기는 부트스트랩의 spacing scale에 따라 결정됩니다. 3은 상대적인 크기를 나타내며, 이는 보통 약간의 여백을 의미합니다.

종합 예시

위 클래스들을 종합해 보면, 이 <div> 요소는 다음과 같이 작동합니다:

• 화면이 작을수록(xs와 sm) 6열을 차지하고, 이는 화면 너비의 절반을 차지함을 의미합니다.
• 화면이 중간 크기(md)일 때는 4열을 차지하여, 화면 너비의 3분의 1을 차지합니다.
• 화면이 클 경우(lg), 3열을 차지하여, 화면 너비의 4분의 1을 차지합니다.
• 항상 아래쪽에 소정의 여백이 적용됩니다(mb-3).