루체

grid-template-columns / grid-gap fr = fraction 이라는 뜻으로 4 : 6으로 나누겠다! 라는 말입니다. grid-gap은 grid로 나눠진 부분에 여백을 이렇게 두겠다는 말입니다. grid-template-columns에는 %도 들어갈 수 있지만 %보다는 fr단위를 많이 사용을 합니다. 왜냐하면 스크롤이 생길 수 있기 때문입니다. 그리고 이렇게도 나눌 수 있습니다. grid-template-columns : repeat(3,1fr) 1fr은 3번 쓰기는 귀찮으니까 repeat을 통해 1fr단위로 3단으로 나누겠다~ 라는 말이라고 생각하면 편할 것 같다. 그리고 이럴 수도 있다. 나는 2줄로 정렬을 하고 왼쪽열을 200px로 고정시키고 오른쪽열만 신축성이 있게 만들고 싶..

이번 글은 본문과 내용이 나란히 위치하게 하는 것이 무엇인지에 대한 소개입니다. 여러가지 방법이 있는데 아주 최신의 방법을 쓰려고 합니다. 바로 '그리드'라는 방법입니다. 우선 파일을 새로 만들어서 그리드라는 것이 무엇인지 알아봅시다. 이 각각의 문자에다 테두리를 주고 나란히 배치하는 것을 해보겠습니다. 그러기 위해선 각각 어떤 태그로 묶어주어야 합니다. 지금 그냥 디자인을 하려고 태그가 필요한건데 h1같은 태그를 넣게되면 그 태그는 제목이라는 의미가 있어 사용이 애매하다. 이럴 때 사용을 하는 태그가 바로 라는 태그입니다. 아무런 의미가 없고 그저 디자인의 용도로만 사용하는 태그입니다. div 태그는 block level element 입니다. 같은 목적으로 사용하라고 있는 다른 태그가 하나 더 있는데..