와이어프레임(Wireframe)
웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계
HTML 구성하기
[수직 분할] : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치
[수평 분할] : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치수평으로 구분된 요소에 height 속성을 추가하면, 수평 분할을 보다 직관적으로 할 수 있다.
Flexbox
박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법
display: flex: 자식 박스의 방향과 크기를 결정
자식 요소가 아닌 부모 요소에 적용
flex-direction: 요소를 정렬할 방향을 결정
justify-content,align-items: 수평-수직 정렬을 결정
flex-grow: 요소를 얼마나 늘릴 것인지 결정
flex-basis: 요소의 기본 크기를 결정
flex-direction : 정렬할 방향 설정
row (기본값) : 왼쪽에서 오른쪽
column : 위에서 아래로
row-reverse : 오른쪽에서 왼쪽
column-reverse : 아래에서 위로
flex-wrap : 자동 줄 바꿈 설정
nowrap (기본값) : 줄 바꿈 안함
wrap : 크기에 맞게 위에서 아래로 줄 바꿈 설정
wrap-reverse : 크기에 맞게 아래에서 위로 줄 바꿈 설정
justify-content : 축 수평 방향 설정
row (기본값) : 가로 축 왼쪽에서 오른쪽 방향
column : 세로 축 위에서 아래 방향
align-items : 축 수직 방향 설정
row (기본값) : 가로 축 위에서 아래 방향
column** : 세로 축 왼쪽에서 오른쪽 방향
Flex 속성의 값
flex 는 세가지 속성의 값을 줄 수 있다.
flex : <grow(팽창)> <shrink(수축 지수)> <basis(기본 크기)>
ex) flex : 0 1 auto ;
하잇