CSS

81 Containers -1

bootstrap 가로로 배치하는데 flex박스 사용햇엇다.
bootstrap의 grid시스템을 이용해보자.
그리드와 flex박스를 조합해서 사용할 수 잇다.
Grid system사용하기전에 사전지식을 쌓자.
Container는 여러 블럭들이 담기는 박스를 말한다.
container라는 컨테이너의 너비가 얼마인지 정해놓았다.

기본 Navbar가 화면 전체를 포함하고 있다.
<div class="container-fluid">를 <div class="container">로 바꿔보자.
적당한 너비가 되었다.

사진참조
이 컨테이너를 이용해서 적당하게 넣을 수 있다.

82. Containers-2

그런데 화면 크기에 따라서 다르게 사용하고 싶다. 부트스트랩을 보다보면 뒤에 영어가 추가적으로 작성된게 보인다.
.container-sm /container-md /.container-lg /xl / xxl
small / mdium / large 뜻 small까지만 적용 미디움가지만 적용 라지화면까지만 적용 등등
fluid는 어느 화면에서든 100%
화면에따라서 다르게 적용된다는 것을 알아두자.

 <!-- .container>h1>lorem3^p>lorem -->
<div class="container">
    <h1>
        Lorem, ipsum dolor.
    </h1>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam tenetur porro doloribus? Quisquam voluptas ab quia totam consectetur saepe odit expedita dolore dolorum, illum cum temporibus ratione reprehenderit excepturi vero!
    </p>
</div>
<!-- .container-lg>h1>lorem3^p>lorem  -->
<div class="container-lg">
    <h1>
        Lorem, ipsum dolor.
    </h1>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor voluptatum magni omnis repellat excepturi doloremque cumque ipsa obcaecati? Molestiae mollitia obcaecati assumenda, ab beatae odit cumque laborum possimus dolor incidunt?
    </p>
</div>

large화면 이상에서는 똑같이 적용하다가 미디움 화면부터 달라진다.
화면에 맞게 적절하게 사용하면된다. 프로젝트는 풀스크린으로 시연을 할것이니 왠만하면 그냥 container쓸듯하다.

83. Grid system

element를 컬럼으로 배치하고 싶을때 flexbox를 기준으로 만들었다.
그래서 같은 것이니 조합해서 사용할 수 있다.
CSS Grid와 bootstrap의 Grid는 이름만 같고 다른 것이다.
css는 2차원배치 bootstrap은 1차원배치이다.

83.1 col class

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

row가 하나의 행을 정의 하나의 행을 Column으로 나누는 것임.
row클래스는 flex박스이다.
사진참조
row라는 flex박스안에 담긴 col들은 1대1로 비율을 나눠가진다.
row를 여러개 만들면 여러 층을 쌓을 수 있다.

84. Grid system-2

1개의 row에는 12개의 컬럼이 존재한다.. col-숫자로 비율을 정할 수 있다.

<div class="row">
    <!-- 12개의 컬럼이 존재함. -->
    <div class="col-12">
        12개의 컬럼 모두 차지.
    </div>
</div>

<div class="row">
    <div class="col-8">
        2/3차지
    </div>
</div>

<div class="row">
    <div class="col-8">
        2/3차지
    </div>
    <div class="col-4">
        1/3차지
    </div>
</div>

85. Grid system-3

화면 크기에따라 변경할 필요가 있다. (우리프로젝트에선 상관x)
col class에도 sm /md /lg /xl / xxl 등등이용할 수 있다.

<div class="container">
    <div class="row">
        <div class="col-6 col-lg-12">1</div>
    </div>
</div>

보통시엔 6칸인데 lg화면일때 12칸을 가지게 된다.

<div class="container">
    <div class="row">
        <div class="col-12 col-lg-6">1</div>
        <div class="col-12 col-lg-6">2</div>
    </div>
</div>

큰화면일때는 양옆으로 작은화면일땐 쌓이게 만들수도 있다.

86. Grid system-4 Reordering

화면이 작아졋을때 위에 있는 코드가 위로 올라가게 할 수는 있는데
아래에있는 코드가 위로 올라가게 하고싶다.

<div class="container">
    <div class="row">
        <div class="col-lg-2 order-lg-2">side content</div>
        <div class="col-lg-10 order-lg-1">main</div>
    </div>
</div>

작은화면은 지정하지 않앗으니 위에있는게 위에나옴(side content)가 위로
큰화면이 되면 order가 뒤바뀜

---용어설명---
화면 크기에 따라서 디자인이 달라진다. -> responsive web design 반응형 웹 디자인 이라고 한다.
웹앱을 사용하는게 스마트폰 태블릿 pc이기도 하다. 기기가 많아지면서 화면크기에따라 변하게 만들어줫다.
요새는 모바일 기준으로 먼저 디자인을 하고 pc를 만드는게 보통이다

87. Grid system-5

col안에 또 row를 만들어서 나눌 수도 있다.

<div class="container">
    <div class="row">
        <div class="col-3">1</div>
        <div class="col-4">2</div>
        <!-- .col>.row>.col*2{$} -->
        <div class="col">
            <div class="row">
                <div class="col">1</div>
                <div class="col">2</div>
            </div>
        </div>
    </div>
</div>

이러면 3:4:2.5:2.5로 나눈다. 안에서 남은 5를 1대1로 나누기때문

<div class="row">
    <div class="col-3">1</div>
    <div class="col-4">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
</div>

이런식으로 작성해도된다. col을 그냥쓰면 결국 flex : 1이랑 마찬가지이다. 남은부분을 비율 1씩먹는다는 뜻
원하는 레이아웃을 만들어서 잘 배치하면 된다. 쉽지는 않지만 그냥 만드는 것 보단 쉽다.

88. Carousel(회전목마)

image slide show를 만드는 것이다. 쇼핑몰에서 사진 하나씩 넘겨볼때 쓰는 것 크기가 같은 파일이 필요하다.

<div id="carouselExample" class="carousel slide">
    <div class="carousel-inner">
        <div class="carousel-item active">
        <img src="img/1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
        <img src="img/2.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
        <img src="img/3.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

밑에 옵션을 보면
interval number 밀리세컨드 몇초마다 넘어가게 하기
attribute로주거나 javascript로 줄수잇음.
ride 자동으로 넘어가게 할 수있다.
data-bs-ride="carousel" data-bs-interval="1000" 헤주면 1초마다 자동으로 넘어간다.