목록GRID (12)

Enjoy Programming

CSS MASTER challenge 5

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

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

이번에는 minmax속성을 알아보자 minmax는 그리드가 얼마나 작게 혹은 큰 요소가 될 수 있을지 지정하도록 해준다. 음 쉽다. 이런식으로 지정해주면 된다. 화면사이즈가 아무리 줄어도 최소 100px은 유지되고, 화면이 커지면 그냥 화면상 10개의 칼럼이 최대한 나눠 갖는다. 또는 minmax(50px, 150px)이라면 최소 50px은 유지되고 브라우저가 커지면 150px까지만 커지게 되는 것이다. gif를 못만들어서 코드만 사진 올린다...
CSS 2021. 4. 23. 20:42
Grid - Auto Columns and Rows

앞서 다룬 포스트에서는 그리드 전체를 움직이거나 또는 그리드 셀안에서 움직임을 전체로 다루었다. 이번에는 자식요소인 그리드셀 하나씩 다루는 것을 알아보자 먼저 align-self이다. grid-container에 두는 속성이 아닌 각 그리드마다 주는 속성이다. 한번 헤더에 align-self:end;를 줘보겠다. 이렇게 헤더박스셀 하나만 영역을 지정했다 . 다시한번 보면 align-items는 그리드 컨테이너에 속성을 줌으로써 각 그리드 셀을 모두 영역을 주지만 self는 grid박스 자체에 속성을 주고 그 박스 하나만 영역을 다룬다. justify-self도 마찬가지~~~~ 이것도 두가지를 한번에 다룰 수 있는 place-self가 있다. 그리고 자동으로 칼럼과 로우를 지정해 줄 수 있는 grid-au..
CSS 2021. 4. 23. 20:27
Grid - Place content

이번엔 justify-content & align-content를 다뤄보자 우선 앞서 다뤘던 item은 각 셀을 의미한다. 이번에 다루는 content는 그리드 전체 셀을 관장한다 해야하나? 우선 justify-content로 확인해보자 먼제 4x4 100px씩의 그리드를 설정해준다. 기본적으로 justify-content는 start가 default value이다. 여기서 center로 놔보자 이렇게 전체 그리드가 가운데로 움직인다. justify-items는 셀안에서 자식 그리드요소를 움직였다 content는 grid container자체를 움직인다. align-content도 마찬가지다. 다만 주의할 점은 align의 경우 height가 충분하지 않으면 이런 결과를 초래 할 수 있다... grid ..
CSS 2021. 4. 23. 19:59
Grid - Place Items

자 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의 위치를 결정해주고서..
CSS 2021. 4. 23. 13:37
이전 Prev 1 2 Next 다음