Enjoy Programming

이번 과제 완성작이다. 이것도 반응형이고~~~ 역시 grid와 flex-box를 활용해서 만들었다. 주요한건 바디에서 grid-templat-columns, rows를 이용해서 3X4그리드를 만들었고 최소는 max-content, column은 1fr row는 33%씩주고 빨간 부분은 span2를 주고 리스트 부분은 grid-row: span3을 줘서 할당했다. 특별히 많이 활용한건 grid-column과 grid-row를 많이 활용했다. 코드를 보자~ 이렇게 보니 복잡하긴 하다.. 근데 나름 layout에 대한 느낌을 더 많이 생각하게된? 계기였다 참고로 챌린지서 처음으로 내 작품이 올라왔다 ㅋ 기분이 좋았다 ㅋㅋㅋ 나이가 먹어도 이런건 기분이 좋다.

4번쨰 css 레이아웃 챌린지는 이렇게 레이아웃을 잡는 챌린지였다. 짧게나마 코드 리뷰를 해야지.. 중점은 반응형으로 며개의 칼럼이 생기더라도 아래로 계속 이어 나갈수 있게 만드는 ? 암튼 반응형 페이지 만드는것 전체적으로 grid를 활용했다. html 코드는 반복반복이다 어짜피 같은 그리드가 계속 반복되니까 css 코드를 보면 챌린지 당시에는 이렇게 줬다는게... 멍청했다... 그냥 바디에 그리드 주고 auto-fit주면 되는건데... auto-fill과 auto-fit을 잘 이해하지 못했었다. 다시 짠다면 바디에 grid-template-columns를 repeat(auto-fit, minmax(Xxxpx, 1fr)요렇게 주고 로우는 필요한만큼 주고 auto-rows를 다시 주면 되고 헤더는 grid..

자 grid container의 property에 대해서 알아 보자. justify-items, align-items : 부모 요소에서 쓰는 속성 먼저 justify-items이다. (align-items는 그냥 cross-axis로 같은 방식으로 작동하니 생략한다.) justify-items의 기본 값은 strech이다. 각 그리드의 수평 으로 cell을 꽉 채워준다. 자 이제 value를 바꿔보자 justify-items: start 자 의문이 들것이다. 어떤기준으로 저크기가 되는지.. 일단 먼저 align-items와 justify-items는 기본속성이 strech이다 그러니 배경색이 전부 꽉 채워져 있었다. 그런데 이 값을 start나 center 등등으로 바꿔주면 item의 위치를 결정해주고서..

금일 과제는 이 레이아웃을 만드는 거다~ 우선 내가 만든 코드는 깃헙주소를 적어놓겠당 github.com/lee-tae-eon/cocoa-challenge/tree/main/library-screen lee-tae-eon/cocoa-challenge nomad coder cocoaclone challenge . Contribute to lee-tae-eon/cocoa-challenge development by creating an account on GitHub. github.com 이제 코드를 리뷰해보면 먼저 레이아웃이아닌 바깥영역은 검은색으로 지정하고 height 100vh로 지정해놓았다. 그리고 레이아웃을 중앙에 위치시키기 위해 flex, center로 놓는다. 그리고 레이아웃을 감싸는 큰 박스 ..