Enjoy Programming

자 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번이 저 멀리 떨어져 있다. 그리고 마진탑을 ..

이번엔 flex-basis에 대해서 알아보자. 이 속성도 자식요소에 적용시키는 속성이다. flex-basis flexbox의 initial size를 지정해준다. 얼핏 보면 width값을 지정하는 것과 비슷하다. 예를 들어 보자. width: 300px;을 지정한것과 flex-basis:300을 지정한 박스는 보기와 같이 같다. 자 여기서 기준은 flex-direction이 row일때를 기준인 것이다 다시말해 main-axis상에서 flex-basis가 300px이다. 만약 축을 뒤집는 flex-direction: column이 된다면? 바뀌었다. 바로 main-axis를 따라 basis값으로 height가 300px이 되었다. 이것이 그저 width로 설정한 것과 다른 점이다.

자 이번엔 flex-shrink와 flex-grow를 알아보겠다. 이것도 flex-box의 자식요소들이 사용하는 속성이다 1. flex-shrink flex-shrink의 경우 예를 들어 플렉스 박스의 크기가 정해져있더라도 브라우저의 크기에 따라 flexbox는 유동적으로 사이즈가 찌그러지거나 그대로 유지할 수 있다. flex-box들을 일정값을 주더라도 화면 크기가 작아지면 이 박스들은 일정 비율로 작아지며 그 라인에 채워지는 것을 볼 수 있는데 어떤 박스가 어떤비율로 줄어들지 아니면 유지할지를 결정하는 것이다. 예를 들어 width: 300px height: 200px 의 박스 세개가 있고 이들을 flexbox로 만들었다. 가운데 요소만 블랙으로 만들어주었다 기본적으로 모든 박스는 flex-shrin..

flexbox는 width와 height를 설정했더라도 몇개를 만들었든 한 라인에 모두 정렬된다. 만약 7개의 200width를 가진 박스를 flexbox로 만들어주면 사진에서 보이 듯 그냥 다 때려박는다. 이말은 flex-wrap이 default로 no wrap상태라는 거다. flex-wrap이란 The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. CSS: Cascading Style Sheets | MDN CSS: Cascading St..