Enjoy Programming

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

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

이번엔 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 ..

자 잠시 중간타임으로 그리드 컨테이너의 프로퍼티를 알아보자 외우진 않더라도 뭐가 있는지만 체크해보자 1. display - 그리디 컨테이너를 정의한다. 2. grid-template-rows - 명시적 행(Track)의 크기를 지정 3. grid-template-columns - 명시적 열(Track)의 크기를 지정 4. grid-template-areas - 영역이름을 참조해 템플릿을 만든다 5. grid-template - grid-template-XXX의 단축 속성 6. row-gap(grid-row-gap) - 행과 행 사이의 간격을 정의 7. column-gap(grid-column-gap) - 열과 열 사이의 간격을 정의 8. gap(grid-gap) - xxx-gap의 단축 속성 9. gri..

오늘의 css 챌린지 과제는 그리드 박스를 이용해 화면 레이아웃 잡아주기이다 매우 간단했다. 조건은 flexbox를 이용하지 않고 사용하는 것이다. 그냥 딱 봤을때 4분할만들어주고 마지막 요소에 다시 4분할 만들어주면 된다. 윈도우 전체 그리드 하나 만들어주고 그안에 main-section과 mini-section을 만들어 주었다. 자 이제 css를 보자. 모두를 감싸는 박스를 grid로 지정을 해주고 높이도 준다(높이 주는거 잊지말자 높이 안주면 그리드박스 안보임) 그리드 템플릿으로 영역을 지정해준다 아래 코드에 각 영역마다 grid-area 이름을 지정을 해줬다. 그리고 각 영역의 row와 column을 1fr씩 크기를 지정해줬다 fr을 잠시 설명하자면 비율로 영역을 나눠주는데 3개의 칼럼이 있다고 ..

자 오늘 css master challenge 두번째 과제이다... 이제 막 그리드를 배웠다.. 과제물을 보고서 음 감이 오다가도 안왔다. 과제물은... 이 포스터를 clone하는 것이다~ 일단 html 코드부터 보자 일단 큰 그리드박스를 만드려고 하나의 grid-content를 만들고 그 안에 header, content, aside, footer를 만들었다. 그리고 그안에 텍스트들은 span태그를 이용했다 이제 css를 보자. 우선 큰 그리드 박스를 만들어줘야 된다. 포스터상에 가운데 박스를 보니 3분할로 나누면 되고 row도 3분할이면 될 거같다. 사이즈는 실측이랑 좀 다르긴 한데 column은 3개로 200px씩 나누었고 row는 사이즈 오차는 있지만 일단 비슷하게 세개로 나누었다. 그리고 각 박..