FE가 되고싶니? 나도✨

inset과 gap

▶최근 CSS에서 자주 사용하는 코딩

▶top: 100px;

  left: 100px;

  right: 100px;

  bottom: 100px;

=

inset: 100px;

▶마진은 부모와 자식요소 사이에 거리를 주지만 gab은 요소와 요소 사이의 거리만 계산한다.

▶margin은 자식요소에 코딩, gap은 부모요소에 코딩

▶gap은 내부의 자식요소들이 일정한 간격으로 떨어져 위치 할 수 있도록 사용하는 스타일 속성이다.

▶margin과의 차이점은 gap의 경우 요소들의 사이에만 공간을 만든다는 점이다.

▶margin의 경우 주변에 요소들의 유무에 상관 없이 스타일이 적용(사이에는 중첩이 된다.)

▶EX) margin:10px;의 경우 중간에 겹쳐져 20px의 간격이 된다.

▶하지만 gap은 인접요소가 없다면 불필요한 공간을 만들지 않고 정확하게 간격을 10px만 만든다.

▶gap은 flex 이후부터 필요성이 생겨서 만들어진 속성이다. 불필요한 공간을 만들지 않아서 더욱 정렬된 상태의 레이아웃을 구현할 수 있기 때문에 사용하기 시작했다.

▶margin 전방향;

   margin 상하, 좌우;

   margin 상 좌우 하;

   margin 상 우 하 좌;

  gap 전체값;

  gap 상하 좌우;

  3,4개의 사용법이 없다.

▶order : 자식 요소의 순서를 지정, 숫자가 작을수록 앞쪽으로 배치된다. 

▶flex-grow : 요소 안쪽의 여백을 확대. 기본값 = 0, 0을 주면 늘어나지 않는다.
1부터 부모의 너비를 다 차지하려고 늘어난다.

▶flex-shrink : 요소 안쪽의 여백을 축소. 0을 주면 줄어들지 않음
1 이상의 값을 주면 : 부모의 너비에 따라서 주어진 비율로 줄어든다.

▶flex-basis : 기본 박스의 단위를 지정한다. px, %로 값을 부여하는 것이 가능하고, 혹은 1, 2 같은 비율로도 지정이 가능하다.

▶flex : 1; = flex: 1 1 0%
→flex-grow:1; flex-shrink:1; flex-basis:0%;
⇒부모를 다 차지하는데 고르게 차지한다.
줄어 들 때 고르게 줄어들어라.
기본 단위는 부모값을 따른다.

⇒자식요소가 부모요소를 (같은 비율로) 전체 다 차지한다.

FLEX 속성

▶기본적으로 아이템을 좌측에서 우측, 수평 방향으로 배치한다. 우측에서 좌측이나, 수직방향으로 배치하려 할 때에도 사용할 수 있다.

flex : 부모요소에 적용하는 속성

display : flex; → 부모인 자신은 블록요소 속성으로 유지하고, 자식 요소에 flex환경을 설정해서 좌우배치를 한다.

display : inline-flex; → 부모인 자신은 인라인 요소 속성으로 유지하고, 자식요소에 flex 환경을 설정해서 좌배치를 한다.

flex-direction : 자식요소의 정렬 방향을 지정한다.

: column / column-reverse / row / row-reverse

row(가로): 기본축이 가로로 정렬 (기본값) 좌 → 우

column (세로): 기본축이 세로로 정렬(block 요소일 경우 flex하기 전과 같음) 위 → 아래

reverse(반대): 자식요소 콘텐츠를 가로/세로 역순으로 정렬 우→좌 / 아래→위

flex-wrap:자식 요소의 줄 바꿈을 적용시킨다.

wrap: 자식요소의 줄 바꿈 가능 (기본값)

nowrap: 자식요소의 줄 바꿈 불가능, 요소의 부피 때문에 공간이 부족해도 줄바꿈X

▶flex-flow: flex-direction와 flex-wrap을 한번에 적용

단점, 자바스크립트에서 인식을 하지 못해서 잘 사용하진 않음.

EX) flex-flow: row-reverse wrap;

justify-content : 기본축으로 정렬하는 방법을 제공

▶flex-star : 기본값, 자식요소를 시작방향으로 정렬

▶flex-end : 자식요소를 종료방향으로 정렬

▶center : 자식요소를 가운데로 정렬

▶space-between : 자식요소 사이에만 균일한 간격을 두고 정렬

즉, 양 끝에 자식요소를 하나씩 배치하고 남은 공간을 균일한 간격을 두고 정렬

▶space-around : 모든 자식요소의 둘레에 균일한 간격을 두고 정렬

→ ( 1 2 2 2 1 )

▶space-evenly : 모든 자식요소의 균일한 간격을 두고 정렬

→ 간격을 동일하게, 끝과 끝 배치X, 사이에 간격 겹치지X ( 1 1 1 1 1 )

align-items : 반대축으로 정렬하는 방법을 제공

▶align-items : center; 반대축의 중앙에 배치하는 방법

▶align-content : space-between, space-around, space-evenly를 사용하기 위한 방법

★felx로 요소를 중앙에 배치하는 방법★

부모요소에 display:flex; 부여하고, justify-content :centerl, align-items : center; 가운데 배치 완성