SEB_BE 4일차 - 페이지 레이아웃

💡 오늘의 학습목표

• Flexbox 분석
• Flexbox 속성
• 와이어프레임 설계

레이아웃

• CSS로 화면 구분시 수직분할 과 수평분할 을 차례대로 콘텐츠 흐름에 따라 적용
• 레이아웃 리셋
  기본적인 스타일을 가지고 있는 HTML문서를 초기화(리셋) 시키고 싶을 때 라이브러리를 사용하거나 기본 스타일링을 제거하는 CSS 코드 적용

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
 }

📔 Flexbox

• 부모 박스에 적용하여 자식 박스의 방향과 크기를 결정
• Main Axis와 Cross Axis 는 바뀔 수 있다.
  
  Flex 적용하기

mian {
  display: flex;
  border: 1px solid blue;
}
...

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

  1. flex-direction : 자식 요소들을 정렬할 축을 정한다. 기본 가로 정렬
     row(기본값) column row-reverse column-reverse
  2. flex-wrap : 자동 줄 바꿈 설정 (설정하지 않으면 줄 바꿈x)
     nowrap(기본값) wrap(줄바꿈) wrap-reverse
  3. justify-content : 축의 수평 방향으로 정렬 정하기 (축방향 row /column 따라)
     flex-start flex-end center space-between space-around
     row축에서 space-around
     
  4. align-items : 축의 수직 방향으로 정렬 정하기 (축방향 row /column 따라)
     stretch flex-start flex-end center baseline

• flex-flow: column wrap 과 같이 두 속성의 값을 인자로 받는다.

• 자식 요소에 적용해야 하는 속성 (요소가 차지하는 공간)
  - flex : grow shrink basis
  기본값 : 0 1 auto ( 각 값을 따로 지정 가능)

  1. grow (팽창) : 요소가 늘어나야 할 때 얼마나 늘어날 것인가
     - box1을 flex-row1 로 설정 시 (id 사용)

#box1 {
	flex-grow: 1;
  }

- box 모두 flex-row1로 설정 시

정렬 축 방향으로 빈 공간이 있을 시 남는 공간을 차지하는 비율
-
2. shrink (수축) : 요소가 줄어들어야 할 때 얼마나 줄어들 것인가
- flex-grow 속성을 정했을 때 shrink 속성은 1로 두어도 무방함.
_
3. basis (기본) : 늘어나거나 줄어들기 전에 가지는 기본 크기
- grow가 0일 때, basis 크기를 지정하면 그 크기가 유지됨.

• flexbox froggy 로 이해하기

---

📔 웹 앱 화면 설계하기

와이어 프레임

• 웹 / 앱을 개발과정에서 레이아웃의 뼈대를 그리는 단계
• 작은 태그들을 하나의 큰 태그로 감싸주기

  고유한 영역은 id
  반복되는 항목은 class 로 지정 (같은 class값은 동일한 유형)

네이버 쇼핑 페이지 와이어 프레임 설계

회고

오늘은 어제에 이어서 HTML 관련 학습을 했다. 대충 이해는 가는데 아직도 코드를 짜보려니
CSS 선택자 부분과 flex박스 부분이 헷갈린다,,깊게 안봐도 되는 파트라 넘기려고 하는데 내일 페어 실습때문에 너무 걱정이다. 오늘은 오후 줌 세션이 없어 트위틀러 목업을 먼저 살펴보긴 했지만 그래도 페어분에게 민폐를 끼칠까 두려운건 마찬가지😂 잘하고싶다.