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

2주간 펼쳐지는 노마드코더의 css challenge오늘 과제는 이 아름답고 훌륭한 페이지를 따라하는 것이다. 예전에 챌린지 했을 때 평균 6시간 걸려서 도중 포기했었는데 이번에는 어떨지 무척 궁금하다. html일단 body 위에 container를 만들고 그 안에 h

이제 left 와 right를 분할하면 된다. 이제 left 를 고정할 차례다.fixed에 top, left를 0을 주어 고정시키고 width로 공간을 마련했다. paddding으로 옮기는 게 좋은지, top, left를 이용하여 옮기는 게 좋은지 아직 모르겠다. 일

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

왼쪽 파트는 display: fixed로 고정하고 오른쪽 파트는 스크롤할 수 있게 만든다. navigation bar가 최상단에 들어간다. htmlbody 는 header 와 main로 나눈다. logo와 navigation bar 그리고 toggle이 들어갈 head

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

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

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

위코드를 앞두며