32일차 배운 것 정리

목차

1. CSS 심화 세션 by 박영웅 강사님

1-1. @container - 컨테이너 규칙

반응형을 위해서 요소 단위로 크기를 계산해서 레이아웃을 조절할 수 있는 속성

• 주의 현재 Experiments 단계이고, 크롬에서 적용 준비 중이다.

• 컨테이너 type과 name을 지정해야한다.

• inline-size 는 수평길이(너비)를 뜻함
container-name: ‘name’ 으로 이름 지정하여 사용한다.

• @container card-container (inline-size < 500px) { doSomething() }
card-container의 이름을 가진 selector 요소를, inline-size가 500px 이하일 때, doSomething 하겠다!

• container요소 자체는 제어가 되지 않고, container내부의 item 요소만 제어할 수 있다.

1-2. @layer - 레이어

• html

• css



• before
• 원래는 .container .item의 우선순위가 더 높기 때문에 초기색 orange!
• layer 선언 후, 이름을 부여할수 있다.
• 상단에 @layer b, a; 로 우선순위를 지정할 수 있다.
• After
• layer의 우선순위가 적용되어 b가 더 높아졌기 때문에 red로 변경
주의사항
• !important 문법 || inline style은 layer의 우선순위에 상관없이 가장 높은 우선순위로 적용된다.
• 크롬 99 버전 이상부터 적용된다.

1-3 aspect-ratio

반응형에 따른 비율 유지를 위해 사용

• html



• 레거시 html

• CSS



• 레거시 CSS

• 크롬 88 버젼 이상부터 지원

1-4. content-visibility

뷰포트 밖에 있는 화면(안보이는 부분)은 렌더링 하지 않도록 하는 옵션

• 크롬85버젼 이상 가능

• @support 옵션을 통해, 해당 기능 지원하면 성능 관련 업데이트하도록 처리 가능

• content-intrinsic-size 옵션 주지 않으면, 새로 불러올 때마다 마우스 스크롤 튀는 현상있다.
• 렌더링은 하지 않지만 해당 size는 잡아주어라
• before

 

 

 

• after

1-5. overscroll-behavior

스크롤이 2개이상 있을 때, 내부 스크롤이 끝에 닿을 때 어떻게 처리할 것인지에 대한 속성

• html

• css

• before
• 내부 스크롤이 끝에 닿으면, 상위 스크롤이 자동으로 움직이게 됨

• After
• 내부 스크롤이 끝에 닿아도, 상위 스크롤이 작동하지 않음

1.6. accent-color

checkbox와 ratio의 color를 지정해줄 수 있는 옵션

1.7. CSS contain

• contain: layout
• 내부요소의 변화가 설정한 layout 밖으로 나가지 못하도록 설정

• contain: paint
• 해당 요소를 벗어나는 값은 paint하지 않도록 함

2. CSS 심화 세션 Q&A

2.1 Q. 사이트 클론 시 어떻게 시작할 까요?

• 1. section개념으로 수평으로 전부 쪼개 보기

• 2. 수평쪼개본 후, 가운데 정렬 혹은 좌우에 어떤 요소들이 있는지 분석

2.2 Q. CSS를 작성할 때 속성을 어떤 순서로 작성하는 것이 좋을까요??

• box-model 관련은 위로 올린다. (width, height, padding, margin, ... )

• 배경과 폰트 관련 묶는다. (background, font-size, ...)

• 레이아웃 관련 아래로 보내기 (justify-content, flex- , ... )

• 단 flex-shrink는 flex-Item에 적용하는 것으로, 부모요소와 관련이 있기 때문에, 상위로 따로 빼준다.

2.3 Q. CSS가 아직 많이 낯선데 CSS 공부할 때 영웅 강사님(ㅎㅎㅎㅎ)이 추천하시는 방법이 있으신가요?

• 구현을 하다 막히는 부분, 개발자도구로 확인하며 어떻게 해결했나 보는 것 권장

• 단, 먼저 개발자도구 보고 하는 것은 의미 없다!

2.4 디자인 작업을 하실 때 HTML 구조를 모두 작성한 뒤에 CSS를 작성하시는지, 아니면 HTML과 CSS를 병렬적으로 작성하시는지 궁금합니다!

• 레이아웃보고 → HTML 파일작성 → CSS 선택자 골라내기 → CSS 작업하기

2.5. 그림판, 색연필 서비스 이름?

• ScreenBrush

2.6 이번 과제할 떄, 가고 싶은 회사 사이트는 조금 단순해서 CSS 연습하기에는 조금 아쉬운데, 그래도 회사 어필에는 좋을 것 같아서 선택해보려고 하는데, 의견 있으실까요..? (ex. 네이버클론or 유튜브 클론이 더 도움이 될 것 같다.)

• 둘다하는 것 추천..!

2.7 자식요소 만큼 컨테이너 크기 정할 때 fit-content 사용하시나요?

• min-content 속성 자주 사용

• block 속성인데, 크기를 item만큼 주고자 할 때, container의 width: min-content 로 지정



 

2.8 콘테이너 요소의 height를 브라우저 전체 영역으로 먹게 하고 싶습니다! 그래서 처음 생각했던 것이 100vh로 했는데, 스크롤이 발생하면 스크롤이 되는 영역 이후에는 짤리게 되더라구요. 혹시 스크롤이 되어도 콘테이너 요소가 전체 브라우저의 전체 height를 먹게하려면 어떻게 할까요

• vh는 절대값이기 때문에, 첫 viewport의 높이값이 지정된다.

2.9 저는 vue로 업무를 수행하다 우리나라 채용 시장에 react가 너무 많아서 react를 공부해보고 있습니다.ㅠㅠ 우리나라에서 vue 개발시장이 얼마만큼 성장할거라고 생각하는지 여쭤보아도 될까요?

• ts처음 배울 때 js 배경지식 적다면, 적용하기 힘든 것 처럼 기본지식이 있다면, vue react 둘 다 갈아타기 그렇게 어렵지만은 않다.

3. CSS - grid Item

• 그리드 개발자도구로 확인해보기

• 예제 기본 세팅
• html
• css

3.1 grid-Line(gutter)

• x축 기준 왼쪽 부분이 1번 라인, y축 기준 위쪽이 1번라인

• Line은 양수단위와 음수단위를 동시에 가짐 (1,2,3,4 & -1,-2,-3,-4)

3.1.1 line값을 절대값 번호로 입력하여 Item 지정하기

• grid-row-start: 2
• 2번 행 부터 시작해라

• grid-row-end:4;
• 2번 행 부터 시작해서 4번 행에서 끝내라

• grid-column-start:2

• grid-column-end:4

• view

3.1.2 line 번호를 지정하지 않고, 현재 line으로 부터 상대적으로 추가하기.

.container .item:nth-child(1){
	grid-row-start: span 2;
	grid-column-start: span 3;
}

• 현재 선택된 Item의 line은 row: 1번 아이템의 왼쪽이므로 1
col: 1번 아이템의 위쪽 이므로 1

• nextRow = 1 + 2 = 3 nextCol = 1 + 3 = 4

• 총 row는 3번라인 까지, col은 4번 라인까지 선택되어 총 6개의 아이템이 선택된다.

• view

• view(before2)

• 칸이 암시적으로 내려가게 됨

• grid-auto-flow: dense; 적용하기
• 4가 빈공간 찾아 위로 올라오게됨
• view (after)

• View (before1)



 

3.2 justify-self , align-self

container가 아닌 item에서 개별적으로 정렬하기 위해 사용하는 속성

3.2 grid 선택하기 정리, 복습

• 복습

• 복습

• order 복습

• 시작

• order 적용

• z-index 값 통해서 쌓임순서 정할 수 있음 (z-index 높으면 우선순위 높음)



 

4. CSS - Grid Function, Units

4.1 repeat

repeat(반복되는 개수, 크기) 으로 반복된 크기를 입력할 때 사용

4.2. minmax

minmax(최소너비, 최대너비): grid Item 요소의 최소너비와 최대너비를 한 번에 지정하는 함수

• 사용예시 1
grid-template-columns: minmax(100px, 1fr), minmax(200px, 1fr);

• container 너비가 충분히 클 때는 1fr, 1fr로 1:1 비율을 유지하다가, container넓이가 계속해서 작아지면, 2번 item은 200px을 유지하고, 1번 아이템만이 줄어들어 100px까지 줄어들게 된다.

• 사용예시2
grid-auto-rows: minmax(100px, auto)
• grid-auto-rows는 암시적으로 생기는 행들의 높이를 지정하는 속성이다
• 즉 여기서, 추가되는 Item들은 행의 높이를 최소 100px을 가지게 되고, 그 이상의 경우 auto를 통해 입력되는 height 값을(3번 Item의 200px)을 그대로 사용할 수가 있다.
• 만약 minmax(100px, auto)가 없이 100px이었다면, 3번 item은 잘려서 나올 것이다.

4.3 fit-content( -px)

content의 너비에 맞추돼, 최대 -px 값까지 늘어날 수 있다. (-px 넘으면 줄바꿈처리)

• 사용예시1
grid-template-columns: fit-content(300px) fit-content(300px)
• 상황
• 2번 아이템의 글자가 길어져 아이템 밖으로 튀어나오고 있는 상황



• 적용 후
• 1번은 content에 맞게 너비가 꽉 차게 되었고,
• 2번의 경우 최대 300px에 도달하여, 줄바꿈 처리가 적용되었다.

4.4 Grid함수들 정리

• Container에 적용할 수 있는 옵션들로, 행과 열의 크기를 지정하는 속성
• grid-template-rows, grid-template-columns

• 추가적인 Item들에 대하여 암묵적인 크기를 지정하는 속성
• grid-auto-rows, grid-auto-columns

• reapeat(횟수, 너비) , minmax(최소값, 최대값), fit-content(제한 너비값)

4.5 Grid에서 사용하는 단위 ( fr )

fr은 공간너비비율 을 뜻하며, fraction의 줄임말로남은 공간에 대한 비율을 가져가도록 하는 단위이다.

• 사용예시
grid-template-columns: 100px 100px 1fr 2fr
• 상황
• 적용 후



 

4.6 min-content, max-content

ㄴ

• 사용예시
grid-template-coulmns: repeat(4, min-content)
• 상황
• text 자리가 없어서 줄바꿈 처리 된 상황



• min-content 적용 후
• 영어의 경우 띄어쓰기 단위로 최소 content를 파악하게 된다. 한글의 경우 1글자 단위 인식
• 한글도 띄어쓰기 단위로 사용하려면, word-break:keep-all 속성 적용



• max-content 적용 후
 

4.7 auto-fill, auto-fit

auto-fit은 item의 최대크기를 기준으로 공간에 맞게 개수 배치, auto-fill은 item의 최소크기를 기준으로 공간에 맞게 개수 배치

• 사용예시2
grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
• 상황
• container 최소로 줄이게 되면, item들이 열을 지키며, 유동적으로 움직이지 않는다.



• auto-fit 적용 후
• 열의 개수가 container의 크기에 맞게 자동으로 조절된다.
• 크게 했을 경우, 1줄에 전부 담기게 됨



 
• auto-fill 적용
• 최소넓이로 개수만큼만 생기고 나머지 빈공간 처리



 

4.8 정리