HTML-CSS

/* * { 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%; ..

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..

● [CSS] - float 최근에는 잘 쓰이지 않지만 그래도 옛 웹브라우저에서는 쓰였던 속성들이기 때문에, 내가 어떤 브라우저들을 마주칠지 모르니 . . 공부해본다 . . ● float의 특징 float는 붕뜨는 속성이 있다. 아래 파랑 에 float 속성을 부여해보겠다. 위와 같이, float 속성을 부여하면 position: absolute; 처럼 기존 요소들의 흐름이 차례대로 다시 채워지고, 파랑 는 공중에 띄워지게 된다. position과 다른 점이 있다면, 바로 위의 부모가 기준이 된다는 점이다. 즉, 같이 부모에 영향을 받지만, position은 static이 아닌 부모요소를 찾아가고 float은 바로 직속 부모를 찾아가게 된다. float끼리 정렬된다. 아래와 같이 빨강 에도 float: ..