CSS 레이아웃
Flexbox, 스크롤 스냅, 논리적 속성 등 CSS 레이아웃 기법
요소 배치와 정렬을 다루는 CSS 레이아웃 기법들을 학습합니다. object-fit, Flexbox 텍스트 처리, 스크롤 스냅, 다국어 지원을 위한 논리적 속성 등을 다룹니다.
-
CSS 논리적 속성: margin-inline, padding-block 완전 가이드
margin-left 대신 margin-inline-start를? 다국어 지원과 쓰기 방향을 고려한 논리적 속성(Logical Properties)으로 더 유연한 레이아웃 만들기.
-
CSS scroll-snap-type으로 네이티브 앱처럼 자연스러운 스크롤 만들기
scroll-snap-type을 활용해 모바일 앱처럼 자연스럽게 스냅되는 스크롤 경험을 만드는 완벽 가이드
-
Flex 레이아웃에서 텍스트 말줄임이 안 될 때 - min-width의 비밀
text-overflow ellipsis를 설정했는데도 텍스트가 영역을 넘어가는 이슈, 경험해보셨나요? Flex 레이아웃에서 min-width auto의 함정과 해결 방법을 실전 예제로 알아봅니다.
-
반응형 디자인의 필수 도구, object-fit과 object-position 완벽 가이드