🎨 CSS

해당 기술이 무엇을 해결하기 위해 등장했는지 이해하면 좋다.

FLEXBOX FROGGY 로 FLEXBOX를 연습해보자

* flex의 특징

• flex container 안에 있는 children요소들이 서로 블럭을 형성하지 않고 붙어있게 해준다.
• 기본 값으로 flex의 direction은 row(줄)이다. 그리고 그때의 main axis는 가로이고 cross-axis는 세로이다.
• 가로 정렬을 할 때는 justify-content property를 통해 flex container 내에 있는 요소들을 정렬해 줄 수 있다.
• 세로 정렬을 할 때는 align-items property를 통해 flex container내에 있는 요소들을 정렬해 줄 수 있다.

flex property

• flex-shrink
  container에 있는 elem들이 각자 display: flex; 일때 default로 flex-shrink: 1;이 부여된다. 이 때 창의 크기를 작게 하면 elem의 width는 설정한 값이 있더라도 일정 비율로 찌그러지게 되는데 이 때 flex-shrink의 값을 2로 할 경우 원래 1의 값 보다 2배 더 찌그러지게 된다.

• flex-grow
  flex-grow의 default = 0이며 해당 가로 축이든 세로 축이든 container 내에 공간이 남아 있을 경우 만약 특정 elem에 flex-grow: 1;로 값을 설정 할 경우 남은 공간을 설정한 elem이 모두 채우는 효과가 있다. 창의 크기를 줄여 elem 간의 간격이 없을 경우 동일한 width 또는 height를 가지게 된다.

• flex-basis
  flex-grow와 flex-shrink가 일어나기에 앞서 기본 크기를 설정해주는 값이다.

axis

  axis에는 두가지 축이 있다. main과 cross axis이다. parent에 flex설정시 flex-direction의 default로 row가 설정이 되어 있는데 그 때의 main axis는 row(가로)가 되고 cross axis는 column(세로)이 된다.

  만약 flex-direction이 column으로 설정 되어 있을 시 그 때의 main axis 는 column이 되고 cross axissms row가 된다.

align-itmes

main axis or cross axis위에 있는 element의 배열을 관장하는 property

justify-content

main axis or cross axis 위에 있는 element의 배열을 관장하는 property

• center
  모든 children을 같이 중앙 정렬 시킴
• space-between
  children 간 양 끝단을 제외하고 일정 간격을 보유함
• space-around
  children이 양 옆으로 일정 간격을 보유함

* Positioning 테크닉

align-self
cross axis축에 있는 elem 중 특정 elem을 관장하여 포지션 할 수 있다. 예를 들어 부모가 컨테이너 박스이고 그 
안에 자식이 5명이 있다면 align-self property를 이용할 경우 5명 중 특정한 자식에 접근해서 해당 위치를 조정 할 
수 있는 것이다.

align-content
cross axis축에 있는 elem 간의 위치를 조정한다.

justify-self
위와 동문이다. 다만 두가지 특성이 나뉘어진 것은 flex-direction에 따라 main과 cross축이 달라지기 때문에 그에 
따른 축 위에 있는 요소들의 배열을 관장하기 위해 나눈 것 뿐 개념적으로 기능적으로 같은 역할을 한다.

order
html code를 변경할 수 없을 때 elem에 order propery를 부여해서 순서를 관장할 수 있다. html code의 위치를 변
경하지 않고 CSS를 통해 순서만 변경할 수 있기 때문에 매우 유용한 기능이라고 볼 수 있다.

wrap
child elem을 가진 parent elem에 부여하는 속성. parent가 flex이고 child요소를 elem으로 갖고 있을 시 elem의
크기를 설정한 후 해당 크기를 유지하고 싶을 경우 parent elem에 attribute로 flex-wrap: wrap; 코드를 작성한다
.

* parent의 특징

• 자식 위치에 있는 태그들의 위치를 관장할 수 있다.

* block의 특징

• 옆에 아무 것도 올 수 없다.

* parent와 children의 특징

• width와 height는 children에서 설정한 값이 있다면 해당 크기로 적용된다.
• parent 부문에서 width와 height값을 적용 할 경우 적용한 가로와 세로의 크기 안에 맞게 자식 요소들이 배열 된다.