flex2 CSS Grid 이해하고 사용하기 이 글은 CSS Grid에 대한 이해를 돕는 글입니다. 자세한 속성과 사용법에 대해서는 참고 사이트 확인해주세요. Grid 가 나오는 이유는 무엇일까? Grid를 도대체 왜 사용해야하는지 알아야 어떤 상황에 어떻게 사용할지 정해지기 때문에 알아보겠습니다. 결론부터 말씀드리면 기존에 float를 이용해서 레이아웃을 만들 때는 수직 즉, 세로 방향에 대해서 만들기 어려움이 있었습니다. 이런 어려움을 해소시키기 위해서 나온 것이 *flex *입니다. Flexbox를 이용해서 레이아웃을 작성하게 되면 수평 혹은 수직 구조를 작성할 때 보다 쉽게 작성할 수 있었습니다. 하지만 수평과 수직 구조를 동시에 작성하기에는 Flexbox를 이용하는데에도 한계가 있었습니다. .flex_container { width: 50.. 2020. 6. 13. Flexbox로 반응형 레이아웃 만들기 Flexbox란? 기존에 컨텐츠들을 수평으로 배치할 때 float 혹은 inline-block 로 마크업할 때의 불편함을 해결하여 쉽게 배치할 수 있도록 CSS3에 추가된 방식입니다. 크게 컨텐츠들을 감싸는 Flex Container 와 각 컨텐츠들인 Flex Item으로 구성되어있어 각 요소에 적절한 속성과 값을 적용해서 원하는 레이아웃을 구성할 수 있습니다. Flexbox 지원 범위 Flexbox는 좋은 기능인 만큼 이전 버전의 브라우저에서 지원을 안해주기도 합니다. 실제 서비스를 개발하기 위해선 이를 잘 알고 써야합니다. IE는 9버전 이하는 지원을 하지 않으며, 10,11에서도 버그가 존재합니다. 모바일 웹에서는 지원을 잘해주고 있습니다. 서비스가 어떤 브라우저까지 지원하는지에 따라 적절하게 사용.. 2020. 6. 6. 이전 1 다음
