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

flex-box의 룰은 간단하다. 1. flexbox는 자식요소와 이야기 하지 않는다. 간단히 말해 내가 움직이길 원하는 박스들이 있다면 그 박스들에 flexbox로 조정을 하는게 아닌 그 박스들을 감싸는 flexbox container box를 만들어서 거기에 flexbox로 이야기 해야한다. 항상 붙어있는 부모 요소가 자식 요소의 위치를 움질일 수 있다는 얘기. 2. flexbox는 main-axis와 cross-axis가 있다. flex-direction : row일때 (default) - 수평축이 main-axis main-axis일때 justify-content를 사용하면 box들을 수평축에서 이동이 가능하다. cross-axis방향으로 box를 이동할 땐 align-items를 사용하면 된다...