CSS

htmlcssbox를 3개 만들고 각 box에 height, width를 100px씩 준다. 이 귀여운 파란 box는 굉장한 margin 을 갖는다. 추측이지만 자신의 height 만큼 가로로 자리를 차지하는 것 같다. 이 상태는 기본 상태로 display: block

flex 는 강하다. 그래서 children과 대화하지 않는다. flex로 box를 움직이고 싶다면 그들의 부모, 즉 flexbox container를 만들어야 한다. flexbox container를 통해 box들을 배치해야 하는 것이다.css과감하게 body 에 d

csschild 에게 직접 입력했더니 2번째 box만 이동했다.여태까지 parent에 property를 주어 child를 움직였다. 하지만 align-self는 child에게 직접 property를 주어 개별적으로 배치한다. child에게 직접 property를 주기

position을 조지려고 한다. css는 개월 수로 따지면 2개월은 한 거 같은데 제대로 정리를 안 해서 그런지 할 때마다 헷갈린다. 모든 태그는 기본적으로 position: static이다. 이제 태그를 옮기고 싶을 때 position: relative 를 사용하

grid는 중요하다. 간편하게 레이아웃을 짤 수 있다. 이제 grid가 얼마나 훌륭한 개념인지 알아보자. 별 볼일 없는 4개의 블럭이 있다. 이 녀석들을 사이에 일정한 공간을 만들고 싶다. cssparent에 flex를 주고 wrap으로 묶고 space-between

다짜고짜 grid와 함께 시작하는 아침이다.

grid-template-columns: repeat(4, 100px) 에서 100px을 1fr으로 바꿨다. fr 는 fraction이다. grid-template-columns: repeat(4, 100px) 일 때 body가 남는다. grid-template-col

기본적인 4 x 4 grid가 있다. 이런 밍밍한 grid를 보면 난잡하게 만들고 싶은 충동에 사로잡힌다. parent에 넣어 child에게 적용하는justify-items를 배워야 할 시간이다.justify-items: stretch은 기본값이다. 기본적으로 자식을

a

1fr을 갖는 10개의 column이 4개의 row로 늘어선다. 압력을 가하면 이렇게 변한다. 변화를 막고 최소한의 품위를 유지하게 하고 싶다. 그러기 위해서는 minmax를 사용해야 한다. grid-template-columns: repeat(10, minmax(10

적당히를 모르는 text가 box를 넘어 존재하고 있다. 다른 box는 너무 겸손하다. 무척 혼내주고 싶다. grid-template-columns: max-content 100px 첫 번째 column이 필요한 content만큼 width가 늘어났다. 이제 min-c