페이지 레이아웃, 웹 앱 화면 설계하기

📋 오늘 배운 내용

페이지 레이아웃
웹 앱 화면 설계하기

📋 페이지 레이아웃 - 학습목표

레이아웃을 위한 HTML 구조를 만들 수 있다.
손쉽게 웹 페이지의 각 요소를 정렬하는 데 Flexbox에 대한 핵심적인 개념과 내용을 이해할 수 있다.

📘 레이아웃 리셋

기본 스타일링 제거

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

📘 Flexbox

/* 부모 요소 */
main {
    display: flex;
    
    flex-direction: row; /* 정렬 축 설정 */
    /* row(기본값), column, row-reverse, column-reverse */
    
    flex-wrap : nowrap; /* 줄바꿈 설정 */
    /* nowrap(기본값), wrap, wrap-reverse */
    
    justify-content: row; /* 축 수평 방향 정렬*/
    /* row(기본값), column */
    
    align-items center: /* 축 수직 방향 정렬 */
    /* stretch, flex-start, flex-end, center, baseline */
}

/* 자식 요소 */
div {
    flex: 0 1 auto; /* grow shrink basis */
    
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

Flexbox 연습 게임