inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Bootstrap 5 - Tạo một dự án web từ đầu

Dự án 1 - Mục Slogan & Tính năng

card와 card-body 의 차이점

675

c72unix1705

15 câu hỏi đã được viết

0

앞 강의section services에서 

<div class="card">...

    ....

     <div class="card-body">

 card 클래스 안에 card-body클래스를 넣은 부분은 이해가 갑니다만,

이번 <div class="card card-body">와 차이점이 무엇인지요?

 

두번째, 

background-position : center 의 설명 부탁드리겠습니다. 감사합니다.

HTML/CSS 웹 디자인 javascript bootstrap

Câu trả lời 2

0

c72unix1705

감사합니다.

0

Self-coding

답변이 늦었습니다.

 

부트스트랩에서 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

 

이상입니다.

 

 

services-col mx-2 my-3

0

59

2

단축키 질문

0

53

1

부트스트랩 + *.css 함께 사용하는 이유와 분리 기준이 궁금합니다.

0

278

2

프로젝트3의 툴팁에서

1

330

2

프로젝트1 번의 Navigation 강의부에서 질문입니다.

0

362

1

게시판을 추가할 수 있는 방법이 있을까요?

0

719

1

프로젝트 2 이미지 깨짐 현상

0

1177

1

프로젝트 1- Service Section 에서 app.js에서 syntaxError가 납니다.

0

286

1

자식에 position:absolute;를 쓰지 않고, 바로 top 설정이 가능한가요?

0

347

2

cdn.js를 실제 프로젝트에 써도 문제가되지 않나요!?

0

528

1

carousel 구현에서 사용된 아이디가 중복 사용 가능한가요?

0

359

1

kakao map이 mobile에서도 가능하게 하려면 어떻게 할까요?

0

305

1

-webkit- 접두어가 안붙습니다.

0

397

1

브레이크 포인트 관련 문의

0

256

1

a:hover {color }

2

451

4

Post Content -2 질문

0

201

1

아니 선생님 이게 뭡니까 프로젝트3 Blog CTA Modal 파트

0

323

2

hover

0

319

1

box 공부중 질문있습니다

0

331

3

뭐가 잘못 된지 모르겠습니다.

0

293

2

강의보고 따라하는데 안됩니다.

0

298

3

3:10 -> 3:16 코드 질문 있습니다^^

0

276

2

px-md-3

0

371

2

a:hover

0

286

2