Display
div는 기본적으로 block-level이라 한줄에 하나밖에 못들어가고,
span은 기본적으로 inline-leveld이라 공간이 허락한다면 한줄에 여러개가 들어갈 수 있다.
하지만 CSS의 display 속성을 사용하면 이를 바꿀 수 있다.
예를 들어 div를 display : inline-block으로 바꾸거나 span을 display : block으로 바꾼다면 그들의 기본값을 바꿔 줄 수 있다.
- display : inline 은 우리가 지정한 높이와 너비값과 관계없이 내부의 컨텐츠 크기에 맞춰 블럭을 형성
Position
position은 기본적으로 static을 가진다.
position : static; HTML에 적힌 순서대로 자연스럽게 보여주는 것을 의미한다.
position : relative; 컨텐츠를 원래 위치하는 자리에서 옮겨준다.
position : absolute; 는 내 아이템이 담겨있는 가장 가까운 박스 안에서 위치변경이 일어난다.
position : fixed; 는 상자 안에서 완전히 벗어나 윈도우 안에서 움직이는 것
position : sticky; 스크롤링이 되어도 없어지지 않고 원래 있던 그 자리에 남아있음
Flexbox
flexbox에는 크게 2가지 속성값이 존재한다. 첫번쨰는 item들을 둘러싸는 container에 적용하는 속성값, 두번째는 item에 적용하는 속성값이다.
container에 적용 가능한 속성값 : display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
item에 적용가능한 속성값 : order, flex-grow,flex-shrink, flex, align-self
flexbox를 적용함에 있어 중요한 것은 어디가 중심축이 되는가? 이다.
item들의 정렬에 따라 수직 혹은 수평이 중심축이 될 수 있는데 중심축이 아닌 것이 반대축이 된다.
container
display : flex; - 아이템들을 담고있는 container가 flexbox로 바뀜
flex-dirextion : row(기본값); - 아이템 정렬 방향 row-reverse, column, column-reverse
flex-wrap : nowrap(기본값); - 기본값인 nowrap 상태에서는 아무리 윈도우의 크기가 작아져도 다닥다닥 붙어있기만 할뿐 wraping이 되지않음, flex-wrap : wrap; 으로 적용해준다면 꽉차게 되면 아이템들이 자동적으로 다음 라인으로 넘어가게 된다.
flex-flow는 flex-direction과 flex-wrap을 합한 것이다.
ex) flex-flow : colunm nowrap;
justify-content는 중심축을 기준으로 아이템들을 어떻게 배치할 것인지를 알려줌
기본값은 flex-start 처음부터 오른쪽에서 왼쪽으로 정렬, 수직축이 아래라면 위에서 아래로 정렬
flex-end 왼쪽에서 오른쪽으로 정렬, 마찬가지로 수직축이 아래라면 아래에서 위로 정렬
center는 아이템들을 중간으로 정렬
space-around는 아이템들을 둘러싸게 스페이싱을 넣어줌
space-evenly는 아이템들 사이에 똑같은 간격을 넣어줌
space-between은 맨 왼쪽과 오른쪽은 화면에 딱 맞게 넣어주고 중간 간격은 모두 동일하게 넣음
align-items는 반대축에서 아이템들을 어떻게 할지 결정
align-items : baseline; 은 아이템들 내부의 텍스트들만 같은 라인으로 만들어줄 수 있음
align-content는 justify-content와 비슷하지만 반대축의 아이템을 지정하게 된다.
gap : (number)px; - 과거에는 아이템들 사이에 공간을 마진을 이용해서 줘야했는데 이제는 gap을 이용하면 가로와 세로의 간격을 줄수있음
ex) gap : 10px 5px;
items
order : (number); - 아이템들의 순서를 바꿀 수 있는 속성값, 하지만 잘 쓰이지않음
flex-grow : 0; - 창이 늘어나면 컨테이너를 채우려고 함! 기본값은 0
flex-shrink : 0; - 창이 줄어들면 어떻게 작아지는지 비율을 지정! 기본값은 0
flex-basis : (number)% ; - 창의 크기가 얼마가 되든 일정한 비율에 맞춰 아이템들의 크기가 변하게 만들어줌. 아이템들의 flex-basis 퍼센트의 총합이 100이 될 것
align-self는 컨테이너를 벗어나 아이템 하나만을 배치하고 싶을 때 사용
* flexbox 실습 게임 ➡️ https://flexboxfroggy.com/
