부트캠프/멋쟁이 사자처럼

20+DAY_멋사 프론트엔드 부트캠프 14기_TIL

NamDoHyeon 2025. 5. 20. 17:52

What I Learned Today

오전에는 Stacking Context와 Subgrid에 대해 배웠다.

Stacking Context는 가상의 Z축을 사용한 HTML 요소의 3차원 개념화이다.

그래서 요소들이 겹치거나 다른 요소가 보이는 현상이 일어난다.

그리고 필터 속성들도 이 특징을 가지고있다.

쌓임 맥락으로 인한 겹침

 

isolation : isolate는 선언한 컨테이너 요소들이 자신의 밑으로 내려가지 않도록 설정하는 속성이다.

 

Subgrid는 조부모 grid 속성값을 그대로 손자가 사용할 수 있도록 설정할 수 있다.

그리드 항목을 그리드 컨테이너로 만들어 그리드를 중첩할 수 있는데 이러한 그리드는 부모 그리드와 서로 독립적이다.

따라서 부모 그리드의 크기를 가져오지 않는다. 

따라서 중첩된 그리드 항목을 기본 그리드에 맞춰 정렬하려면 subgrid를 사용하면 좋다.

 

오후에는 isolation을 사용하여 콤보박스 ui 만들기 실습을 했고 container query에 대해 배웠다.

완성물

 

media query는 뷰포트가 기준이지만 container query는 자신의 컨테이너 기준이다.

컨테이너 쿼리를 사용하면 너비와 높이, 블록의 크기와 인라인 크기를 기준으로 요소의 스타일을 지정할 수 있다.

사용하려면 특정 요소에 container-type 속성을 사용해서 컨테이너 쿼리를 사용할 것이라고 명시해야 한다.

 

git stash는 아직 커밋하지 않은 변경 사항이 있지만 다른 브랜치로 이동하거나 다른 작업을 하고자 할 때 사용된다.

이 명령을 사용하면 변경 사항을 임시로 숨길 수 있으며 나중에 다시 불러올 수 있다.

# 변경된 파일을 임시로 보관하는 명령어
git stash

# 임시로 보관되어 있는 파일들을 알려주는 명령어
git stash list

# 임시로 보관되어 있는 파일들을 자세하게 보여주는 명령어
git stash show

# 임시로 보관된 파일을 로컬 디렉토리로 다시 꺼내오는 명령어
git stash apply

# 임시로 보관되어 있는 이력을 지우는 명령어
git stash drop

# 임시로 보관되어 있는 파일을 로컬 디렉토리로 꺼내오고 이력을 지우는 명령어
git stash pop

 

The Problem I Faced

 

What I Tried to Do

 

How I Solved It

 

So

 

Aha Moments

git stash를 미리 알았더라면.. 저번에 pull을 받지 못했던 문제를 훨씬 쉽게 해결하지 않았나 싶다...

역시 아는게 힘이다.

반응형