Intro.

첫 과제를 시작하면서 처음에 무엇부터 시작 해야 할지 몰라 눈에 보이는 글씨와 이미지부터 넣기 시작했는데.. 만들면서 레이아웃을 먼저 짜야 했다는 것을 뒤늦게 깨달았고, 그것을 깨달은 시점에는 이미 코드가 뒤죽박죽 순서도 뭐도 엉망인 상태가 되어 있었다.

그래서 만들던 것을 포기하고 다시 레이아웃부터 짜고 다시 만들기 시작하면서 문서의 시작에는 어떤 과정이 필요한지, 어떤 순서로 만들어야하는지에대해 알아보는 과정으로 먼저 flex와 float를 정리하기로 했다.

flex와 float는 함께 사용 할 수 없는 속성이다. 수업 중 최근에는 반응형 웹 디자인이 많이 만들어지게 되면서 현직 개발자로 2년차인 친구의 말로는 float보다는 flex를 사용하는 추세라고 한다. 공부 할 때도 float보단 flex위주로 공부하는게 지금 현재로서는 좋을 것이라는 조언을 해 주어서 float보다는 flex에 중점을 두며 개념을 정리하기로 했다.

float

---

float 속성은 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다

이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용한다.

Values

left

요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드입니다.

right

요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드입니다.

none

요소가 부동하지 않아야 함을 나타내는 키워드입니다.

inline-start

요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.

inline-end

요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.

flex

---

하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.

Values

display: flex; 를 먼저 선언 한 후 아래의 속성들 적용

justify-content

⇒ 요소의 가로 정렬을 설정하는 역할을 한다.

💡 column과 함께 사용 할 경우 가로가 아닌 세로로 적용된다.

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬
• center: 요소들을 컨테이너의 가운데로 정렬
• space-between: 요소들 사이에 동일한 간격을 둠
• space-around: 요소들 주위에 동일한 간격을 둠

align-items

⇒요소의 세로 정렬을 설정하는 역할을 한다.

💡 column과 함께 사용 할 경우 세로가 아닌 가로로 적용된다.

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬
• flex-end: 요소들을 컨테이너의 바닥으로 정렬
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
• baseline: 요소들을 컨테이너의 시작 위치에 정렬
• stretch: 요소들을 컨테이너에 맞도록 늘림

flex-direction

⇒요소의 순서를 역으로 바꿔서 가로, 세로 정렬을 설정 할 수 있다.

• row: 요소들을 텍스트의 방향과 동일하게 정렬
• row-reverse: 요소들을 텍스트(텍스트는 기본 왼쪽 방향)의 반대 방향으로 정렬
• column: 요소들을 위에서 아래로 정렬
• column-reverse: 요소들을 아래에서 위로 정렬

order

⇒ 컨테이너의 row나 column은 순서를 바꿔주기만 하는데 이것 만으로는 충분하지 않을때가 있다. 이럴 경우에는 order속성을 각 요소에 적용할 수 있다.

⇒ 기본값은 0이며 양수와 음수로 설정값을 준다.

요소 오른쪽 이동 : +1

요소 왼쪽 이동 : -1

#pond {
  display: flex;
}

.yellow {
order: +1;
}

align-self

⇒ 각 요소에 적용 가능한 속성

⇒ align-items을 지정한 요소에만 적용 가능하고 align-items가 사용하는 값을 그대로 받는다.

• flex-start: 지정한 개별 요소를 컨테이너의 꼭대기로 정렬
• flex-end: 지정한 개별 요소를 컨테이너의 바닥으로 정렬
• center: 지정한 개별 요소를 컨테이너의 세로선 상의 가운데로 정렬
• baseline: 지정한 개별 요소를 컨테이너의 시작 위치에 정렬
• stretch: 지정한 개별 요소를 컨테이너에 맞도록 늘림

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
align-self: flex-end;
}

flex-wrap

⇒flex-wrapproperty는 flex-item요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성

• nowrap: 모든 요소들을 한 줄에 정렬
• wrap: 요소들을 여러 줄에 걸쳐 정렬
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

flex-flow

⇒flex-direction, flex-wrap 속성의 단축속성이기 때문에 한번에 스타일을 입히는 것이 가능하다.

선언 예시 → flex-flow: column wrap;

flex-direction → 정렬할 방향

flex-wrap →몇 줄에 정렬 할 것인가

💡 flex-direction과 flex-wrap은 자주 같이 사용되기 때문에, flex-flow가 이를 대신 할 수 있다. 이 속성은 공백 문자를 이용하여 두 속성의 값을 인자로 받는다.

• row: 요소들을 텍스트의 방향과 동일하게 정렬
• row-reverse: 요소들을 텍스트(텍스트는 기본 왼쪽 방향)의 반대 방향으로 정렬
• column: 요소들을 위에서 아래로 정렬
• column-reverse: 요소들을 아래에서 위로 정렬
• nowrap: 모든 요소들을 한 줄에 정렬
• wrap: 요소들을 여러 줄에 걸쳐 정렬
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

#pond {
  display: flex;
  flex-flow: column wrap;
}

align-content

⇒ 요소들의 행간을 지정해주는 속성이다.

💡 align-conten는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정한다. 한 줄만 있는 경우, align-content는 효과를 보이지 않는다.

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
• center: 여러 줄들을 세로선 상의 가운데에 정렬
• space-between: 여러 줄들 사이에 동일한 간격을 둠
• space-around: 여러 줄들 주위에 동일한 간격을 둠
• stretch: 여러 줄들을 컨테이너에 맞도록 늘림

ending..
개발자로 일하고 있는 친구가 flex기술을 개구리를 옮기며 재미있게 익힐 수 있는 게임을 소개 해 주었다.
솔직히 flex라는 기술에 대해 사용하면서 익혔다기보다 쓰면서는 그냥 어떤 상황에는 이거구나 무조건 암기하는 방식으로 하다가 개구리 게임 스테이지를 모두 깨 보고 싶어서 필사적으로 했더니 외워졌다..^^..ㅎㅎ
이제 막 css공부를 시작했다면 강력하게 추천 ㅇㅅㅇ!