[프론트엔드 기초] 페이지 레이아웃

HTML 구성하기

    - CSS로 화면을 구분할 때는 수직분할과 수평분할을 차례로 적용하여 콘텐츠의 흐름에 따라 작업함

        1. 수직분할 : 화면을 수직으로 구분, 콘텐츠를 가로로 배치

        2. 수평분할 : 수직으로 분할된 각각의 요소들을 수평으로 구분, 내부 콘텐츠를 세로로 배치

 

레이아웃 리셋

    - HTML 문서는 기본적인 스타일을 가지고 있으며, 때때로는 레이아웃을 잡는 데 방해가 되기도 함

    - 기본 스타일링을 제거하는 코드를 적용해 디자인대로 레이아웃을 구현할 수 있다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

 

Flexbox로 레이아웃 잡기

    - display: flex; 를 부모 박스 요소에 적용해, 자식 박스 요소의 방향과 크기를 결정할 수 있음

    - 부모 요소에 적용해야 하는 flexbox 속성들 - 요소의 정렬 설정

        flex-direction : 정렬 축 정하기. row(기본값), column, row-reverse, column-reverse

        flex-wrap : 줄 바꿈 설정하기. nowrap(기본값), wrap, wrap-reverse

        justify-content : 정렬 축 수평 방향 정렬 방법. 정렬 축이 row일 때와 column일 때의 결과가 다름

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

        align-items : 정렬 축 수직 방향 정렬 방법. 정렬 축이 row일 때와 column일 때의 결과가 다름

            stretch, flex-start, flex-end, center, baseline

    - 자식 요소에 적용해야 하는 flexbox 속성들 - 요소가 차지하는 공간 설정

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

    cf. Flexbox Reference, Flexbox Froggy: Flexbox 속성 배우기 게임