웹 또는 앱 개발할 때 레이아웃의 뼈대를 그리는 단계. "와이어로 설계된 모양"을 의미하며 단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것. 와이어프레임 단계에서는 전환효과나 에니메이션, 사용자 테스트 같은 스타일링 요소나 UX를 판단하지 않음.
실물 크기의 모형. 실제 제품이 작동하는 모습과 동일하게 html문서를 작성.
html 문서가 기본적으로 가지고 있는 스타일이 레이아웃을 잡는데 방해가 되는 경우, 다음 코드를 통해 초기화(리셋)할 수 있다.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0
}
자식 요소들을 정렬할 정렬 축을 정함. 디폴트값은 가로정렬
하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄바꿈을 해줄지 정함. 디폴트값은 줄바꿈 하지 않음
자식 요소들을 축의 수평방향으로 어떻게 정렬할 것인지 정함. flex-direction
설정에 따라 수평방향이 하기와 같이 달라짐
주요 속성값: flex-start
, flex-end
, center
, space-between
, space-around
자식 요소들을 축의 수직 방향으로 어떻게 정렬할 지 정함.
주요 속성값: stretch
, flex-start
, flex-end
, center
, baseline
정렬축 방향으로 빈 공간이 있을 때 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것. 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지함
설정한 비율만큼 박스 크기가 작아짐. 비율이 클 수록 많이 줄어듦. flex-grow
속성과 함께 사용 하는 일은 비추.flex-grow
안에서 조정하거나 flex-shrink
안에서 조정하는 등 한 가지 속성만 이용하는 것이 좋음
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
의 경우는 화면이 늘어남에 따라 늘어난 길이만큼 늘어나게 되어있음