[CSS] card-list 만들기 (flex)

Abstract

웹사이트 이용시 흔히 보게 되는 카드 형식의 리스트를 flex를 활용하여 만들어보았다. position과 float을 이용한 방법보다 비교적 최신의 방법인 flex를 활용해서 보다 간편하게 만들어보는 것이 주 목적이다.

---

 

짤막하게 마크업 구조 분석

 

1. 각각의 카드는 card-item이라는 클래스를 준다

2. card-item의 집합은 card-list, 그리고 card-list를 한번 더 감싸는 card-list-container

3. 썸네일과 이름, 날짜가 적힌 부분은 header.card-header, 이미지와 본문은 a.card-body

4. card-header안에는 a.card-header-link

5. card-header-link는 figure > img와, card-header-content 로 구성.

---

 

CSS

		.card-list-container { 			overflow-x: hidden; 		} 		.card-list { 			display: flex; 			flex-wrap: wrap; 			margin:0 -1em; 		} 		.card-item { 			display: flex; 			flex-direction: column; 			width: 50%; 			margin-bottom: 2em; 			padding: 0 1em; 		} 		.card-header { 			padding: 0.5em; 			background: #fff; 		} 		.card-header-link { 			display: flex; 			align-items: center; 		}	 		.card-header-content { 			flex:1 1 auto 		} 		.author-photo{ 			flex-shrink: 0; 			margin-right: 0.3em; 			width: 40px; 			height: 40px; 			border-radius: 50%; 		} 		.card-author { 			font-weight: bold; 		} 		.card-date { 			font-size: 0.7em; 		} 		.card-item:nth-child(5n+1) .card-image { background-color: #f98866; } 		.card-item:nth-child(5n+2) .card-image { background-color: #5ab4e6; } 		.card-item:nth-child(5n+3) .card-image { background-color: #ffbb00; } 		.card-item:nth-child(5n+4) .card-image { background-color: #80bd9e; } 		.card-item:nth-child(5n+5) .card-image { background-color: #a67fc5; } 		.card-image { 			padding-bottom: 70%; 		} 		.card-body { 			display: flex; 			flex: 1 1 auto; 			flex-direction: column; 		} 		.card-description { 			background: #fff; 			flex: 1 1 auto; 			padding: 0.5em; 		}

 

CSS 요점 정리 (헷갈릴 수 있는 부분)

• 텍스트가 적을 때 같은 여백을 주기

  

  

  .card-description의 부모인 .card-body에 display: flex; flex-direction: column;을 해서 메인축을 수직 방향으로 바꿔주고 .card-description에 flex-grow를 1로 주면 여백이 생길 것이라는 예측과 다르게 변화가 없다. card-body 자체에 높이가 없기 때문인데 따라서 card-body역시 flex-item으로써 grow를 이중으로 주면 문제가 해결된다. ([container]card-item > [item]card-body, [container]card-body > [item]card-description)

   

• 아이템 간 여백 주기 + 가로 스크롤 없애기

  

  card-item에 padding: 0 1em으로 좌우 여백을 준다. 이때 필요없는 좌우 여백이 생긴다.

  

  이럴 땐 item을 감싸고 있는 list에 margin: 0 -1em으로 당겨주면 좌우 여백이 사라지는 것을 확인할 수 있다. 하지만 가로 스크롤이 생긴다.

  

  list를 감싸고 있는 list-container에 overflow-x: hidden; 처리를 해주면 가로 스크롤은 사라진다.

   

• image 사이즈 주기(padding-bottom: %)

  

  card-image:에 px로 구체적인 height를 주게 되면 브라우저의 크기에 대응하지 못한다.

  

  padding-bottom: % 값을 주면 브라우저 크기에 대응하는 예쁜 이미지 출력을 확인할 수 있다.

Uploaded by

N2T