Inflearn Community Q&A
asked
card와 card-body 의 차이점
Written on
·
669
0
앞 강의section services에서
<div class="card">...
....
<div class="card-body">
card 클래스 안에 card-body클래스를 넣은 부분은 이해가 갑니다만,
이번 <div class="card card-body">와 차이점이 무엇인지요?
두번째,
background-position : center 의 설명 부탁드리겠습니다. 감사합니다.
Quiz
프로젝트 초반 설정 단계에서 Bootstrap이나 Font Awesome 같은 외부 라이브러리를 프로젝트에 추가하는 일반적인 방법은 무엇일까요?
라이브러리 파일을 직접 다운로드하여 assets 폴더에 저장한다.
CDN(Content Delivery Network) 링크를 HTML 파일의 <head> 또는 <body> 하단에 추가한다.
별도의 빌드 도구를 사용하여 프로젝트에 포함시킨다.
라이브러리의 필요한 부분만 복사하여 커스텀 CSS/JS 파일에 붙여넣는다.
Answer 2
0
0
답변이 늦었습니다.
부트스트랩에서 card 컴포넌트는 일반적으로
<div class="card">
<div class="card-body">
..로 되는데,
클래스 card-body 위에 card-img-top이라는 클래스로 이미지가 들어올 수 있어요.
근데 이미지 없이 카드 컴포넌트를 사용하고 싶을 때
.card.card-body로 사용할 수 있습니다.
차이는 즉, 이미지가 있고 없고 정도라고 이해하시면 되겠습니다.
물론
<div class="card">
<div class="card-body">
....
</div>
</div>
의 형태로 하셔도 될 겁니다.
그 다음 질문,
background-position: center;는 말그대로 배경이미지의 위치를 정중앙으로 둔다는 겁니다.
배경이미지는 기본적으로 왼쪽 상단을 기본으로 해서
0% 0%가 되는데,
다양한 방법으로 배경이미지의 위치를 설정할 수 있습니다.
자세한 설명은 아래 링크를 참조해 주세요.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
이상입니다.