TechLabs

1. grid Layout 반응형 웹 페이지를 쉽게 구현 가능하다. 2가지 레이아웃은 상황에 따라 혼용하여 사용하므로, 적절한 곳에 이용하기. flex Layout 1차원 구조에 유리하다. 2차원 구조를 만들기 위해서 여러번 중첩시켜야 한다. 비교적 작은 단위 레이아웃에 적합하다. 변경 가능성이 있는 경우에 유리하다. grid Layout 2차원 구조에 유리하다. 큰 규모 그리고 확실한 경우에 유리하다. 효율적으로 반응형 디자인 구현이 가능하다. 하지만 모든 브라우저에서 지원되지 않는다.

1. Grid이란? - 레이아웃을 화면에 표시하는 방법 중 하나이다. flex와 많이 사용되기 때문에, 적절하게 상황에 맞게 사용하면 된다. 2. 바둑판 레이아웃 만들기 grid를 이용하여 바둑판 레이아웃을 설정할 수 있다. 이 때 grid-template-columns를 이용하면 된다. 정렬 방향을 열의 방향으로 설정하는 속성이다. auto auto auto 라고 설정하면 가로의 사이즈에 꽉 채워서 3개의 박스가 만들어지게 된다. 따라서 3 X 3 형태의 바둑판을 만들 수 있다. 3. 홈페이지 레이아웃 만들기 grid를 이용하여 홈페이지 레이아웃을 만들 수 있다. grid-template-areas와 grid-area를 이용하여 원하는 대로 배치가 가능하다. 주의할 점은 먼저 grid-area에 어떤 ..