inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기

Break

설명시 개념과 어떻게 사용하는지에 대한 설명이 더 자세 했으면 합니다.

169

가치삶

작성한 질문수 6

1

gutter, break설명시

개념과 어떻게 사용하는지에 대한 설명이 더 자세 했으면 합니다.

개념 설명이 명확하지 않고 시현만 하고 

이해 되시죠 하고 묻고 가는데 솔직히 이해가 되지 않습니다.

(설명이 충실하지 않으니 다시 부트스트랩 문서보고, 인터넷 찾아야 됩니다,)

w-100이 무엇을 의미하는지 설명을 더 해주면 좋을 듯 합니다.

g- 부분도 마찬가지이구요

 

 

 

HTML/CSS 웹 디자인 javascript bootstrap

답변 1

1

Self-coding

안녕하세요.

 

1. gutter 부분은 부트스트랩의 column 사이의 padding이 포함된 그리드 개념입니다.

보통 .row 밑에 컬럼들 예컨대 .col 또 .col이 있다면 이 두 개의 .col-6은 붙어있게 되는데요,

.row에 gx-* 클래스를 추가하면 개별 컬럼 속에 padding이 추가되는 것인데,

대신에 그 상위 클래스 .container에 px-4같은 클래스를 넣어줘야 해서

아직까지는 그리 많이 사용되는 클래스는 아닙니다. 

또한 컬럼에서 gx-*라면 수평으로, gy-*라면 수직으로 여백이 생겨서 불편한 점도 있구요.

 

그냥 .col-* 다음 px-* 또는 py-* 클래스를 추가하는 것이 좀 더 나을 것 같습니다만...

 

2. w-100은 css에서 width: 100%;와 같은 개념의 부트스트랩 클래스입니다.

w-auto와 거의 비슷한데 

다만 w-auto 클래스(즉, width: auto;)는 margin이나 padding 그리고 border를 포함하지 않구요,

w-100 클래스는(width: 100%;)는 포함되는 개념입니다.

 

동영상 설명 중에 부족하다고 느끼신 부분에 대해서는 죄송하게 생각합니다. 다만, 그렇게 중요하지 않은 것 같아서 간략히 넘어간 부분도 있습니다. 추후에 업그레이드를 할 때 지적에 대해서는 좀 더 부연설명을 할 수 있도록 하겠습니다.

감사합니다.

services-col mx-2 my-3

0

67

2

단축키 질문

0

63

1

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

0

303

2

프로젝트3의 툴팁에서

1

337

2

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

0

371

1

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

0

735

1

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

0

1187

1

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

0

306

1

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

0

364

2

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

0

533

1

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

0

375

1

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

0

316

1

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

0

405

1

브레이크 포인트 관련 문의

0

268

1

a:hover {color }

2

470

4

Post Content -2 질문

0

208

1

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

0

330

2

hover

0

329

1

box 공부중 질문있습니다

0

341

3

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

0

302

2

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

0

310

3

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

0

289

2

card와 card-body 의 차이점

0

694

2

px-md-3

0

383

2