CSS - Grid(1)

Grid

12컬럼이 기본. 

유연성을 위해서, css box model이라는 걸 사용해서 나타낸다. 그리드는 박스들로 이루어져 있음. 


((((
box model은 높이, 너비, 마진, 패딩과 보더를 정의한다.

눈에 보이는 모든 엘리먼트들은 박스 안에 있다. 
css요소들은 각자의 크기, 위치, 그리고 stacking level(z축)을 box model요소와 함께 정의한다. 

모든 박스들은 사각형의 공간을 가지고 있다. 그 안에는 아무 글자나 그림 등이 들어갈 수 있다. 
이 내용들의 한 면 혹은 여러 면이 패딩 --> 보더 --> 마진으로 둘러싸여 있을 수도 있다. 
))))

아무튼 그리드에는 containers랑 items라는 두 가지 타입의 레이아웃이 있다. 

아이템의 너비는 퍼센트로 설정된다. 그리고 이들은 항상 부모 요소에 따라서 상대적으로 변하는 값이다. 
아이템 간의 간격은 각각의 아이템이 가진 패딩으로 조절된다. 
breakpoints라는 게 있는데, xs, sm, md, lg, xl 이렇게 화면 크기를 나누는 기준을 정해 놓고 크기에 따라 반응하는 스타일을 설정할 수 있다. 
각각의 breakpoint에는 그냥 정수 값이 들어갈 수 있다. 12개의 컬럼 중에서 이 컴포넌트는 몇 개나 차지해야 하는지를 나타낸다. viewport가 변해서 breakpoint를 지날 때마다 그 값이 바뀌게 되면서 레이아웃이 바뀌는 것이다. 



Fluid 그리드는 콘텐츠의 크기를 설정하기 위해서 컬럼을 사용한다. 유동적인 그리드 레이아웃은 브레이크 포인트를 기준으로. 

Basic 그리드는 컬럼의 너비를 정수 1부터 12까지 중 하나로 고정한다. xs가 뭐다~라고 설정하면 화면 크기가 더 커져도, breakpoint와 상관 없이 컴포넌트는 항상 딱 그만큼의 자리를 차지한다. 

<Grid container spacing={2}>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>




여러 개의 breakpoint를 가진 그리드는 화면의 크기가 커져서 브레이크 포인트를 지날 때마다 
레이아웃이 변경된다. 이때 더 큰 breakpoint가 작은 breakpoint에 지정된 값을 덮어버리기 때문에 크기가 '커질 때'라고 하는 것이다. 


<Grid container>
  <Grid item xs={12} sm={6}>
    Item 1
  </Grid>


xs={12}는 뷰포트가 작은 경우(600픽셀 미만) 컴포넌트가 전체 너비를 차지하도록 설정
sm={6}는 뷰포트가 600픽셀 이상인 경우 컴포넌트가 뷰포트 너비의 절반만 차지하도록 설정

























((((Logical Properties and Values란?
이 모듈은 논리적인 요소와 값을 정의하는데, 레이아웃에서 방향이나 차원을 물리적으로가 아니라, 논리적으로 조정한다. .
논리적 요소들은 방향에 "상대적"이다.

예를 들면 선의 시작점은 언제나 왼쪽이 아니다. 
영어나 포르투갈어는 왼쪽에서 오른쪽으로, 그리고 위에서 아래로 써지지만
히브리어나 아랍어는 오른쪽에서 왼쪽으로, 위에서 아래로 쓴다. 

어떤 writing모듈에서는 텍스트 라인이 세로로 구성되어 있다. 
중국어, 베트남어, 일본어, 한국어는 전통적으로 위에서 아래로, 
오른쪽에서 왼쪽으로 썼고 전통 몽골어는 위에서 아래로, 왼쪽에서 오른쪽으로 썼으니까. 

css에서 논리적 속성은 이런 차이점을 반영하고.. 
논리적 속성과 그 값은 추상적인 용어인 block과 inline을 사용해서 진행 방향을 설명한다. 이 용어의 물리적인 의미는 쓰기 모듈에 따라 달라진다. 

block 차원은 한 줄 내에서, 텍스트 흐름에 수직. 
inline차원은 한 줄 내에서, 텍스트 흐름에 수평. 

나중에 flex나 grid에서 
justify-content는 그 흐름에 수평이고
align-items는 그 흐름에 수직인 거랑 마찬가지로.

아무튼 css는 처음에는 물리적 좌표만을 사용하기 위해서 설계되었는데, 이제는 블록의 시작! 인라인의 시작! 인라인의 끝! 이런 상대적인 논리 값도 사용을 하고 있다. )))




((((
intrinsic size(콘텐츠 기반 사이즈)란???

css요소의 본래 크기를 말한다. 
그 콘텐츠(이미지, 비디오 등) 자체나 기본 스타일 규칙에 의해서 원래 가지고 있던 사이즈. 


extrinsic size(맥락 기반 사이즈)란???

외부 요인에 의해서 결정되는 요소의 크기를 말한다. 
요소 자체의 콘텐츠나 기본 스타일이 아닌 부모 요소, 주변 요소, css 스타일 규칙 등에 의해서 결정. 

그냥 css속성에 의해서 설정한 width, height, max-width, max-height, min-width, min-height 이런 거

))))))))