CSS 중급! : Flexbox!

Achievement Goals

> 다양한 CSS 셀렉터 규칙을 이해할 수 있다.

후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.
https://velog.io/@rimu/css-css-%EC%84%A0%ED%83%9D%EC%9E%90selector-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC
감사합니다... 내 맘 속 최고의 블로그 선정 ..

레이아웃을 위한 HTML을 만들 수 있다.

Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다)
◦ 방향: flex-direction
◦ 얼마나 늘릴 것인가? :flex-grow
◦ 얼마만큼의 크기를 갖는가?: flex-basis
◦ 수평 정렬: justify-content
◦ 수직 정렬: align-items

flex box!

• 부모 박스요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법
• display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치

flex-direction

• flexbox는 박스가 수직으로 분할되는 것이 기본값
• 방향을 설정해주면, 수평으로도 분할
• flex-direction 속성은 부모 박스요소에 적용

flex: grow(팽창 지수), shrink(수축 지수), basis(기본 크기);

• 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치

• flex: 0 1 auto; // 기본값

• 필요에 따라 늘리거나 줄일 수 있는 값이 적용

• flex-grow 속성에 값을 1로 설정하면, 모든 박스가 grow합니다. 결과적으로 모든 박스가 동일한 비율로 가로 길이가 늘어납니다. (총 grow 값 1+1+1, 각 박스는 1/3씩 크기를 가짐)

• shrink는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아집니다.

목업(Mock-up)

웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성

em rem px 차이

보통 반응형 웹을 작업하는 경우에는 너비와 높이 등 요소의 크기나 위치에 해당하는 값에 퍼센트(%)를 적용시켜 작업

픽셀(px)이란

• 가장 기본적으로 사용되는 단위
• 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값

em이란

• 부모 요소를 기준으로 자식 요소의 크기를 정하는 것

<div class="parent">
  <div class="child"></div>
</div>
.parent{ font-size:12px }
.child{ font-size:1.2em }

부모 요소를 12px로 정의했을 때 자식 요소를 1.2em 으로 정의하면 자식 요소는 12px*1.2=14.4px로 정의

rem이란

• root em의 약자
• 가장 최상단(root) 기준
• 최상위 태그 html에 정의된 사이즈를 기준으로 배수하겠다는 것을 의미