CSS
-
CSS Display와 Spacing 완벽 가이드
“Claude 생성 문서” Display 속성의 기본값 display 속성의 기본값은 요소마다 다릅니다. Block 요소 (display: block) Inline 요소 (display: inline) Inline-block 요소 핵심: <div>는 기본값이 display: block이므로, 따로 지정하지 않아도 block으로 동작합니다. Grid의 gap 속성 gap은 그리드 아이템들 사이의 간격만 조절하며, 컨테이너의 외곽 여백은 관여하지 않습니다. 시각적 구조 padding: 컨테이너 경계와 첫 번째 아이템 사이의 여백… Continue reading
-
Next.js에서 Grid Layout과 @layer를 활용한 모던 CSS 설계
요약 grid-template-areas는 Tailwind 임의값보다 권장되는 모던 CSS 방법 @layer를 활용해 CSS 우선순위를 체계적으로 관리 Next.js App Router의 layout.js와 globals.css 조합이 최적 @layer란 무엇인가? @layer는 CSS Cascade Layers의 핵심 기능으로, 스타일의 우선순위를 명시적으로 관리할 수 있게 해줌 CSS 우선순위 순서 (낮음 → 높음) Tailwind CSS에서의 @layer Tailwind는 기본적으로 3개의 레이어를 제공: 실전 적용: 메인 레이아웃 설계… Continue reading
-
CSS 정렬 속성 완전 정복 – Flexbox vs Grid
CSS 정렬 속성들이 헷갈리는 이유와 Flexbox, Grid에서 각각 어떻게 사용하는지 체계적으로 정리했다. 속성 Flexbox Grid justify-content ✅ 전체 정렬 ✅ 전체 정렬 justify-items ❌ 효과 없음 ✅ 각 셀 내부 justify-self ❌ 효과 없음 ✅ 개별 아이템 align-items ✅ 전체 정렬 ✅ 각 셀 내부 align-self ✅ 개별 아이템 ✅ 개별 아이템 align-content ✅ 여러… Continue reading
-
CSS Position 완전 정복 가이드
CSS에서 요소의 위치를 제어하는 position 속성에 대한 완전한 이해를 위한 가이드다. position 속성과 값들 position은 속성명이고, 다음과 같은 값들을 가질 수 있다: 각 position 값의 특징 1. static (기본값) 일반적인 문서 흐름대로 배치 top, left, right, bottom, z-index 모두 무시됨 2. relative 원래 위치를 기준으로 상대적으로 이동 원래 자리는 그대로 차지함 (다른 요소들이 밀리지 않음)… Continue reading
-
실무에서 자주 마주치는 CSS 문제 해결법 10가지
개발하다 보면 “분명 맞는 것 같은데 왜 안 되지?”라는 상황들이 있다. 자주 발생하는 CSS 문제들과 해결법을 정리했다. 1. z-index가 작동하지 않을 때 문제 해결 이유: z-index는 positioned 요소(position이 static이 아닌 요소)에서만 작동한다. 2. margin: auto 세로 중앙정렬이 안 될 때 문제 해결 이유: margin: auto의 세로 중앙정렬은 부모가 명시적 높이를 가져야 한다. 3. width 100%… Continue reading
-
CSS 비직관적 속성들과 Flexbox 핵심 해결책
CSS에는 논리적으로 이해하기 어려운 속성들이 존재한다. 이런 것들을 알고 있어야 실무에서 막히지 않는다. 비직관적 CSS 속성들 1. min-height: 0 – Flex 아이템 크기 제어 문제 해결 이유: Flex 아이템은 기본적으로 min-height: auto를 가져서 자식 콘텐츠의 최소 크기를 유지하려 한다. min-height: 0으로 이를 무시하고 flex 비율대로만 동작하게 한다. 2. flex-shrink: 0 – 아이템 크기 고정 문제… Continue reading
