CSS layout(구조, 배치) Grid 기초 정리

web에서 구조를 만들거나 배치를 할 때 사용되는 Grid에 대해 알아보자. Grid를 가지고 굉장히 다양한 방법을 활용하고 복잡하게 만들 수도 있다. 그러나, 이 글을 보고 있는 대부분의 사람들은 기초 수준일 것이라 판단된다. 따라서 바로 적용가능하고 쉬운 부분위주로 짧고 쉽게 적어보겠다. 0. 들어가면서 보통 Grid 요소에서는 부모요소와 자식요소로 나누어 부른다. 부모요소를 Grid Container라고 부르고, 자식 요소는 Grid Item이라고 부른다. 이렇게 나누는 이유는 부모요소에 Grid라는 틀을 부여하고, 그 틀에 맞게 자식요소가 들어간다고 생각하면 될 것 같다. 우선은 기본 셋팅부터 하자. A B C D E F 사용법은 간단히 아래와 같이 display: grid; 라고 적어주기만 하면..
Web/CSS 2022. 2. 9. 20:20
1
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함