공부기록용

Grid Layout grid layout란 이름 그래도 격자 형태의 layout을 만드는 2차원 layout방식을 말한다. grid layout방식에서 grid item의 배치과 정렬은 grid container 내부의 행과 열의 상호작용을 통해 결정된다. grid container: grid 방식으로 layout을 결정할 요소이며, grid container는 기본적으로 block 레벨 요소이다. grid item: grid container 내부에서 grid 방식으로 배치되는 요소 display: grid; grid container로 지정하고 싶은 요소를 다음 속성을 추가여 grid container로 만들어 준다. inline레벨의 요소로 변경하고자 한다면, display: inline-grid..

order flex item의 배치 순서를 설정할 수 있으며, 지정한 숫자에 맞춰 오름차순으로 배치가 진행된다. 기본적으로 코드 상의 순서나 flex direction 설정에 따라 배치 순서가 결정된다. 이를 order을 통해 코드에 영향을 끼치는 것이 아닌 보여지는 순서에만 영향을 줄 수 있도록 설정할 수 있다. order 속성에 정수 값을 각각 지정해 주명 지정한 숫자에 맞춰 item들은 오름 차순으로 배치가 된다. 즉, 이 order 속성은 flex item의 배치 순서를 사용자가 원하는대로 조정할 수 있도록 도와주는 속성이다. ⭐내용실습⭐ 강아지 고양이 비둘기 고라니 호랑이 /*style.css*/ *{ box-sizing: border-box; } body{ margin: 0; } ul{ pad..

🔴flex-basis🔴flexflex-basisflex item의 초기 크기를 지정한다.  초기 크기란 flex container가 만들어지면서 형성되는 flex item의 기본 크기를 말한다.  기본값은 auto로 box-sizing이 따로 설정되지 않은 경우, 콘텐츠 박스의 크기에 따라 결정된다.flexflex는 flex-grow, flex-shrink, flex-basis 세 가지 속성을 정의할 수 있는 단축 속성이다.(세 가지를 한 번에 사용할 수 있게 함)/* grow shrink basis순서로 값을 지정*/.div{ flex: 0 0 200px; /*✔️ flex: 1;을 부여하면 flex-grow: 1; flex-shirnk: 1; flex-basis: 0%; 과 같은 의..

🔴flex-grow 🔴flex-shrink flex-grow flex item이 기본 크기보다 더 커질 수 있는지를 결정하고, flex container 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성이다. 이 flex-grow를 각각의 item에 적용시켜주게 되면 원래 형성되는 기본 크기보다 item을 더 크게, 작게, 각각 다르게 만들어 줄 수 있다. 그러므로 크게 적용될 때를 대비해 여유 공간이 있을 때 이 동작을 확인해 볼 수 있다. flex-shrink flex item이 기본 크기보다 더 작아질 수 있는지를 결정하고, flex container 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성이다. flex-shrink 속성은 플렉스박스에 "flex-wrap:..

🔴align-items 🔴align-self 🔴align-content align-items flex container의 교차 축 위에서 flex item들이 어떤 식으로 정렬될 것인지를 결정한다. (flex container의 관점) align-self 각각의 flex item이 교차 축에서 어떤 식으로 정렬될 것인지를 스스로 결정한다. (flex item의 관점) align-content 교차 축 위에서 justify-content와 동일하게 사용할 수 있는 속성이다. 두 조건이 만족되고 여유 공간이 있을 때만 동작할 수 있다. flex-wrap의 값이 wrap으로 지정되어 있을 때 item을 배치하기 위해 필요한 공간보다 flex container가 더 클 때(넉넉하게 커야함) ⭐내용실습⭐ 강아지 ..

🔴justify-content justify-content flex item들이 flexbox의 주축을 따라 배치될 때, 요소 사이의 공간을 분배하는 방식을 결정한다. ⭐내용실습⭐ 강아지 고양이 비둘기 고라니 호랑이 /*style.css*/ *{ box-sizing: border-box; } body{ margin: 0; } ul{ padding: 0; list-style-type: none; display: flex; height: 200px; border: 5px solid red; } justify-content: flex-start; justify-content: flex-end; > ul의 순서는 유지하지만 배치가 뒤쪽으로 붙게 되었다. 역순❌ justify-content: center > 중앙..