Skip to content

react‐bootstrap

Jump to bottom
최현준 edited this page Aug 10, 2024 · 1 revision

블록 레이아웃의 특징

블록 레이아웃은 가로방향으로 최대 너비를 차지 해 크기를 설정할 수 있어. 속성 : width, height, margin-top,bottom,left,right, padding-top,bottom,left,right, overflow 항상 새로운 줄을 차지 해

<div> <p> <h1>

인라인 레이아웃의 특징

요소는 텍스트와 함께 가로로 나란히 배치 <span> <a> <em>

속성 : margin-left, margin-right ,padding-left, padding-right

블록과 인라인 레이아웃 둘다 적용되는 속성

font-family, font-size, font-weight, font-style color background-color, background-image, background-position, background-size border, border-radius text-align display visibility opacity z-index

인라인 블록 레이아웃의 특징

가로로 배치되지만 <img> <button>

flex 레이아웃의 특징

옛날에는 위에 레이아웃만 있었다. 그래서 노동이 엄청 심했다. 자주 쓰이는 레이아웃은 정해져 있는데 매번 그 레이아웃을 열심히 구현하는게 싫은거다. 그래서 등장했다.

display: flex를 건다면? 그러면 자신이 flex Container가 되고 그 요소의 모든 직계 자식들이 flex Item이 된다. 그리고 Flexbox의 규칙에 따라 자식들이 정렬 된다.

처음보는 사람은 뭔말인가 싶을 텐데, 정렬을 해주고 싶을때 적용하는 추가적인 레이아웃이라고 이해하면 된다.(물론 부트스트랩을 사용하면 거의 국룰로 적용시켜진다. 그리드도 그렇다 부트스트랩은 Flex기반 Grid 레이아웃임)

display:flex를 속성을 부여하면 flex Container가 된다. block-level element (<div>)에 부여하면 block flex container가 되고 inline-level element(a)에 부여하면 inline flex container가 된다. 이 때, inline-level element가 block-level element가 되는게 아니다.(GPT도 계속 틀린다;; 영어로 질문할 때는 안틀린다) 하지만 Flexbox 관점에 한해서는 정렬이 되니까 behave similarly to block-level elements 라는 거임.

inline flex container라고 하는 이유는 inline nature를 가지고 있기 때문이고, block flex container도 마찬가지이다.(retains block nature)

inline flex container:

  • doesn't take up the full width of its parent
  • aligns with other inline elements block flex container:
  • occupying the full width of its parent
  • causing a line break

업그레이된 블록 레이아웃에 어떤 기능이 있어야 될까? 정렬을 쉽게 해주는게 있어야 겠다.

정렬을 아주 그냥 북치기박치기해주는 속성들 flex-grow, flex-shrink, flex-basis justify-content align-items, flex-wrap

크기를 바꾸려하는데 안바뀌고 내맘대로 안되는 경우

프레임워크의 기본 속성을 생각해야 한다. 기본적으로 부트스트랩은 flexbox이다. Container태그 Row태그 Col태그는 각각 원본요소가 div이다. 즉, block-level flex container이고, block-level flex item이라는 것이다.

부트스트랩을 추가하면?

main.tsx에

import 'bootstrap/dist/css/bootstrap.min.css';

를 하면 어떻게 되는지 알아보자.

이미 모두가 아시다시피 이건 index.html에 bootstrap.min.css를 포함시키겠다는 행위이다. 그러면 어떻게 되냐.

이런 것들이 추가된다고 보면 된다. 즉, 저 css를 포함시킨 것만으로 <div>만 작성하더라도, 아예 bootstrap을 사용하지 않다고 느껴진다 하더라도 전역적으로 설정된게 있다. 대충 div태그를 생성한 뒤 그 태그를 개발자 도구로 확인해보자. 많은 css 변수들이 생겨난 것을 볼 수 있다. 그리고 아래에 이것이 추가된 것을 볼 수 있다.

*, ::after, ::before {
1. [ ]  box-sizing: border-box;
}

기본적으로, box-sizing 속성은 content-box로 설정되어 있다. 이 경우, 요소의 width와 height는 내용물의 크기만을 의미하고, 패딩(padding)과 테두리(border)는 별도로 추가된다. 하지만 box-sizing: border-box;를 사용하면 width와 height에 내용물, 패딩, 테두리가 모두 포함됩니다. 이렇게 하면 요소의 전체 크기를 예측하기 쉽고, 레이아웃을 관리하기 더 편리해진다.

부트스트랩은 어떤 기능을 지원하는가

부트스트랩은 Flexbox기반의 그리드 시스템이다. Row는 Flexbox Container가 되고 Col은 Flex Item이 된다. Flexbox기반 그리드 시스템이다. 그게 무엇이냐 하면, 쉽게 이해하기 위해 하나의 예시를 들면, 그리드 기반 시스템이 구축되었으므로 col-6 속성으로 간단하게 Col의 너비의 비율을 설정할 수 있다.

Container

Container태그는 Flexbox와 직접적인 관계가 없다. 그리드 시스템의 전체 폭을 조정한다. container-fluid는 전체 뷰포트를 차지 container는 고정된 최대너비를 가지고 가운데 정렬

대강 이런 느낌이다.

<div class="container">
  <!-- Your content goes here -->
</div>
.container {
  width: 100%;
  max-width: 1200px; /* 최대 너비를 설정하여 중앙에 정렬 */
  margin: 0 auto; /* 가로로 중앙에 배치 */
  padding-left: 15px; /* 좌우 패딩 추가 */
  padding-right: 15px;
}

Row와 Col

Row는 Flex container 다. 기본적으로 display:flex가 적용되어있다고 보면 된다. Col은 Flex Item이다. 그리고 Container Row Col 셋 다 원본 요소는 div이다.

<div class="row">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>
.row {
  display: flex; /* Flexbox 컨테이너로 설정 */
  flex-wrap: wrap; /* 아이템들이 줄바꿈이 가능하도록 설정 */
  margin-left: -15px; /* 컬럼 간격을 위한 마진 조정 */
  margin-right: -15px;
}
.col {
  flex: 1; /* 기본적으로 동일한 비율로 공간을 나눔 */
  padding-left: 15px; /* 좌우 패딩 추가 */
  padding-right: 15px;
  box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
}

/* 특정 크기의 컬럼 설정 (예: 50% 크기) */
.col-6 {
  flex: 0 0 50%; /* 50% 너비를 차지 */
  max-width: 50%; /* 최대 너비도 50%로 설정 */
}

.col-12 {
  flex: 0 0 100%; /* 100% 너비를 차지 */
  max-width: 100%; /* 최대 너비도 100%로 설정 */
}

Form.control

@media (prefers-reduced-motion: reduce) {

.form-control {

1. [ ]  transition: none;

}

}

<style>

.form-control {

1. [ ]  display: block;
2. [ ]  width: 100%;
3. [ ]  padding: .375rem .75rem;
4. [ ]  font-size: 1rem;
5. [ ]  font-weight: 400;
6. [ ]  line-height: 1.5;
7. [ ]  color: var(--bs-body-color);
8. [ ]  -webkit-appearance: none;
9. -moz-appearance: none;
10. [ ]  appearance: none;
11. [ ]  background-color: var(--bs-body-bg);
12. [ ]  background-clip: padding-box;
13. [ ]  border: var(--bs-border-width) solid var(--bs-border-color);
14. [ ]  border-radius: var(--bs-border-radius);
15. [ ]  transition: border-color .15s , box-shadow .15s ;

}

<style>

button, input, optgroup, select, textarea {

1. [ ]  margin: 0;
2. [ ]  font-family: inherit;
3. [ ]  font-size: inherit;
4. [ ]  line-height: inherit;

}

<style>

*, ::after, ::before {

1. [ ]  box-sizing: border-box;

}

footer

side

Clone this wiki locally