학습목표

---

• 레이아웃을 위한 HTML 구조
• Flexbox 개념과 내용
• 와이어프레임

배운 내용

---

• 부모에게 영향을 줘서 자식에게도 영향을 준다.
• 주축과 교차축이 바뀔수가 있다.

레이아웃

• 콘텐츠 흐름은 좌에서 우, 위에서 아래로 흐른다. 수직분할과 수평분할을 차례대로 적용
  1. 수직분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소 배치
  2. 수평분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠를 세로로 배치
     1. height 속성을 추가하면, 보다 직관적으로 수평분할 가능

레이아웃 리셋

• HTML 문서의 기본적인 스타일 초기화
  • 태그가 가진 기본스타일에 약간의 여백이 있다
  • width, height 계산이 여백을 포함하지않고 있다
  • 위의 사항들을 아래의 코드로 간단하게 해결

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox 레이아웃

• flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정할수 있다.

display: flex

• 부모 박스요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법

부모 요소에 적용해야하는 Flexbox 속성

1. flex-direction - 정렬 축 정하기
   1. 디폴트 가로정렬
   2. row, column, row-reverse, column-reverse
2. flex-wrap -줄 바꿈 설정하기
   1. 하위 요소들의 크기가 상위요소의 크기를 넘으면 자동 줄 바꿈 할 것인지 정함.
   2. 디폴트 nowrap
   3. wrap , wrap-reverse, nowrap
3. justify-content - 축 수평 방향 정렬
   1. 가로면 가로 / 세로면 세로 방향으로 어떻게 정렬할지
   2. row(디폴트), column
   3. 주요 속성값
      1. flex-start
      2. flex-end
      3. center
      4. space-between
      5. space-around
4. align-items - 축 수직 방향 정렬
   1. 가로정렬이면 세로방향 / 세로정렬이면 가로방향으로 어떻게 정렬할지
   2. 주요 속성값
      1. stretch
      2. flex-start
      3. flex-end
      4. center
      5. baseline

자식 요소에 적용해야 하는 Flexbox 속성

• 부모요소에 적용하는 속성들은 자식요소들의 정렬과 관련
• 자식 요소에 적용하는 속성들은 자식요소가 차지하는 공간과 관련

flex 속성의 값

• grow(팽창 지수) : 정렬축 방향으로 빈공간이 있을때, 자식요소들이 늘어나서 남는 공간을 얼마나 차지할 것인지 비율을 정함
• shrink(수축 지수): grow와 반대로 클수록 더 많이 줄어든다.
  • flex-grow 속성으로 비율 변셩시, shirnk 속성은 기본값(1)으로 두는것 추천
• basis(기본 크기): 요소의 기본크기
  • flex-grow가 0일때, basis 크기를 지정하면 그 크기는 유지됨
  • basis로 설정된 크기는 항상 유지되는것이 아니다. flex-grow 속성의 값이 양수일 경우, 늘어나면서 커질수 있기때문
  • width와 flex-basis를 동시에 적용하는경우 flex-basis가 우선
  • auto 값은 해당 아이템의 width값을 사용(width를 설정안하면 컨텐츠크기)

flex : grow shrink basis
flex : 0 1 auto; /* 따로 지정가능*/

와이어프레임

• 웹또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계
• 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도
• 화면의 영역을 구분하는 것이 목적으로, 각영역에서 사용할 주요 태그를 메모하는 형식으로 작성
• 와이어 프레임 작성 툴 - 피그마, 미로, 오븐

목업(Mock-up)

• 목업 : 실물 크기의 모형

• 웹에서는 실제 제품이 작동하는 모습과 동일하게 HTML 문서와 CSS를 작성하는것(기능동작 X)

• 큰틀에서 영역나누기

  • div 태그로 여러태그를 감싸줘야한다. (section, form)
  • 반복되는 항목은 class로 지정한다. 같은 class 값을 지정해줌으로써 동일한 유형임을 확인가능
  • id는 고유한 값에만 쓰기

어려운 내용(에러)

---

문제

1. 인라인 요소는 padding과 margin값 적용이 안된다. (height 속성이 없어서?)
2. flex-basis 0 과 auto 차이

해결

1. 블록요소는 각 요소들이 수직으로 쌓이며,크기값 가질수있고, 상하좌우 마진&패딩 가질수 있으나, 인라인 요소는 수평으로 쌓이고, 크기 지정불가능 , 상하 마진,패딩 적용 불가능/ 좌우 마진,패딩은 가능
   2.bais로 설정된 크기는 항상 유지되는 것이 아니다. flex-grow 속성값이 양수일 경우 늘어나면 커질수 있기 때문. 0 으로 설정해도 비율에 따라 커짐 / auto 값은 해당 아이템의 width값을 사용(width를 설정안하면 컨텐츠크기), so 컨텐츠마다 크기가 다르게 영역배치