inflearn logo
강의

Course

Instructor

[ Bootstrap 5 ] Create a website quickly and smartly | Bootsrap for beginners

Flexbox cross-axis alignment (align-property)

왜 flex-item box3 대신 .box3를 사용하나요?

188

btyg11049556

7 asked

0

<div class="container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item box3">3</div> </div>여기서 3번째 box만 class="flex-item box3" 하고 css 페이지에서 .box3이라고 해도 3번째 박스만 css적용이되는데 왜 이렇게 써야하는지 이해가 가지 않습니다. 왜 flex-item box3{ padding:30px}이라고 하지 않는것인가요? 이런 코드는 또 어떤 경우에 적용할 수 있나요?

HTML/CSS

Answer 1

1

codethem

box3{ padding:30px} 처럼, HTML 파일에 스타일 속성을 넣을 경우, 추후 유지 관리하기 쉽지 않습니다. 또한 하나의 웹사이트에 여러 개의 html 파일이 사용되기도 하는데, 그 경우 스타일 속성이 중복될 수 있습니다. 이러한 이유로 스타일 속성을 별도의 CSS 파일로 분리해서 관리하는 것이 일반적입니다.

아주 간단한 웹페이지를 만드는 경우에는 말씀하신 방법대로 사용하셔도 무방합니다.

해당 내용은,

"섹션 8-1 CSS 적용 방식 3가지 " 파트에서 간략하게 소개하고 있습니다.

약 10:00 분 구간에 위에 대한 간략한 내용이 나오니, 섹션 8-1을 참고해 주세요.

그럼 좋은 하루되세요!

Json 플러그인 사용시 variable collection 없음

0

12

1

배리어블 목록 없음

0

21

3

Token 등록 방법 문의

0

18

1

6-6 실습 문의

0

23

2

섹션5 노션링크 는 따로 없나요?

0

29

2

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

32

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

27

2

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

24

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

54

2

claude plugin 방법 자세히 부탁드려요

0

40

2

강의에 적용한 스크립트를 받아 볼수 있을까요?

0

40

2

최근 코테, 과제 테스트 트렌드

0

67

2

노션 25 인터렉션 구현 파트 안 보입니다!

0

39

2

파트3 13F부분도 짤린거같은데 확인해주세요

0

39

2

Gemini로 진행가능 여부 궁금합니다.

0

58

2

뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청

0

26

2

프롬프트 11 진행 완료

0

45

2

파트3 수급 부분

0

43

2

css 적용불가

0

273

1

혹시 html에 html파일 include하는 방법은 없나요?

0

1636

1

예제파일이 모두 빈 파일입니다.

0

275

2

강의자료 다운로드 어디서 하나요?

0

397

2

부트스트랩5 중급, 고급 과정도 개설해 주셨으면 좋겠습니다.

1

431

1

맥북으로 작업이 가능한가요

0

382

2