[CSS] display (block, flex, grid)

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Display

display: none; = 표시 안함

//==========
< outside >
block
    - 일반 블록, 줄바꿈
   
inline
    - 크기를 내용(실제 차지하는 크기)만큼 줄임
    - inline 속성 끼리 한줄로 만듬(2개 모두 inline 지정해야 함)

inline-block
    - 블록 크기를 유지, 그외는 inline과 동일


//==========
< inside >
    - flex, grid, table
       

//========
* flex 레이아웃

- 플렉서블 박스(flexible box)

    - 예제
.flex1 {
    display: flex;            /* flex형식으로 지정 */
    flex-direction: row;    /* 배열 방식: row=수평, columm=수직 */
    justify-content: center;/* 가로 정렬: center=중간, flex-start=좌, flex-end=우 */
    align-items: center;    /* 세로 정렬: center=중간, flex-start=좌, flex-end=우 */
}



//===========
* Grid 레이아웃
https://www.w3schools.com/css/css_grid.asp
https://www.vobour.com/-%EB%94%94%EC%9E%90%EC%9D%B8-5%EB%B6%84-%EC%95%88%EC%97%90-css-grid-%EB%B0%B0%EC%9A%B0%EA%B8%B0

- 예제

<style>
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
}

/* .item1 {    grid-column-start: 1;    grid-column-end: 5; }
.item2 {    grid-row-start: 2;    grid-row-end: 4; }
.item3 {
    grid-column-start: 2;    grid-column-end: 5;
    grid-row-start: 2;    grid-row-end: 4;
}
.item4 {     grid-column-start: 1;    grid-column-end: 5;}
 */
.item12 {    grid-column: 1 / 5; }
.item22 {    grid-row: 2 / 4; }
.item32 {    grid-column: 2 / 5; grid-row: 2 / 4;}
.item42 {    grid-column: 1 / 5; }

</style>


...

<div class="wrapper">
        <div class="item12">1</div>
        <div class="item22">2</div>
        <div class="item32">3</div>
        <div class="item42">4</div>
</div>

//=====================
// 참고
// 박스 크기 정하기 기준
https://opentutorials.org/course/2418/13405
box-sizing:
    content-box : 지정한 크기 = 내부 크기(border 제외) , 기본설정
    border-box : 지정한 크기 = 외부 전체 크기