CSS 및 HTML 기술 가이드 요약
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자 및 웹 디자이너
난이도: 중급 이상 (CSS3/HTML5 기반 기술 설명 포함)
핵심 요약
- Flexbox 및 Grid 레이아웃:
display: flex
와display: grid
를 사용하여 1차원/2차원 레이아웃 구현, 97% 이상의 브라우저 지원 - 반응형 설계:
@media
쿼리,clamp()
함수,minmax()
함수로 유연한 레이아웃 구현 - 성능 최적화:
transform: translate()
로 애니메이션,will-change
속성 사용, prefers-reduced-motion 미디어 쿼리 적용
섹션별 세부 요약
1. Flexbox 레이아웃
.container { display: flex; justify-content: center; align-items: center; }
로 수평/수직 중앙 정렬flex-direction: row | column
으로 레이아웃 축 설정,gap
속성으로 간격 조정flex: 1
로 자식 요소에 유연한 크기 할당position: top/left
애니메이션 대신transform: translate()
사용
2. CSS Grid 레이아웃
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); }
로 3열 레이아웃minmax()
함수로grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
와 같은 반응형 크기 설정grid-template-areas
로 세마스틱 레이아웃 정의,subgrid
으로 중첩 그리드 구현
3. 레거시 레이아웃 기술
::after
선택자로 clearfix 헥 사용:.clearfix::after { content: ""; display: table; clear: both; }
float: left
및position: absolute
로 전통적 레이아웃 구현 (Flex/Grid보다 추천 X)@media (max-width: 600px)
로 반응형 조건 설정, 모바일 퍼스트 디자인 적용
4. 텍스트 및 시각 효과
::first-letter
로 Drop Cap 스타일링:p:first-letter { float: left; font-size: 3rem; }
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
로 텍스트 줄임 처리@font-face { font-display: swap; }
로 폰트 로딩 최적화
5. 색상 및 그래디언트
background: linear-gradient(to right, #e66465, #9198e5);
로 그래디언트 배경mix-blend-mode: overlay;
로 Photoshop 스타일 블렌드 모드 적용box-shadow: 0 4px 6px rgba(0,0,0,0.1);
로 그림자 효과
6. 애니메이션 및 성능
transition: background-color 0.3s ease;
로 간단한 애니메이션@keyframes spin { to { transform: rotate(360deg); } }
로 키프레임 애니메이션will-change: transform;
로 GPU 가속 애니메이션 최적화@media (prefers-reduced-motion: reduce)
로 모션 감지 사용자 대응
7. 최신 기능
@container (min-width: 400px) { .card { display: flex; } }
로 컨테이너 쿼리 사용calc()
,min()
,max()
,clamp()
로 동적 계산:is()
및:where()
로 선택자 그룹화,:has()
로 부모 요소 선택
결론
- Flexbox/Grid 사용으로 모던 레이아웃 구현, 97% 이상 브라우저 지원
transform: translate()
로 성능 최적화 및prefers-reduced-motion
미디어 쿼리 사용@container
및clamp()
등 최신 기능 적용으로 유연한 디자인 가능