Enjoy Programming

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

부모는 어떤 방식으로 자식을 위치 시키는가 flex박스에서 자식요소들에 위치를 시킬땐 분명 부모요소에 명령을 줬다 그런데 자식요소에게 명령을 줄 수 있는 property가 있다 바로 align-self와 order이다. align-self는 align-items와 비슷한 일을 하는데 이는 cross axis에 관한 내용이다 하지만 align-items와는 다르게 한 box에만 해당한다. 예를들어 박스 세개를 설정하고 flex시켜준 뒤 하나만 화면 세로 중앙에 배치하고 싶으면 align-self를 이용해서 center로 지정해주면 된다. *단 기본적으로 부모 요소 박스는 자식요소 박스의 height와 같다 따로 부모요소의 height를 꼭 지정해줘야 뷰포트 상에 세로 위치를 변경할 수 있다. 그리고 ord..

flex-box의 룰은 간단하다. 1. flexbox는 자식요소와 이야기 하지 않는다. 간단히 말해 내가 움직이길 원하는 박스들이 있다면 그 박스들에 flexbox로 조정을 하는게 아닌 그 박스들을 감싸는 flexbox container box를 만들어서 거기에 flexbox로 이야기 해야한다. 항상 붙어있는 부모 요소가 자식 요소의 위치를 움질일 수 있다는 얘기. 2. flexbox는 main-axis와 cross-axis가 있다. flex-direction : row일때 (default) - 수평축이 main-axis main-axis일때 justify-content를 사용하면 box들을 수평축에서 이동이 가능하다. cross-axis방향으로 box를 이동할 땐 align-items를 사용하면 된다...

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

금일 과제는 이 레이아웃을 만드는 거다~ 우선 내가 만든 코드는 깃헙주소를 적어놓겠당 github.com/lee-tae-eon/cocoa-challenge/tree/main/library-screen lee-tae-eon/cocoa-challenge nomad coder cocoaclone challenge . Contribute to lee-tae-eon/cocoa-challenge development by creating an account on GitHub. github.com 이제 코드를 리뷰해보면 먼저 레이아웃이아닌 바깥영역은 검은색으로 지정하고 height 100vh로 지정해놓았다. 그리고 레이아웃을 중앙에 위치시키기 위해 flex, center로 놓는다. 그리고 레이아웃을 감싸는 큰 박스 ..