CSS - Cards(반응형 웹 디자인)

창의 너비에 따라 한 줄에서 보이는 카드의 개수를 맞춥니다.

확인하려면 JSFiddle(https://jsfiddle.net/eoureo/hd53k4sb/)에서 보면서 Result 프레임의 너비를 바꿔보면 됩니다.

 

• 수평 스크롤바가 나오지 않도록 하였습니다.
• 가운데 정렬되도록 했습니다.
• 카드 너비를 200px로 하고 창 너비가 400-2200px까지 200px마다 카드의 개수가 바뀝니다.

 

창 너비가 800px 보다 작은 경우

창 너비가 800px보다 큰 경우

다음 소스코드를 바꾸었습니다.

(참고로 W3Schools How TO - Code snippets for HTML, CSS and JavaScript (https://www.w3schools.com/howto/)에는 좋은 내용들이 많네요.)

 

How To Create Column Cards https://www.w3schools.com/howto/howto_css_column_cards.asp

How To Create Column Cards