SEB Section 1 css

레이아웃: 화면을 나누는 방법

HTML 구성하기

• 대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐른다.

• CSS로 화면을 구분할 때에는 수직분할과 수평분할을 적용한다.
• 수직분할: 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치

• 수평분할: 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치.

• 분할 하기 위해서는 div 태그를 이용하여 영역을 만든다.

Flexbox로 레이아웃 잡기

display: flex 분석하기

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

flex 요소에 방향 지정하기

• flexbox는 수직으로 분할 되는 것이 기본값이다. 그러나 방향을 설정해주면, 수평으로도 분할할 수 있다.
• flex-direction 속성은 부모 박스요소에 적용한다. 자식박스에 특별한 속성을 주지 않아도, 부모 요소에 의해 자식 요소가 영향 받음.
• 자식 요소는 flex라는 속성에 값을 적용한다.

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

• flex 속성에 적용되는 세 가지 영역은 기본 크기를 바탕으로 필요에 따라 늘리거나 줄일 수 있는값이 적용된다.
• flex: ‘grow’ ‘shrink’ ‘basis’, ‘flex: 0 1 auto’
• 각 속성의 값도 따로 지정할 수 있다.
• grow, shrink 속성은 단위가 없고, 비율에 따라 결과가 달라진다.

1. grow

• grow를 설정한 자식박스의 크기는 다른 자식 박스의 콘텐츠 길이의 나머지 부분을 차지하게 된다.
• grow 속성을 적용하는 값은 비율을 의미한다.
• 다른 박스의 grow 속성이 증가하게 되면, 기존의 박스가 차지하는 비중은 줄어들게 된다.

1. shrink

• shrink는 grow와 반대로, 설정한 비율 만큼 박스의 크기가 작아진다.
• 보통 grow 와 shrink을 함께 사용하는 일은 추천 하지 않는다.
• 비율로 레이아웃을 지정할 경우 grow 속성을 변화 주는 것을 권장한다.

1. basis

• grow와 shrink에 의해 변화하기 전에 가지는 기본 크기이다.
• grow 속성의 값이 0인 경우에만 basis속성의 값이 유지된다.
• display 속성에 flex가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라, basis로 설정된 크기가 항상 유지되는 것은 아니다.

콘텐츠 정렬방법

• flexbox를 원하는 대로 제어 하기 위해서는 axis(축)의 개념이 필요하다
• main axis는 flex-direction 속성에 의해서 결정된다.
• flex-direction의 기본값인 row인 상태에서는 main axis는 가로축이 된다.

• cross axis는 여러 개의 main axis와 수직을 이루는 방향이다. 즉 세로축이다.

• axis들을 기준으로 정렬할 수 있는 속성들에 justify-content와 align-items 가 있다.
• justify-content 속성은 main axis 기준으로 정렬, align-items는 cross axis 기준으로 정렬한다.
• 만약 flex-direction 속성의 값을 column으로 준다면 main axis와 cross axis는 서로 바뀐다.

1. justify-content

• flex-start
• flex-end
• center
• space-between
• space-around

1. align-items

• flex-start
• flex-end
• center
• stretch