Enjoy Programming

자 잠시 중간타임으로 그리드 컨테이너의 프로퍼티를 알아보자 외우진 않더라도 뭐가 있는지만 체크해보자 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는 사이즈 오차는 있지만 일단 비슷하게 세개로 나누었다. 그리고 각 박..

자 grid-template을 배워봤다. 분할이 잘되고 전체적인 html을 다루기가 쉬워진다. 그런데~ grid-template-area 프로퍼티를 사용하지 않고도 똑같이 가능하다 기초적인 걸로~ row와 column의 개념만 제대로 알고 있고 줄의 갯수만 셀수 있으면된다. 바로 grid-column(row)-start(end) 만 잘 이용해도~~ 자 이전 template-area관련 속성은 다 지워주고 보자 자 높이 너비 모두 100px인 4x4의 그리드만 만들어줬다. 아까 언급한 row와 column을 잘보고 줄 갯수만 잘보자 이경우엔 갭을 줬기에 줄갯수가 많지만 잘생각해보면 원래 가로세로 1~5번까지 줄이있다.~ 박스가 네개니까. 이상태에서 첫번째 박스에 grid-column-start: 1; gr..

그리드 템플릿의 영역 지정에 대해서 알아보자. 4개의 박스를 그리드로 지정하고 grid-template-columns를 200px씩 지정해주고 grid-template-rows를 300px씩 지정해줬다. 이걸 간편하게 쓰는 방법이 있는데 바로 repeat()함수를 사용하면된다. repeat( lines, px ) 이런 식으로 지정해주면 된다. 상기 이미지의 경우 rows와 columns를 repeat(4, 200px), repeat(4, 300px)로 지정하면된다. 자 이상태에서 html의 골격에 맞게 header는 위쪽 가운데 content와 nav를 가장 아래 footer를 넣어주자 이때 사용할 속성이 grid-template-areas: 이다!! 사용방법은 먼저 내가 배치하고 싶은 박스들에 이름을 ..

그리드 레이아웃이란! 그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 이 디자인은 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다. 자~ 보자 필자는 이제껏 박스요소를 배치하고 정렬함에 있어 flexbox를 사용해 왔다. 플렉스 박스를 이용해 4개의 박스를 만들어주고 30%의 basis를 갖게 한다. 그리고 격자무늬로 화면에 표시 되기 위해 wrap해주고 4번박스 상단에 margin-top을 준다. 자 이렇게 공간을 가진 화면이 구성되었다. 그럼 여기서 5번 박스 하나를 더 추가한다면?! .... space-between으로 인해 5번이 저 멀리 떨어져 있다. 그리고 마진탑을 ..