카테고리: CSS

체크박스로 재생·일시 정지를 제어하는 전체 예제로 키프레임과 animation 속성을 설명합니다. 한 번의 재생 시간, 왕복 반복, fill-mode와 동작 줄이기 환경의 차이도 비교할 수 있습니다.

인라인 이미지의 부모 정렬과 블록 이미지의 자동 여백을 구분하고, Grid로 가로·세로 가운데에 배치하는 방법을 설명합니다. 연습용 SVG와 전체 HTML, 크기 변경 실습도 제공합니다.

단 너비와 최대 개수를 조합해 넓은 화면에서는 3단, 모바일에서는 1단이 되는 전체 예제를 제공합니다. 간격·구분선·분할 제어와 Grid·Flex를 선택할 기준도 설명합니다.

border-radius의 값 1~4개 순서와 슬래시로 가로·세로 반경을 나누는 방법을 설명합니다. 전체 예제로 원·타원의 차이, 개별 모서리와 자식 이미지 잘라내기도 확인할 수 있습니다.

체크박스로 이동과 색을 바꾸는 전체 예제로 transition의 대상·지속 시간·속도·지연을 설명합니다. 되돌림, 설정 우선순위, 이산 속성의 범위와 동작 줄이기 환경도 구분합니다.

absolute의 50% 좌표와 translate(-50%, -50%)를 조합하는 전체 예제와 연습용 이미지를 제공합니다. Grid 대안, 서로 다른 백분율 기준과 모바일의 긴 문구·대비 문제를 함께 확인합니다.

z-index의 앞뒤 순서와 적용 대상을 설명하고 같은 범위·다른 부모의 비교를 전체 예제로 확인합니다. 부모 쌓임 맥락, auto와 0, 잘림과 상단 레이어의 차이도 구분합니다.

표의 최소 너비와 바깥 스크롤 상자를 분리하는 전체 예제를 제공합니다. 제목 셀·행 배경·줄바꿈을 꾸미고 페이지 넘침, 키보드 스크롤과 부모 레이아웃의 최소 크기를 확인합니다.

::selection으로 선택한 텍스트의 배경색·글자색을 바꾸는 전체 예제를 제공합니다. 특정 문단에만 다른 색을 적용하고 허용 속성, 대비와 브라우저별 확인 범위를 설명합니다.

원·타원·중심 위치·closest-side 크기를 같은 상자에서 비교합니다. 크기 키워드가 색상 지점의 백분율에 주는 영향과 원 바깥의 색, 배경 적용 조건을 설명합니다.