Enjoy Programming

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

그리드 템플릿의 영역 지정에 대해서 알아보자. 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: 이다!! 사용방법은 먼저 내가 배치하고 싶은 박스들에 이름을 ..

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

기본적으로 블럭요소는 옆에 아무것도 올 수 없다. 그저 아래로 쌓아나갈 뿐이다. 이것을 없애주는 것은 display: inline-block으로 옆으로 위치 할 수 있게한다. 근데 display property에는 inline이라는 값도 있다. 무슨 차이인가? 인라인은 박스가아니다. 유동적인 요소라 너비와 높이가 없다. 그저 직선상에 있다는 의미이다. 예를들면 텍스트가 그렇다. .box { background-color: blue; width: 100px; height: 100px; margin-bottom: 2px; display: inline-block; } 이런 코드가 있다고 생각해보자 저상태면 이렇게 박스가 설정 된다. 근데 inline-block을 inline으로 바꾼다면? 화면에 노출 되지 않..