[TIL] 220503(화)

☑️ Layout

: 각각의 요소를 목적에 맞게 배치하는 것

💡 와이어프레임(Wireframe)

: 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계

• 단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것
• 스타일링 요소나 UX를 판단하는 것이 아님

💡 목업(Mock-up)

: 웹/앱을 제품이라고 할 때, 실제 제품이 작동하는 모습과 동일하게 하드코딩으로 html 문서 작성

💡 HTML 구성

• 수직 분할: 화면을 수직으로 구분 → 콘텐츠가 가로로 배치

  🧸	🧸	🧸

  
  

• 수평 분할: 수직으로 분할된 각각의 요소를 수평으로 구분 → 내부 콘텐츠가 세로로 배치

  🧸
  🧸
  🧸

💡 Layout Reset

: 기본 스타일링을 제거하여 디자인한대로 레이아웃 구현 가능

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
}

---

☑️ Flexbox

: 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법

💡 display: flex;

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

✋ <div> 요소들은 따로 설정해주지 않으면 위쪽에서부터 세로로 정렬되며, 가로로 넓게 공간 차지

⇒ display: flex; 속성을 적용해주면 <div> 요소들이 왼쪽부터 가로로 정렬 & 내용만큼의 공간을 차지

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

👉🏻 자식 요소들의 정렬과 관련

1. flex-direction: 자식 요소들을 정렬할 정렬 축 설정

   /* 부모 요소인 main에 작성하면 자식 요소인 div들을 정렬할 축을 정하게 되는 것*/
   main {
   	display: flex;
   	flex-direction: row;
   }

   

2. flex-wrap: 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 설정

   /* 부모 요소인 main에 작성하면 자식 요소인 div들의 줄 바꿈을 설정하게 되는 것 */
   main {
   	display: flex;
   	flex-wrap: nowrap;
   }

   

3. justify-content: 자식 요소들을 축의 수평 방향으로 어떻게 정렬한 것인지 설정

   

   • flex-direction: row; (↔)

     

   • flex-direction: column; (↕️)

     

4. align-items: 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 설정

   
   • flex-direction: row; (↕️)
     
     
   • flex-direction: column; (↔)
     
     

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

👉🏻 요소가 차지하는 공간과 관련

✔️ flex 속성의 3가지 값

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

1. grow(팽창지수): 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
   ⇒ 자식요소의 grow 값 / 자식 요소들의 grow값의 총합
   ✋ 팽창지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간 차지
   ex. grow = 1:1:2
   

2. shrink(수축지수): 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지
   ⇒ 비율이 클수록 더 많이 줄어듬
   ✋ flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 ok.
   
   
3. basis(기본크기): 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기가 얼마인지
   ⇒ flex-grow: 0 일 경우에만, basis 크기를 지정하면 그 크기는 유지
   

💫 flex 속성을 따로 설정해주지 않았을 때의 기본값
⇒ 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치
flex: 0 1 auto;
flex: grow shrink basis;

& 3가지 값을 각각 따로 지정도 가능

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;