반응형

온라인 강의/Advanced CSS and Sass [Udemy] 70

102. Aligning Tracks

강의를 듣기 전에 몇 문제 풀어보는데 꽤 유용하다 start가 end 값보다 작을 필요는 없다 grid 를 상세히 정리해준 블로그 발견! https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com

99. Naming Grid Areas

grid-template-areas 를 이용해서 각 셀마다 이름을 지정할 수 있다 매우 직관적이어서 오히려 이해하기 쉬운 듯 대신 정확하게 grid-template-areas 에서 모양을 구현해야 한다. .container { display: grid; // grid-template-rows: repeat(5, 120px); // grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 200px [grid-end]; // grid-template-rows: 100px 200px 400px 100px; grid-template-rows: [header-start] 100px [heade..

98. Naming Grid Lines

grid line에 이름을 지을 수 있다 복잡한 부분......... .container { display: grid; // grid-template-rows: repeat(5, 120px); // grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 200px [grid-end]; // grid-template-rows: 100px 200px 400px 100px; grid-template-rows: [header-start] 100px [header-start box-start] 200px [box-end main-start] 400px [main-end footer-start]..

95. Spanning Grid Items

같은 셀에 두 가지 항목을 배치할 수 있다 위로 올리고 싶으면 z-index 이용하기 끝부분이 어디까지 있는 지 모를 때는 -1 작성 .container { background-color: #eee; width: 1000px; margin: 30px auto; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 200px) 1fr; grid-template-columns: repeat(3, 1fr); // grid-row-gap: 20px; // grid-column-gap: 20px; grid-gap: 30px; } .item { border: 1px solid black; padding: 20px; fo..

반응형