TechLabs

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

1. Flex이란? - 중심축을 기준으로 화면 위에서 정렬하는 것을 의미한다. - 정렬 중에서 space 관련 정렬이 있는데 미묘하지만 차이를 잘 알아두기.

레이아웃을 float를 이용하여 만든 양식 1. Layout이란? - 화면 위에서 구성 또는 배열하는 작업이다. - 반응형 웹에 적절하지 않아서 현재 잘 이용하지 않는 방식이다. 가끔 디자인을 강조할 때 사용한다. - float, flex, grid 순으로 발전해왔다. flex와 grid는 상황에 따라 혼용한다. 2. float 개념 float를 설정하면 바로 뒤에 있는 태그가 따라 들어온다. 헤더 안에 메뉴를 만들 때, display와 text-align을 적절하게 이용하면 가운데 정렬을 할 수 있다. 3. clearfix - float를 적용한 뒤에 바로 밑에 있는 태그가 딸려 올라온다. 이를 방지하기 위하여 clear 속성을 이용하는데, 더 편리하게 이용하게 하기 위하여 클래스 이름을 clearfi..