전체 글

/* * { box-sizing: border-box; } */ body { margin: 0; padding: 0; position: relative; overflow: hidden; } .human { width: 250px; position: absolute; left: calc(50% - 125px); top: 50px; z-index: 100; } .background { width: 110%; position: absolute; z-index: -1; } .pipe { width: 500px; position: absolute; top: 300px; z-index: 1; } .textWrap { position: absolute; left: 50%; top: 200px; width: 60%; ..

● 오늘 공부한 것 https://ddaeunbb.tistory.com/97 ● [CSS] grid (부모에게 주는 속성) ● [CSS] grid (부모에게 주는 속성) display: grid; grid-template-columns grid-template-rows gap grid-auto-rows justify-items align-items 아래와 같이 먼저 큰 안에 12개의 가 있다고 설정해보았다. display는 block이다. 다음 d ddaeunbb.tistory.com https://ddaeunbb.tistory.com/98 ● [CSS] grid (자식에게 주는 속성) ● [CSS] grid (자식에게 주는 속성) grid-column grid-row justify-self, alig..

See the Pen Pixel Repulsion by ddaeunbb (@ddaeunbb) on CodePen.

● [CSS] grid (자식에게 주는 속성) grid-column grid-row justify-self, align-self 먼저, 설명하기 이전에 아래와 같이 부모에는 grid가 적용되어있고 12개의 div를 4개의 fr로 나누어 정렬하였다. grid-column 각 요소들이 x축에서 얼만큼 차지 할 수 있을지 설정할 수 있다. 첫 번째 사진은 grid-column: 2; / 두 번째 사진은 grid-column: 1 / span3; 으로 설정하였다. 또 그리드 형식은 아래와 같이 선을 기준으로 위치를 지정할 수 있다. 첫 번째 사진은 그리드의 형식을 볼 수 있다. 두 번째 사진은 1이라는 에 grid-column: 2 / -2; 값을 적용한 것이다. 세 번째 사진은 1이라는 에 grid-colum..

● [CSS] grid (부모에게 주는 속성) display: grid; grid-template-columns grid-template-rows gap grid-auto-rows justify-items align-items 아래와 같이 먼저 큰 안에 12개의 가 있다고 설정해보았다. display는 block이다. 다음 display: grid를 넣고 설명을 진행해보겠다. grid-template-columns 는 가로로 몇개의 컨텐츠들을 줄세워 정렬할 것인지를 정할 수 있다. 단위는 px, % 등 모두 사용할 수 있지만 fr(fraction) 단위를 사용해서 비율로 넣을 수 있다. grid-template-rows 는 세로로 정렬된 칸마다의 비율을 줄 수 있다. 아래는 1fr 2fr 3fr 4fr..