DAY4

이번 시간은 HTML, CSS활용에 대해 공부했다.

와이어프레임이란?

웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 말한다. 보통 선이나 원, 도형을 활용해 시각적으로 묘사한다.
와이어 프레임의 가장 큰 목적은 화면의 영역을 구분하는 일이다.

레이아웃 리셋

기본 스타일 CSS

*{
	box-sizing:border-box;
}
body{
	margin:0;
    padding:0;
}

Flexbox 속성

부모 박스 요소에 적용해, 자식 박스 방향과 크기를 결정할 수 있다.

display:flex;

자식 요소의 정렬 축을 정할 수 있다.
차례로 왼쪽에서 오른쪽, 위에서 아래, 오른쪽에서 왼쪽, 아래에서 위

flex-direction:row,column,row-reverse,column-reverse

하위 요소의 크기가 상위 요소를 넘게 된다면 자동 줄 바꿈을 할 지 정한다.

flex-wrap:nowrap,wrap,wrap-reverse

자식 요소의 축의 수평 방향을 가로로 할 지, 세로로 할 지 정하는 속성이다.

justify-content:row,column

자식 요소의 축의 수직방향을 가로로 할 지, 세로로 할 지 정하는 속성이다.

align-items:row,column

Flex 속성

따로 지정해 주지 않으면 flex:0 1 auto의 값으로 설정된다.
또한 세가지 값을 한 번에 설정할 필요 없이, 따로 설정이 가능하다.
*grow 속성과 shrink 속성을 함께 사용하는 것을 권장하지 않는다.

flex:<grow(팽창지수)> <shrink(수축지수) <basis(기본크기)>