코드스테이츠 프론트엔드 부트캠프 4일차

2023-04-14(금)
코드스테이츠 4일차

Section1 Unit4 - [HTML/CSS] 활용
-------------------------------------------------------------------------------------------------------------

Chapter1. 레이아웃

레이아웃이란
= 각각의 요소를 목적에 맞게 배치하는 것
= 웹 개발자에게 웹 사이트에 목적에 맞게 화면을 만드는 작업

-------------------------------------------------------------------------------------------------------------

Chapter1-1. 와이어프레임

와이어프레임(Wireframe)이란
= 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계
= 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것

목업(Mock-up) 이란
= 실물 크기의 모형
= 실제 제품이 작동하는 모습과 동일한 HTML을 만드는 것
= ex) 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML문서 내에 하드코딩 하는 방식

하드코딩이란?
= 하나하나 입력해야 하는 방식


와이어프레임의 목적
= JavaScript로 동작하는 애플리케이션을 만들기 전 미리 구도를 HTML문서로 만들어보면서 어떤식의 형태로 만들어질지 설계도같이
확인해보는 작업

-------------------------------------------------------------------------------------------------------------

Chapter1-2. 화면을 나누는 방법

HTML 구성하기
- 대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐른다.
- CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 흐름에 따라 작업을 진행


1. [수직 분할] 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치합니다.

2. [수평 분할] 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치합니다.
        -  수평으로 구분된 요소에 height 속성을 추가하면, 수평 분할을 보다 직관적으로 할 수 있습니다.

Atomic CSS 방법론
= 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법


레이아웃 리셋
= div나 body의 기본적인 간격으로 인해 빈공간이 만들어 지는 경우
= box-sizing으로 레이아웃 계산이 힘들어지는 경우

위의 경우 발생 시 body부분에 margin : 0 , padding : 0 으로 설정하면 간격 발생 없이 작업할 수 있다.

-------------------------------------------------------------------------------------------------------------

Chapter 2. Flexbox

Flexbox = 잘 구부러지는, 유연한 이라는 뜻으로 Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여
레이아웃을 잡는 방법입니다.


-------------------------------------------------------------------------------------------------------------

Chapter 2-1. Flexbox 따라하기 -1

display : flex 분석하기

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


부모 요소에 적용해야 하는 Flexbox 속성들
- 들어가기 전, Flexbox 속성을 사용할 때 유의해야할 점이 있습니다. 바로 속성을 지정해주는 위치입니다. Flexbox 속성 중에서는 부모 요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성들이 있습니다. 적절한 위치에 속성을 지정해주지 않으면 요소들이 원하는대로 정렬되지 않습니다.


1. flex-direction
- 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다.


2. flex-wrap 
- 줄 바꿈 설정하기 / 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다.
설정해 주지 않으면 줄 바꿈을 하지 않습니다.


3. justify-content : 축 수평 방향 정렬
- 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지
세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.


4. align-items : 축 수직 방향 정렬
- 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다.요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지
세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.


-------------------------------------------------------------------------------------------------------------

Chapter 2-2. Flexbox 따라하기 -2

자식 요소에 적용해야 하는 Flexbox 속성
- 부모요소에 적용해야 하는 속성들은 자식 요소들의 정렬에 관련이 있다면 자식 요소에게 적용해야 하는 flex 속성은 차지하는 공간에 있다.

flex 속성의 값
- flex : <grow(팽창지수) > <shrink(수축지수)> <basis(기본크기)>

팽창 지수 = 요소의 크기가 늘어나야 할때 얼마나 늘어날 것인지

수축 지수 = 요소의 크기가 줄어들어야 할때, 얼마나 줄일것인지

기본 크기 = 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미합니다.


flex-grow 
- 팽창지수의 크기는 총합에서의 비율로 빈 공간을 차지


flex-shrink
- 수축지수의 크기는 총합에서의 비율로 적은 공간을 차지 / grow 속성과 shrink 속성을 함께 사용하는 것은 비추천
flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방합니다.



flex-basis 
- 베이식의 크기를 지정하면 그 크기는 유지됩니다.

질문 : 세 개의 박스 모두 flex-grow : 1일 때, 위 예시는 flex-basis : auto, 아래 예시는 flex-basis : 0으로 설정해주었습니다. 
두 예시 중 실제로 1 : 1 : 1의 너비를 갖는 것은 어느 예시인가요? 왜 이런 차이가 발생할까요? 이번에는 직접 
flex-basis 를 키워드로 구글링하여 답을 찾아보세요!

= auto(기본값) - 자신의 width , height속성의 값을 사용한다.

= 숫자값 (0 제외) - flex box 안에 width가 50px인 A, 100px인 B, 120px인 C가 있다.
이들의 flex-basis를 flex-basis: 100px로 설정하면

A는 50px에서 100px로 늘어나고
B는 똑같은 100px이므로 변화가 없고
C는 120px은 100px보다 크지만 그대로 유지된다.


= 0으로 설정된 경우 - 메인축에서 컨텐츠의 크기와 관계 없이 grow, shrink 설정 비율대로 아이템 너비를 배분한다.

정리 = auto 의 경우 컨텐츠의 크기에 따라 길이가 각각 달라지지만 0으로 설정해놓는다면 컨텐츠의 길이의 상관없이
설정된 너비와 높이의 비율에 따라 설정된다