Enjoy Programming

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

자 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의 위치를 결정해주고서..

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

노마드 코더 챌린지 2번째 css-master 코스다 현재 코코아 클론 챌린지는 끝냈고 css-master코스와 vanilla javascript 코스 두개를 병행한다 그리고 유튜브 클론코딩과 es6강의도 함께 병행 하고있다.~ 시간이 부족하다 ㅋㅋ 어제 첫 레이아웃 챌린지는 이 포스터를 클론했다. flex-box를 이용해서 하는 건데 우선 내가 짠 html코드는 이렇다. 총 세개의 섹션으로 구분하고 헤더부분에 heading tag 두개 그리고 보더라인 아래 리스트 형태의 텍스트가 있는데 이것은 ul과 span으로 구분하고 ul에 li를 다 때려박았다. 마지막 섹션은 서클들이 들어가는데 아무래도 배운내용이 flex-wrap을 이용하는 것 같으니 하나의 박스에 다담았다 위 ul도 마찬가지다. 이제 css를..