[CSS] Layout 및 Flexbox

https://www.youtube.com/watch?v=jWh3IbgMUPI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=8

유튜브 드림코딩으로 공부한 내용입니다. 

 

🌈 Display

- Inline , Inline-block , block 차이

Block (ex. <div>) 은 한 줄에 하나씩, Inline (ex. <span>) 은 한 줄에 나란히 배치된다. 이 속성을 바꾸고 싶으면 각각의 태그에 다음과 같은 css 를 설정하면 된다. 

 

div{
background:red;
display:inline-block;
}

span{
display:block;
}

 

이 때 inline-block 대신 inline 을 쓸 경우, content, 즉 글자 크기에 맞춰서 배경색이 칠해진다. 

 

🌈 Position

static : 기본값

relative : 원래 있어야 하는 자리에서 상대저으로 옮겨짐

absolute : 가장 가까이 있는 부모 컨테이너를 기준으로 

fixed : 화면 상의 특정한 위치

sticky : 스크롤 하면 고정됨

 

<Flexbox>

🌈  Container 와 Item

1) Container

 

display 

display:flex 를 써줘야 flexbox 이용할 수 있다. 

 

flex-direction

아이템을 어떤 순서로 할 것인지를 결정한다. 

기본값은 row.

row-reverse, column, column-reverse 사용 가능

 

 

flex-wrap 

기본값은 nowrap. 창 크기를 줄여도 모든 item이 한 줄에 빼곡하게 붙어있게 된다. 

flex-wrap:wrap 창 크기가 줄어들어 한 줄에 꽉 차게 되면 자동적으로 줄이 넘어간다. 

 

flex-flow

위 두 개의 속성을 한 번에 쓸 수 있다.

flex-flow: column wrap 

 

justify-content

 

 

아이템을 어떻게 배치할 것인지를 결정한다. 

기본값은 flex-start

flex-end, center, space-around, space-evenly, space-between 등 을 쓸 수 있다.

 

* space-around: 아이템 하나를 기준으로 여백이 생긴다. 아이템 간 간격은 넓고 양 끝의 사이드는 간격이 좁다. 

* space-evenly: 양 끝 사이드 포함 모든 간격이 동일하다. 

* space-between: 양 끝 사이드에는 여백을 주지 않고 아이템 사이에만 간격을 준다. 

 

 

align-items

중심축이 아닌 반대축 cross axis 에 어떻게 배치할 것인지를 결정한다. (한 줄 기준)

align-items:baseline; 아이템 크기가 아닌, 텍스트를 기준으로 정렬하여 텍스트가 모두 동일한 라인에 있도록 한다. 

 

align-content

중심축이 아닌 반대축 cross axis 에 어떻게 배치할 것인지를 결정한다. (두 줄 이상 기준)

justify-content와 동일하게 이용 가능하다. 

 

 

2) Item

 

flex-grow

기본값은 0으로, 컨테이너 (창) 의 크기를 줄이거나 늘려도 아이템의 크기는 변함이 없다.

flex-grow:1;

flex-grow:2;

각각의 아이템을 이렇게 설정하면, 남은 여백을 1:2의 비율로 채우면서 창을 키울때마다 아이템의 크기가 늘어난다. 

 

flex-shrink

flex-shrink:1;

flex-shrink:2;

이렇게 설정하면 두 번째 아이템이 2배로 더 빨리 줄어든다. 

 

flex-basis

아이템이 공간을 얼마나 사용해야 하는지 세부적으로 명시할 수 있게 해준다. 

기본값은 auto이고, flex-grow 와 flex-shrink의 값을 따른다. 

 

flex-basis:60%;

flex-basis:40%;

이렇게 설정하면 flex-grow 와 flex-shrink 쓰지 않아도 늘어나거나 줄어들 때 해당 비율을 유지한다.

 

align-self

컨테이너에 적용된 전체 속성에서 벗어나 아이템 하나에만 특별한 속성을 주고 싶을 때 사용한다. 

 

🌈  Axis

🌈 vh 와 % 차이

%는 부모의 속성을 따르기 때문에 container에 %를 사용하려면, container의 부모인 body, html의 높이를 직접 설정해주어야 한다. 

viewpoint height 는 부모에 상관없이 현재 화면의 크기를 기준으로 한다. 

 

height:100vh;

 

🌈 참고 단축 명령어

item 반복 생성을 도와주는 단축 명령어이다. 

div.container>div.item.item${$}*10

🌈 참고 사이트

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks

https://flexboxfroggy.com/

Flexbox Froggy