반응형
이번시간에는 grid라는 기술에 대해 배울 것이다.
먼저 새로운 태그를 알아보자.
우리가 배운 h1, li 태그들은 다 의미가 있는 태그들이었다.(제목,목록 등)
하지만 의미가 없는 태그를 사용하고 싶다면?
div태그를 사용하면 된다.
div태그는 아무 의미가 없으면 단순히 디자인 용도(예쁘게 보이기 위해)존재한다.
또한 block level element(줄바꿈이 가능)이기 때문에 용도에 따라 유용하게 사용할 수 있다.
마찬가지로 div태그처럼 의미가 없지만 inline element를 원한다면
span태그를 이용하면 된다.
그리고 div태그들을 하나의 박스로 다시 묶고 싶다면 부모태그를 이용하면 된다.
이제 그리드에 대해 알아보자.
그리드는 파워포인트의 레이아웃이라 생각하면 될 것 같다.
grid-template-columns 옆에 먼저 나오는 숫자는 첫번째 div의 화면을 차지하는 크기고 두번째 나오는 숫자는
두번째 div의 화면을 차지하는 비율이다.
여기서 만약 둘다 1fr로 설정했다면 화면은 항상 1대1의 비율을 유지할 것이고
첫번째는 2fr, 두번째는 1fr로 설정했다면 화면은 항상 2대1의 비율을 유지할 것이다.
반응형
