카테고리: CSS

부모의 두 축 정렬로 카드를 가운데 놓는 전체 예제를 제공합니다. 주축 방향 비교, 모바일 너비 대응, 최소 화면 높이와 긴 내용의 잘림 문제까지 함께 설명합니다.

nowrap·wrap·wrap-reverse의 차이를 같은 크기의 아이템 예제로 비교합니다. flex-shrink, 간격, 세로 방향의 높이 제한 때문에 예상과 다르게 배치되는 원인도 설명합니다.

video와 object-fit으로 배경 영역을 채우고 HTML 텍스트를 겹치는 전체 예제입니다. 재생·일시 정지, 자동 재생 실패, 동작 줄이기와 모바일·용량 확인도 함께 다룹니다.

:hover::before가 선택하는 대상과 부모 색·가상 요소 색의 상속 차이를 전체 예제로 설명합니다. 가상 요소 뒤의 상태 선택에 관한 최신 명세의 조건과 브라우저 지원도 구분합니다.

Flex로 체크박스와 라벨을 가운데 정렬하고, 여러 줄 문구의 첫 줄에 맞추는 전체 예제를 제공합니다. 글자·컨트롤 크기 변경, vertical-align과 top 보정의 적용 조건도 설명합니다.

accent-color와 appearance를 이용해 체크박스의 색·테두리·선택 표시를 꾸미는 전체 예제입니다. 라벨 클릭, 키보드 포커스, 비활성 상태와 폼 선택값도 함께 확인합니다.

서로 다른 글자 크기로 stretch·시작·끝·가운데·기준선 정렬을 비교하는 전체 예제를 제공합니다. 고정 크기, align-self, 자동 여백과 column 방향에서 결과가 달라지는 조건도 설명합니다.

여섯 가지 정렬 값을 같은 크기의 아이템으로 비교하고, space-between·around·evenly의 간격 차이를 설명합니다. gap, 자동 여백, flex-grow와 column 높이 때문에 정렬이 달라지는 조건도 확인할 수 있습니다.

flex와 inline-flex의 바깥 배치·안쪽 배치를 전체 예제로 비교합니다. 아이템 높이가 늘어나는 조건, 직접 자식의 범위, 줄바꿈과 긴 문자열 처리도 설명합니다.

같은 HTML 순서에 row·row-reverse·column·column-reverse를 적용해 방향을 비교합니다. 모바일에서 세로 배치로 전환하는 방법과 화면 순서·키보드 순서의 차이도 설명합니다.