로딩
요청 처리 중입니다...

Firebase 배우기 19 - Card Component로 DB 데이타를 표시할 때, 줄 간격 및 상단 여백 조절 방법

 Firebase 배우기 19 - Card Component로 DB 데이타를 표시할 때, 줄 간격 및 상단 여백 조절 방법

Firebase DB에 기록된 컬렉션 문서들을 읽어와 웹페이지에 게시하는 경우, 포맷 등의 목적으로 Card Component 방식으로 표시하는 경우가 매우 많다. 비슷한 성격의 데이터들을 반복해서 표시하는데 그만큼 Card Component가 일정한 간격 유지, 표시 형식의 통일성 유지 등의 측면에서 유리하기 때문일듯하다.

그런데, Card Component의 기본 설정을 그대로 사용하다 보면, 간혹 필드값들을 표시하는 데이터 상단의 여백이나, 줄 사이 간격이 다음 화면에서처럼 너무 넓어져 보기 싫은 경우가 있다. 이러한 문제를 해결하는 방법은 의외로 간단하다.

바로 웹페이지 문서의 header 부분에서 card-body에서 padding-top 설정치와, card-text에서 margin-bottom 값을 style 태그들을 이용하여 정의해 주면 쉽게 해결할 수 있다. 이렇게 card에 대한 style을 지정해 주면 다음과 같이 상단 여백과, 줄 간 간격이 좁아지게 된다. pad...