TECH NOTES
기술노트
현장에서 검증된 개발 지식을 기록합니다.
54321
Frontend
CSS z-index가 안 먹히는 진짜 이유 — stacking context
z-index 9999를 줘도 안 올라오는 건 부모가 만든 쌓임 맥락(stacking context)에 갇혀서다. transform·opacity·position이 맥락을 만든다.
Frontend
CSS flex 자식이 부모를 뚫고 넘칠 때 — min-width: 0
flex 자식 안의 긴 텍스트나 그리드가 부모를 넘쳐 가로 스크롤이 생기는 건 flex item의 min-width 기본값이 auto라서다. min-width:0 한 줄로 해결.
Frontend
CSS Modern Layout — Container Queries·Subgrid·anchor positioning
CSS의 모던 레이아웃 도구들 — Container Queries (반응형 재정의), Subgrid (자식 grid 정렬), Anchor positioning (절대 위치 혁명). 모두 표준화 완료.
Frontend
CSS Anchor Positioning — 요소 간 위치 지정의 혁신
CSS Anchor Positioning API로 요소 간 상대적 위치를 지정하는 새로운 방법.
Frontend
CSS Grid 레이아웃 마스터하기 — 실전 패턴 12가지
CSS Grid의 핵심 개념과 실무에서 자주 사용하는 12가지 레이아웃 패턴.