36강

grid.
flex와grid. 상황에 따라 혼용.
연습 우선 순위는 flex.
기능 으로 편한것은 grid

flex....css강의듣기 전에는 어떻게 알았는데... 들을수돌 헷갈리는데..

flex는 한 컨테이너(한 박스 )안에서 세로방향 정렬과 가로방향 정렬을 동시에 해 줄수 없기때문에 나눠주어 해야함.
그리하여 여러번 중첩.

grid는 2차원적 구조로 row와 colum동시에 한컨테이너에 설정가능.

37강

grid적용하기
display: grid;선언.==>grid컨테이너라는 박스에 애들이 들어가게됨(만들어짐)
grid-line과 grid-number(각각의 라인들의 숫자들)라는 개념이 있음.

grid-template-rows ==>해당 그리드 컨테이너의 규격을 정함. 이 경우에는 행(가로)의 개수 및 크기를 지정
grid-template-colums ==>세로

grid-template-rows: 1fr 2fr 200px==>세가지 값이 공백을 사이에 두고 연결됨 ==>> 3개의 행이 있다는 뜻이고 각각의 행의 규격이 1fr, 2fr, 200px이라는 얘기

grid-template-colums 에도 동일한 방식으로 지정가능. 열에 대한 세팅(세로)

fr이란? 분수라는 fraction의 약자grid-template 에서 사용하는 단위로 그리드의 해당영역을 지정한 비율로 쪼개 나누어 줄 수 있음. 크리드 컨테이너의 사이즈가 변경되어도 비율은 변하지 않음
=====>
grid-template-colums: 1fr 2fr 1fr 1fr
===>1 : 2: 1 : 1

grid-template에 사용하는 함수: repeat(a, b)
==>b규격의 grid-template을 a개 생성한다
grid-template-colums : repeat(4,1fr)
==>1fr짜리 열(세로)가 4개 생성

grid-template-rows: repeat(2, 1fr 200px)
==> 1fr 과200px의 행(가로)이 두개 생성됨 그러니까 총 함치면 4개의 행. (1fr 200px, 1fr 200px)

grid-template-rows: 3fr repeat(2, 1fr 200px)
===>grid-template-rows: 3fr 1fr 200px 1fr 200px

grid-colum: 1/3;==>colum은 그리드 1번라인에서 시작해서 3번 라인에서끝나고,
grid-row: 2/3; ==> row는 그리드 2번라인에서 시작해 3번에서 끝난다.
시작접/종료점

39강

flex의 경우.

flex:비교적 작은 단위의 레이아웃에 적합,
스타트업 등에서 서비스의 초기단계를 개발을 할때,
유동성이 높아 디자인이나 기획이 확실하게 잡히지 않아 변경 가능성이 있는 경우 적합.

grid의 경우
:상대적으로 큰 규모의 레이아웃에 적합.
레이아웃 구조가 확실하게 잡혀있는 경우 효율적으로 반응형 디자인을 구현가능.
따라서 기획이 확실히 되어있다면 초기단계부터 그리드로 짜고 들어가도 괜찮음.

상황과 환경 등에따라 선택.

단, 그리드는 상대적으로 최신 기술이기에 모든 브라우저에서 지원하지는 않는다.

can i use라는 사이트에서 확인 할 수 있는데Can I use 하고 빈칸에 display: grid 라고 치면 어떤 브라우저에서 적용이 되고 적용되지않는지를 버전별로 확인 가능함. 붉은색은 지원안되고 있다는 것 초록색은 정상적으로 지원이 된다는 것

나만의 쇼핑몰 전체 다 만들어보기
기존 파일의 소스코드를 복사 전체 구조를 짜보기

40강

반응형 웹!!

무엇?
여러 전자기기(디바이스)를 통해 웹사이트를 접속한다.
모든기기에서 동일한 배치XX
디자인이나 핵심적인 부분은 그대로이나 레이아웃이 다름.
예전:스마트폰용 웹사이트와 pc용 사이트가 (url)다름.

현대:url은 동일.다만 기기에 따라서 조금씩 다르게 보임.==>반응형 웹.
화면의 가로사이즈에 반응하여 레이아웃 달라짐

41강

미디어쿼리: 뷰포트의 너비에 따라 웹사이트의 스타일시트를 수정할수 있게 하는 기능. 너비 이외에 단말기 종류, 해상도 등을 기준으로 설정가능.

@media애가 미디어 쿼리 . 그 뒤에 붙는애들은 다 조건문

42강

뷰포트:
웹페이지에 접속 했을시 상단 주소창 등 을 제외하고 딱 내용 부분만 일컬음.

break point:반응형 웹사이트의 기준이되는 중단점을 말함.

==>뷰포트를 측정해 나뉨/즉, pc/테블릿/ 모바일의 기준이 되는 규격분기....?

각각의 크기에따라 중단점들이 다름.

간단히 말해 뷰포트는 pc / 태블릿 / 모바일의 기준이 되는 규격분기!!

모바일: 0 ~ 767px
태블릿: 768px ~ 1023px
PC: 1024px ~ 1439px
-- 원래는 여기까지 3단계.
요즘에는 가정에서도 와일드 모니터를 사용해 4단계로 나누기도..

PC Large: 1440px ~

일반적으로는 위 처럼 나누고, 상황에 따라 다르게 나누기도 함.
모바일의 경우에도, 테블릿의 경우에도,PC의 경우에도 break point를 세부적으로 나눌 수 있음.
다만, 이렇게 더 나누어질 경우,작업시간 늘어나고, 인건비 증가.
따라서 기획단계시 프로젝트의 예산과 기간을 고려하여 반응형 웹을 몇단계로 나눌지 결정.

이 breakpoint 에는 절대적인 규격이 없다는것만 기억!!