[개발자되기:css flex] Day-7

Kyoorim LEE·2022년 5월 3일
0

와이어프레임(wireframe)

웹 또는 앱 개발할 때 레이아웃의 뼈대를 그리는 단계. "와이어로 설계된 모양"을 의미하며 단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것. 와이어프레임 단계에서는 전환효과나 에니메이션, 사용자 테스트 같은 스타일링 요소나 UX를 판단하지 않음.

목업(mock-up)

실물 크기의 모형. 실제 제품이 작동하는 모습과 동일하게 html문서를 작성.

레이아웃 리셋

html 문서가 기본적으로 가지고 있는 스타일이 레이아웃을 잡는데 방해가 되는 경우, 다음 코드를 통해 초기화(리셋)할 수 있다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0
}

flexbox

부모요소에 적용해야하는 flexbox 속성들

자식 요소들의 정렬과 관련

1. flex-direction: 정렬 축 정하기

자식 요소들을 정렬할 정렬 축을 정함. 디폴트값은 가로정렬

2. flex-wrap: 줄 바꿈 설정하기

하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄바꿈을 해줄지 정함. 디폴트값은 줄바꿈 하지 않음

3. justify-content: 축 수평 방향 정렬

자식 요소들을 축의 수평방향으로 어떻게 정렬할 것인지 정함. flex-direction 설정에 따라 수평방향이 하기와 같이 달라짐

주요 속성값: flex-start, flex-end, center, space-between, space-around

4. align-items: 축 수직 방향 정렬

자식 요소들을 축의 수직 방향으로 어떻게 정렬할 지 정함.

주요 속성값: stretch, flex-start, flex-end, center, baseline

자식요소에 적용해야하는 flexbox 속성들

자식 요소에게 적용해야하는 속성인 flex는 요소가 차지하는 공간 #### flex 속성의 값 `flex: grow(팽창지수) shrink(수축지수) basis(기본크기);` `grow`: 요소의 크기가 늘어나야 할 때 얼마나 늘어날 지 `shrink`: 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 지 `basis(기본크기)`: 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지 flex의 기본값 -> `flex: 0 1 auto;`

1. grow

정렬축 방향으로 빈 공간이 있을 때 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것. 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지함

2. shrink

설정한 비율만큼 박스 크기가 작아짐. 비율이 클 수록 많이 줄어듦. flex-grow 속성과 함께 사용 하는 일은 비추.flex-grow 안에서 조정하거나 flex-shrink 안에서 조정하는 등 한 가지 속성만 이용하는 것이 좋음

3. basis

flex-grow가 0일 때, flex-basis 크기를 지정하면 그 크기는 유지됨. flex-grow가 0인 경우에만 flex-basis의 속성값이 유지됨.
cf) flex-basis: auto vs flex-basis:0
flex-basis:0인 경우는 flex-grow값에 따라 값이 정해진 상황(0)이지만, flex-basis:auto의 경우는 화면이 늘어남에 따라 늘어난 길이만큼 늘어나게 되어있음

profile
oneThing

0개의 댓글