[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 : 지정한 크기 = 외부 전체 크기