display & position
display
block-level 태그 : div , inline-level 태크: <span>
display: inline; : CSS에서 설정한 크기는 무시하고 안에 들어있는 물건(콘텐츠)의 크기에 맞춰서 크기 변경된다. 👉🏻 물건
display: inline-block; : 상자로 변환되서 한줄에 넣는다. 컨텐츠에 상관없이 CSS에서 지정한 크기에 맞춘다. 👉🏻 상자인데 한줄에 여러개 들어감.
display: block; : 상자인데 한줄에 하나씩 보여준다. 👉🏻 상자인데 한줄에 하나만 들어감.
position
position: static : 디폴트 값으로 html에 정의된 순서대로 보여진다.
position: relative : 원래 있어야하는 자리에서 상대적으로 이동한다.
position: absolute : 해당 item과 가장 가까이 있는 박스를 기준으로 이동함.
position: fixed : 상자에서 완전히 벗어나서 웹페이지 기준으로 이동.
position: sticky : 원래 있던 그 자리에 있는데 스코롤링해도 그 자리에 있다.
FLEXBOX
https://studiomeal.com/archives/197
- 속성
- container에 적용하는 속성
display, flex-direction, flex-wrap, flex-flow,
justify-content, align-items, allign-content- item에 적용하는 속성
- 중심축과 반대축(main axis, cross axis)
- 이 축은 수직이냐 수평이냐에 따라 달라진다.
※ height: % vs vh
height: 100% 부모의 높이의 100%를 채우겠다.
height: 100vh 부모에 상관없이 보이는 view height의 100%를 다 쓰겠다.
container에 적용하는 속성
- dispaly: flex;
- flex-direction: row; row-reverse; column, column-reverse;
중심축을 결정하고 아이템들의 순서를 변경. - flex-wrap: nowrap; wrap; wrap-reverse;
item이 화면에 가득차면 다음줄로 넘어갈지 여부 결정,
wrap-reverse는 Flex 컨테이너 행(行)에 들어가 있고 자르지 않은 경우, 줄바꿈을 하여 복수행(行)이 됩니다. 문자의 표기 방향과는 반대로 배치합니다. 행을 뒤집는다.
- flex-flow: column nowrap;
direction과 wrap을 동시에 작성하는 속성 - justify-content : flex-start; flex-end; center; space-aroud; space-evenly; space-between;
아이템의 순서는 유지한채 중심축에서 어떻게 아이템을 배치하는지 결정(정렬) - align-items: center; baseline;
반대축에서 아이템을 배치,baseline텍스트가 텍스트가 균등하게 보여진다. - align-content: space-between; center;
반대축 기준으로 여러줄들 사이의 간격을 지정.
👨🏻🏫 align-content는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정합니다. 한 줄만 있는 경우, align-content는 효과를 보이지 않습니다.
👍 CSS Tricks for Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
item에 적용하는 속성
- order : 2;
해당 item순서를 정해준다. - flex-grow: 1;
컨테이너의 크기가 늘어날 때 item의 크기가 어떻게 늘어는지 결정 - flex-shrink: 2;
컨테이너의 크기가 작아질 때 item의 크기가 어떻게 작아지는지 결정,
다른 item들이 1만큼 작아질 때 해당 item의 그 2배인 2만큼 줄어든다. - ⭐flex-basis: auto; 60%;
item들이 공간을 얼마나 차지해야하는지 세부적으로 명시,
기본값은 auto인데 이때는 grow나 shrink에 맞춰서 변경된다,
컨테이너가 커지거나 작아질 때 60%의 공간을 차지한다. - align-self: center;
item별로 item을 정렬할 수 있다.
👍 flexbox 프로그 게임 : https://flexboxfroggy.com/#ko
source: 드림코딩엘리유튜브
