css display,position

display

block : 한줄에 하나씩 배치

inline : 해당 엘리먼트 내부에 있는 컨텐츠 크기 만큼만 위치

inline-block : 해당 엘리먼트의 크기만큼 위치

flex

---

flex박스 단계의 속성

- flex-direction : 요소들의 방향을 정해줌

[ row(기본값) / row-reverse(오른쪽>왼쪽) / column(위>아래) column-reverse(아래>위)​ ]

 

- flex-wrap : 요소들이 많아질시 요소들의 처리

[ nowrap(기본값) : 요소들이 많아질시 요소들을 작게 만들어 빼곡하게 처리 / wrap : 요소들이 많아질시 지정된 크기를 바꾸지 않고 다음 줄로 넘어감 / wrap-reverse : wrap의 반대방향으로 ]

 

- flex-flow : 위 direction과 wrap 속성들을 한번에 설정

[ row wrap ]

 

- justify-content : 요소들을 어떻게 배치할 것인지

[ flex-start(시작점에 붙음) / center(중앙) / flex-end(마지막 지점에 붙음) / space-between(박스내부 공간을 모두 빼곡하게 거리유지하여 공간을 꽉 채운다.) ]

justify-content속성은 flex-direction속성과 함께 생각해주어야 한다

요소들의 방향이 위에서 아래방향일시 위가 시작점, 밑에서 윗방향일시 아래가 시작점이다.

direction은 시작점자체를 바꾸어 진행방향을 설정하고

justify-content는 설정된 시작점과 진행방향을 기준으로 시작점인지, 중앙지점인지, 마지막 지점인지 선택하는 속성이다.

 

 

-align-items : 반대 중심축을 기준으로 시작점인지에 붙을지, 중앙지점에 모일지, 마지막지점에 붙을지 정함(!justify-content)

-align-content : 반대 중심축을 기준으로 flex라인이 여러개일시 그 간격대신 전체 flex박스를 배치하는 속성

align-items와 align-content의 공통점은 justify-content와는 달리 flex-direction으로 설정한 방향의 반대중심축을 기준으로 잡는다는 점이고 차이점은 [ items - 전체아이템들을 원하는 곳에 배치 / content - flex라인이 여러개일시 간격을 설정하는 것이 아닌 전체 flex박스를 배치한다는 느낌]

---

flex박스내의 아이템 단계의 속성

- flex-grow : 일반적으로 flex들의 아이템들은 자신들의 크기를 유지하려하지만 작아질시엔 한 라인에 있고자 하는 습성이 있어 전체 아이템들이 고루 작아진다.

이 속성은 아이템에 지정하며 해당 플렉스 라인을 지정한 비율대로 꽉 채우려는 속성이다

a{flex-grow : 1;}
b{flex-grow : 2;}

]

flex-grow가 2인 것은 1인것의 2배크기로 유지하려 한다.

- flex-shrink : flex-grow와 반대로 작아질시에 크기유지에 관한 속성이다.

- flex-basis : 위의 두 속성[ flex-grow / flex-shrink ] 를 쓰지 않고

해당 아이템에 지정해 주는것으로 해당 라인내의 퍼센트를 직접 설정한다

[ flex-basis : 60% ]

- align-self : flex박스 단계가 아닌 아이템 별로 [ justify-content ] 와 같은 배치 속성을 지정할 수 있음

---

flex박스를 익힐 수 있는 게임

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

 

position

static : 기본적으로 주어진 속성값, 원래 위치해야 하는 자리에 위치함

relative : 원래 위치해야 하는 자리에서 top,left등으로 위치를 변경가능

absolute : 자신의 부모 엘리먼트를 기준으로 top,left등으로 위치를 변경가능

fixed : 웹페이지 시작점을 기준으로 top,left등으로 위치를 변경가능하고 고정됨

sticky : 원래 위치해야 하는 자리에서 fixed처럼 고정됨

​